| @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@500;700;800;900&family=Press+Start+2P&display=swap'); | |
| @import "tailwindcss"; | |
| @theme { | |
| --font-pixel: "Press Start 2P", system-ui, sans-serif; | |
| --font-gothic: "Nunito", system-ui, sans-serif; | |
| --color-sky-blue: #F8F5EE; | |
| --color-parchment: #F3EBD8; | |
| --color-panel: #FFFDF7; | |
| --color-wood: #7A5335; | |
| --color-border: #4A3528; | |
| --color-forest: #7CC576; | |
| --color-orange: #FF8A65; | |
| } | |
| @layer utilities { | |
| .pixel-shadow { | |
| box-shadow: 4px 4px 0px 0px var(--color-border); | |
| } | |
| .pixel-shadow-sm { | |
| box-shadow: 2px 2px 0px 0px var(--color-border); | |
| } | |
| .pixel-shadow-inner { | |
| box-shadow: inset 4px 4px 0px 0px rgba(92, 64, 51, 0.2); | |
| } | |
| .pixel-border { | |
| border: 3px solid var(--color-border); | |
| border-radius: 8px; | |
| } | |
| .pixel-border-sm { | |
| border: 2px solid var(--color-border); | |
| border-radius: 6px; | |
| } | |
| } | |
| body { | |
| background-color: #F8F5EE; | |
| color: var(--color-border); | |
| font-family: var(--font-gothic); | |
| background-image: | |
| linear-gradient(90deg, rgba(92,64,51,0.05) 1px, transparent 1px), | |
| linear-gradient(rgba(92,64,51,0.05) 1px, transparent 1px); | |
| background-size: 24px 24px; | |
| } | |