@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;
	--shadow: #ffffff80;
	--orange: #f3a235;
	--yellow: #f2ca29
}

body {
    background: var(--black);
    font-family: 'slkscr', system-ui;
    transition: all .2s linear;
	&[light] {
		--black: #e3e3e3;
    	--shadow: #00000080;
		--orange: #0c5dca;
		--yellow: #0d35d6;
	}
}


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

#avatar {
    filter: drop-shadow(0px 0px 4px var(--orange))
}

#welcome {
	color: var(--orange);
    gap: 1rem;
    font-weight: bold;
    span:last-child {
    	cursor: pointer
    }
}

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

    }
}

.project {
    width: 100%;
    display: grid;
    grid-template-columns: var(--xxl) 1fr;
    gap: 2rem;
    border-radius: 2rem 5rem;
    box-shadow: 2px 3px 5px var(--shadow);
    img {
        width: 100%;
        filter: invert(1);
        mix-blend-mode: overlay;
    }
}

.project-description {
    width: 100%;
    text-align: start;
    h3 {
        color: var(--orange);
        font-size: var(--l);
    }
    *:not(h3) {
        font-size: var(--m);
    }
}

.button {
    text-decoration: unset;
	display: grid;
	justify-items: center;
    width: 100%;
    padding: .4rem 0;
    margin: .6rem 0 0 0;
    border: 2px solid var(--orange);
    border-radius: 5rem 2rem;
    --glow: 30;
    box-shadow: 0px 0px 5px hsl(from var(--yellow) h s var(--glow));
    &:hover {
        color: var(--orange);
        --glow: 60;
    }
}

#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: 50%;
    translate: -50% 0%;
	grid-auto-flow: column;
	gap: .6rem;
	background: var(--yellow);
	outline: 10px solid var(--orange);
	color: white;
	border-radius: 1rem;
	text-align: start;
	rotate: -10deg;
	animation: reopening-up-down 2s ease-in-out infinite alternate;
	img {
        width: 5rem
	}
}

@keyframes reopening-up-down {
    from {
        top: 10%;
        transform: rotateX(-20deg);
        filter: drop-shadow(2px -2px 4px var(--shadow));
	}
	to {
        top: 50%;
        transform: rotateY(30deg);
        filter: drop-shadow(-10px 4px 4px var(--shadow));
	}
}