@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: #000;
	--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
}

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

#welcome {
	color: var(--orange);
    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;

    }
}

.project {
    width: 100%;
    display: grid;
    grid-template-columns: var(--xxl) 1fr;
    gap: 2rem;
    border-radius: 2rem 5rem;
    box-shadow: 2px 4px 8px 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 {
        width: 100%;
        &:hover {
            color: var(--black);
            background: var(--orange);
        }
    }
}

#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 3s ease-in-out infinite alternate;
	img {
        width: 5rem
	}
}

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