@import url('gold.css') layer(gold);

@font-face {
    font-family: 'slkscr';
    font-weight: normal;
    src: url('/static/fonts/slkscr.ttf');
}

@font-face {
    font-family: 'slkscrb';
    font-weight: bold;
    src: url('/static/fonts/slkscr.ttf');
}

:root {
	--black: #1c1c1c;
	--orange: #F3A235;
	--yellow: #F2CA29
}

body {
    background: var(--black);
    font-family: 'slkscr';
}

main {
    /* font-family: system-ui; */
	color: var(--yellow);
}

#welcome {
	color: var(--orange);
    font-family: 'slkscrb';
    display: flex;
	flex-wrap: wrap;
    gap: 1rem;
    font-weight: bold;
}

#intro {
	margin-bottom: 1rem;
}

#supporters {
	margin-top: 1rem;
	font-size: var(--m);
}

#donations {
    grid-auto-flow: column;
    gap: 2rem;
    button {
        font-weight: bold;
        padding-inline: 8%;
        cursor: pointer;
        transition: scale .1s linear;
        background: darkslategrey;
        &:hover {
            scale: 1.1;
        }
    }
}

p {
    text-align: center;
}

h2 {
    font-weight: bold;
	text-align: center;
}

button {
    font-size: var(--l);
}

#check {
	color: var(--orange);
}

#game-container {
	display: flex;
	flex-direction: column;
	gap: 2rem;
	justify-content: center;
	align-items: center
}

#game-container > div {
    display: grid;
    margin-block: 1rem;
    padding: 1rem;
    border-radius: 2rem;
    box-shadow: 0px 4px 8px darkslategrey;
    transition: scale .1s linear, color .1s linear;
    &:hover {
        scale: 1.01;
        a {
            font-weight: bold;
        }
        h2 {
            color: dodgerblue;
        }
    }

    p, a {
        font-size: 1rem;
        text-align: start;
    }
}

li {
    background: linear-gradient(90deg,
        #b8860b 0%,
        #daa520 25%,
        #cd853f 50%,
        #daa520 75%,
        #b8860b 100%);
    background-size: 200% 100%;
    background-clip: text;
    color: transparent;
    text-align: center;
    font-weight: bold;
    text-emphasis: "❤️";
    text-emphasis-position: under;
}

img {
    height: 5rem;
    background: var(--yellow);
    place-self: center;
    padding: 1rem;
    border-radius: 1rem;
}