@import url('gold.css');

@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', system-ui;
}

main {
	color: var(--yellow);
    text-align: center;
    gap: 1rem;
    max-width: 1000px
}

#welcome {
	color: var(--orange);
    display: grid;
    grid-auto-flow: column;
    gap: 1rem;
    font-weight: bold;
}

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

#supporters {
    ul {
        background: linear-gradient(0deg,
            var(--yellow),
            var(--orange)
        );
        background-size: 100% 100%;
        background-clip: text;
        color: transparent;
        font-weight: bold;
        text-emphasis: "❤️";
        text-emphasis-position: under;
    }
}

#reopening {
	position: absolute;
	top: 10rem;
	left: -.4rem;
	grid-auto-flow: column;
	gap: .6rem;
	background: var(--yellow);
	outline: 10px solid var(--orange);
	color: white;
	border-radius: 1rem;
	text-align: start;
	rotate: -10deg;
	img {
		width: 5rem
	}
}