/* Custom styles for the funky aesthetic */
:root {
    --color-red: #E53935;
    --color-blue: #1E88E5;
    --color-yellow: #FFD600;
    --color-dark: #121212;
    --color-light: #f3f4f6;
}

/* Applying the funky font to headings */
.font-funky {
    font-family: 'Luckiest Guy', cursive;
}
body, .font-body {
    font-family: monospace, 'Inter', sans-serif;
}

/* Full height for canvas container */
canvas {
    display: block;
    width: 100%;
    height: 100%;
}
#hero-canvas-container {
    position: relative;
    height: 78vh;
    /* Adjust height for mobile */
    min-height: 480px;
    height: calc(100dvh - 70px);
    width: 100%;
    z-index: 10;
}
@media (min-width: 768px) {
    #hero-canvas-container {
        height: 80vh;
        height: calc(100vh - 70px);
        /* Taller on desktop */
    }
}
@media (max-width: 767px) {
    section#hero {
        padding-top: 0;
    }
    h2 + p.text-3xl {
        font-size: 1.175rem;
        line-height: 1.75rem;
    }
    .grid.grid-cols-2.gap-8 {
        gap: 1rem;
    }
}

.shadow-glow-red {
    box-shadow: 0 0 15px var(--color-red);
}
.shadow-glow-blue {
    box-shadow: 0 0 15px var(--color-blue);
}
.border-glow-yellow {
    border: 3px solid var(--color-yellow);
}

/* Utility for the project chips */
.chip-react {
    background-color: #61DAFB;
    color: #20232A;
}
.chip-node {
    background-color: #6CC24A;
    color: #FFF;
}
.chip-3d {
    background-color: #000000;
    color: #FFF;
    border: 1px solid #FFD600;
}
.chip-wp {
    background-color: #0073AA;
    color: #FFF;
}
.chip-animation {
    background-color: #38A169;
    color: #FFF;
}
.chip-tailwind {
    background-color: #06B6D4;
    color: #FFF;
}
.chip-graphql {
    background-color: #E10098;
    color: #FFF;
}

.project-figure img, .project-figure video {
    content-visibility: auto;
}
.project-figure video {
    top: 0;
    left: 0;
    height: 100%;
}
.project-box:hover video {
    display: block !important;
}
h1.logo {
    position: relative;
    top: 5px;
}