@font-face {
    font-family: Simvoni;
    src: url('./assets/Simvoni.ttf');
}

@keyframes sliding-ttb {
    0% {
        transform: translateY(-100%);
        clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
    }

    100% {
        transform: translateY(0%);
        clip-path: polygon(0 0%, 100% 0%, 100% 100%, 0 100%);
    }
}

:root {
    --foreground: #22c55e;
    --background: #111827;
    --foreground-lighter: #86efac;
    --text: white;
    --font: Simvoni;
}

.theme-light {
    --foreground: #94a3b8;
    --foreground-lighter: #cbd5e1;
    --background: #e2e8f0;
    --text: black;
}

body {
    height: 100%;
    background: var(--background);
    font-family: Simvoni;
}

* {
    margin: 0;
    padding: 0;
    color: var(--text);
    font-family: Simvoni;
}

nav {
    background: var(--foreground);
    height: fit-content;
    color: var(--foreground);
    height: 48pt;
    font-size: 12pt;
    animation-name: sliding-ttb;
    animation-duration: 100ms;
    animation-fill-mode: forwards;
}

#nav-btn {
    display: none;
}

#branding {
    color: var(--text);
    font-size: 32pt;
    margin: 8pt;
}

nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

nav p, h1, h2, h3, span, a {
    margin: 2pt;
}

li, button{
    outline: none;
    border: none;
    padding: 6pt;
    border-radius: 6pt;
    margin: 8pt;
    width: 56pt;
    background: var(--foreground-lighter);
    text-align: center;
    list-style: none;
    color:black;
}

li a {
    text-decoration: none;
    color: var(--text);
    display: block;
    color:black;
}

button:hover, li:hover{
    cursor: pointer;
    background: var(--foreground);
}

/* Mobile */

@media screen and (max-width: 600px) {
    nav {
        display: none;
        position: fixed;
        height: 100vh;
        width: 25vh;
    }
    #nav-btn {
        position: fixed;
        bottom: 0;
        right: 0;
        display: inline;
        z-index: 2;
    }
    nav li, nav button {
        width: 100%;
        height: 26px;
    }
}

#content {
    margin: 18pt;
    font-size: 14pt;
}

#grid {
    display: grid;
}

.image-overlay {
    position: absolute;
    bottom: 8px;
    left: 16px;
}

/* .grid-item:hover {
    transform: scale(1.1);
} */