/* ----- FONTS ----- */ /* Import fonts */ @import url("https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,100..900;1,100..900&family=Chivo:ital,wght@0,100..900;1,100..900&display=swap"); /* Set font variables */ :root { --bodyFont: "Archivo", sans-serif; --titleFont: "Chivo", sans-serif; } /* Set font families for elements */ body, p, textarea, h5, h6 { font-family: var(--bodyFont); } h1, h2, h3, h4 { font-family: var(--titleFont); } /* ----- COLORS ----- */ /* Set color variables */ :root { --text: #b4b4b4; --background: #171717; --primary: #bdbdbd; --secondary: #ccc5b8; --accent: #28ebb6; --textcontrast: #64d97b; --bgcontrast: #64d97b; --primarycontrast: #64d97b; --secondarycontrast: #ffdd00; --accentcontrast: #8fff9e; --accentdark: #1d8094; --text5: hsl(34, 6%, 24%, 5%); --text10: hsl(34, 6%, 24%, 10%); --text15: hsl(34, 6%, 24%, 15%); --text20: hsl(34, 6%, 24%, 20%); --text25: hsl(34, 6%, 24%, 25%); --text30: hsl(34, 6%, 24%, 30%); --text35: hsl(34, 6%, 24%, 35%); --text40: hsl(34, 6%, 24%, 40%); --text45: hsl(34, 6%, 24%, 45%); --text50: hsl(34, 6%, 24%, 50%); --text55: hsl(34, 6%, 24%, 55%); --text60: hsl(34, 6%, 24%, 60%); --text65: hsl(34, 6%, 24%, 65%); --text70: hsl(34, 6%, 24%, 70%); --text75: hsl(34, 6%, 24%, 75%); --text80: hsl(34, 6%, 24%, 80%); --text85: hsl(34, 6%, 24%, 85%); --text90: hsl(34, 6%, 24%, 90%); --text95: hsl(34, 6%, 24%, 95%); --primary5: hsl(40, 4%, 14%, 5%); --primary10: hsl(40, 4%, 14%, 10%); --primary15: hsl(40, 4%, 14%, 15%); --primary20: hsl(40, 4%, 14%, 20%); --primary25: hsl(40, 4%, 14%, 25%); --primary30: hsl(40, 4%, 14%, 30%); --primary35: hsl(40, 4%, 14%, 35%); --primary40: hsl(40, 4%, 14%, 40%); --primary45: hsl(40, 4%, 14%, 45%); --primary50: hsl(40, 4%, 14%, 50%); --primary55: hsl(40, 4%, 14%, 55%); --primary60: hsl(40, 4%, 14%, 60%); --primary65: hsl(40, 4%, 14%, 65%); --primary70: hsl(40, 4%, 14%, 70%); --primary75: hsl(40, 4%, 14%, 75%); --primary80: hsl(40, 4%, 14%, 80%); --primary85: hsl(40, 4%, 14%, 85%); --primary90: hsl(40, 4%, 14%, 90%); --primary95: hsl(40, 4%, 14%, 95%); --secondary5: hsl(39, 16%, 76%, 5%); --secondary10: hsl(39, 16%, 76%, 10%); --secondary15: hsl(39, 16%, 76%, 15%); --secondary20: hsl(39, 16%, 76%, 20%); --secondary25: hsl(39, 16%, 76%, 25%); --secondary30: hsl(39, 16%, 76%, 30%); --secondary35: hsl(39, 16%, 76%, 35%); --secondary40: hsl(39, 16%, 76%, 40%); --secondary45: hsl(39, 16%, 76%, 45%); --secondary50: hsl(39, 16%, 76%, 50%); --secondary55: hsl(39, 16%, 76%, 55%); --secondary60: hsl(39, 16%, 76%, 60%); --secondary65: hsl(39, 16%, 76%, 65%); --secondary70: hsl(39, 16%, 76%, 70%); --secondary75: hsl(39, 16%, 76%, 75%); --secondary80: hsl(39, 16%, 76%, 80%); --secondary85: hsl(39, 16%, 76%, 85%); --secondary90: hsl(39, 16%, 76%, 90%); --secondary95: hsl(39, 16%, 76%, 95%); --accent5: hsl(17, 83%, 54%, 5%); --accent10: hsl(164deg 83% 54% / 10%); --accent15: hsl(164deg 83% 54% / 15%); --accent20: hsl(164deg 83% 54% / 20%); --accent25: hsl(164deg 83% 54% / 25%); --accent30: hsl(164deg 83% 54% / 30%); --accent35: hsl(164deg 83% 54% / 35%); --accent40: hsl(164deg 83% 54% / 40%); --accent45: hsl(164deg 83% 54% / 45%); --accent50: hsl(164deg 83% 54% / 50%); --accent55: hsl(164deg 83% 54% / 55%); --accent60: hsl(164deg 83% 54% / 60%); --accent65: hsl(164deg 83% 54% / 65%); --accent70: hsl(164deg 83% 54% / 70%); --accent75: hsl(164deg 83% 54% / 75%); --accent80: hsl(164deg 83% 54% / 80%); --accent85: hsl(164deg 83% 54% / 85%); --accent90: hsl(164deg 83% 54% / 90%); --accent95: hsl(164deg 83% 54% / 95%); --nirdine: #676fa3; --bg-art: url(../img/art/bg2.png); --discord: #5865f2; --patreon: #ff424d; } /* Set colors for elements */ body { background: var(--background); background-position: top; background-repeat: no-repeat; background-size: cover; } body::before { content: ""; display: block; height: 100%; left: 0px; position: fixed; top: 0px; width: 100%; z-index: -1; background: linear-gradient(rgba(0, 0, 0, 0.7), rgb(2, 5, 11)), var(--bg-art); background-color: #808080; background-position: top; background-repeat: no-repeat; background-attachment: fixed; background-size: cover; filter: blur(1px); } .element { background: rgba(0, 0, 0, 0.5); border-radius: 16px; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border-color: rgba(255, 255, 255, 0.14); } input[type="submit"]:not(:disabled), #register button { background: var(--accent); color: var(--background); } input[type="submit"]:disabled { background-color: var(--accent20); color: var(--background); } #search .searchInput:hover, #search .searchInput:focus-visible { background: var(--background); } .searchButton:hover, .searchButton:focus-visible, header ul img:hover, header ul a:focus-visible img, input[type="submit"]:not(:disabled):hover, input[type="submit"]:not(:disabled):focus-visible { filter: brightness(1.2); } h1, h2, h3, h4, h5, h6, input, textarea { color: var(--primary); } body, p, span, .hero-scroll, label { color: var(--text); } a { text-decoration: underline; color: var(--accent); } strong { font-weight: 700; } mark { color: var(--accent); } footer span { color: var(--nirdine); opacity: 0.8; } footer:hover, foooter:focus-within { opacity: 1; } #progress { background-image: linear-gradient(120deg, var(--accent) 0%, var(--accentdark) 100%); } /* Submit button loading animation */ .send-deck.loading-active { background-image: linear-gradient(to right, var(--accent) 50%, #65a5b2 50%); background-size: 200% 100%; background-position: 100% 0; /* Start with the 'unfilled' color taking up the space */ animation: fillButton 2.5s linear forwards; /* 'forwards' keeps the state at 100% */ color: var(--background); /* Ensure text remains readable */ } @keyframes fillButton { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } }