style.css

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --blue: #586598;
    --red: #DE4846;
    --gold: #e4bd34;
    --neptune: #419BB1;
}

@font-face {
    font-family: runyTunes;
    src: url('fonts/RunyTunesRevisitedNF.otf');
}

@font-face {
    font-family: adineKirnberg;
    src: url('fonts/AdineKirnberg-Script.ttf');
}

body {
    overflow-x: hidden;
    background-color: var(--neptune);
}

/* Landing screen styling */

header {
    position: fixed;
    overflow: hidden;
    width: 100vw;
    background-color: var(--gold);
    z-index: 10000;
}

header h2 {
    text-align: center;
    width: 100vw;
    font-size: 2rem;
    font-family: 'adineKirnberg';
}

header h1 {
    width: 100vw;
    text-align: center;
    font-size: 10rem;
    font-family: 'runyTunes';
}

/* Styling and animating sun */
.sun {
    position: relative;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    z-index: -1;
}

.inner-sun {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 8rem;
    width: 8rem;
    border-radius: 50%;
    background: radial-gradient(circle at 65% 15%, white 1px, var(--red) 3%, orange 60%, var(--red) 100%);
}

.outer-sun {
    position: absolute;
    width: 120vw;
    height: 120vw;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: radial-gradient(closest-side, var(--red) 0%, transparent 50%, var(--blue) 100%), conic-gradient(var(--red) 0deg, var(--blue) 10deg, 25deg, var(--red) 35deg 55deg, var(--blue) 65deg 85deg, var(--red) 95deg 115deg, var(--blue) 125deg 145deg, var(--red) 155deg 175deg, var(--blue) 185deg 205deg, var(--red) 215deg 235deg, var(--blue) 245deg, 265deg, var(--red) 275deg 295deg, var(--blue) 305deg 325deg, var(--red) 335deg);
    z-index: -100;
    animation: rotate 40s linear infinite;
}

.outer-sun::before {
    content: "";
    position: absolute;
    width: 120vw;
    height: 120vw;
    background: radial-gradient(closest-side, transparent 0%, transparent 50%, var(--blue) 100%), conic-gradient(transparent 0deg, var(--red) 10deg 25deg, transparent 35deg 55deg, var(--red) 65deg 85deg, transparent 95deg 115deg, var(--red) 125deg 145deg, transparent 155deg 175deg, var(--red) 185deg 205deg, transparent 215deg 235deg, var(--red) 245deg 265deg, transparent 247deg 295deg, var(--red) 305deg 325deg, transparent 335deg);
    animation: rotate 40s linear infinite;
    mix-blend-mode: screen;
}

.outer-sun::after {
    content: "";
    position: absolute;
    width: 120vw;
    height: 120vw;
    background: radial-gradient(closest-side, transparent 0%, transparent 50%, var(--blue) 100%), conic-gradient(transparent 0deg, orange 10deg 25deg, transparent 35deg 55deg, orange 65deg 85deg, transparent 95deg 115deg, orange 125deg 145deg, transparent 155deg 175deg, orange 185deg 205deg, transparent 215deg 235deg, orange 245deg 265deg, transparent 275deg 295deg, orange 305deg 325deg, transparent 335deg);
    animation: rotate 40s linear infinite;
    mix-blend-mode: screen;
}

@keyframes rotate {
    to {
        transform: rotate(360deg);
    }
}

/* Styling and animating hanging man */

.hanging-man {
    position: fixed;
    left: 50%;
    transform: translateY(-130%);
    z-index: -1;
    animation: dropDown 5s ease-in-out;
}

@keyframes dropDown {
    0% {
        transform: translateY(-130%);
    }
    10% {
        transform: translateY(-50%);
    }
    20% {
        transform: translateY(-60%);
    }
    30% {
        transform: translateY(-50%);
    }
    40% {
        transform: translateY(-57%);
    }
    50% {
        transform: translateY(-50%);
    }
    60% {
        transform: translateY(-55%);
    }
    70% {
        transform: translateY(-50%);
    }
    80% {
        transform: translateY(-53%);
    }
    90% {
        transform: translateY(-50%);
    }
    100% {
        transform: translateY(-130%);
    }
}

main {
    width: 100vw;
    height: 100vh;
    z-index: 1000;
    animation: mainUp 2s ease 5s 1 normal forwards;
}

.main-sun {
    position: fixed;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

@keyframes mainUp {
    to {
        transform: translateY(-60%);
    }
}

::selection {
    color: var(--red);
    background-color: var(--blue);
}

/* width */

::-webkit-scrollbar {
    display: none;
    width: 1.5rem;
}

/* Track */

::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px #e4bd34;
    background: #D3AD30;
}

/* Handle */

::-webkit-scrollbar-thumb {
    background: #e4bd34;
}

/* Handle on hover */

::-webkit-scrollbar-thumb:hover {
    background: #907720;
}

.noshes-content, .boards-content, .platters-content, .eggs-content, .soup-content, .salads-content, .sweet-content {
    display: none;
}

#noshes-form:valid~.noshes-content, #boards-form:valid~.boards-content, #platters-form:valid~.platters-content, #eggs-form:valid~.eggs-content, #soup-form:valid~.soup-content, #salads-form:valid~.salads-content, #sweet-form:valid~.sweet-content {
    display: block;
}

form {
    margin: 1rem auto;
    text-align: center;
    width: 30%;
}

form label {
    background-color: var(--red);
    display: block;
    color: black;
    font-family: 'runyTunes';
    font-size: 2rem;
}

form label:hover {
    cursor: pointer;
    background-color: var(--gold);
    color: var(--red);
}

#noshes-form:valid, #boards-form:valid, #platters-form:valid, #eggs-form:valid, #soup-form:valid, #salads-form:valid, #sweet-form:valid {
    border: 3px solid var(--neptune);
}

form input {
    display: none;
}

h4 {
    font-family: 'runyTunes';
    font-size: 2rem;
    margin: 6rem 0 3rem;
}

section.dishes {
    width: 50%;
    margin: auto;
    text-align: center;
}

section.dishes article {
    border: 0.5rem groove var(--gold);
    padding: 1rem;
    margin-bottom: 1rem;
}

section.dishes:hover article {
    filter: blur(1px);
    opacity: 0.8;
    box-shadow: none;
}

section.dishes article:hover {
    transform: scale(1);
    filter: blur(0px);
    opacity: 1;
    box-shadow:0 8px 20px 0px rgba(0,0,0,0.125);
    cursor: pointer;
}

main h3 {
    font-family: 'runyTunes';
}

@media print {
    body {
        border: 0.5rem groove var(--gold);
    }

    header {
        position: static;
        width: 80%;
    }

    header h1 {
        font-size: 3rem;
    }

    header h2 {
        font-size: 2rem;
    }

    header img, form, .sun {
        display: none;
    }

    section.dishes article {
        border: none;
    }

    main {
        width: 100%;
        height: 100%;
    }

    .noshes-content, .boards-content, .platters-content, .eggs-content, .soup-content, .salads-content, .sweet-content {
        display: block;
    }

}