body {
    background-image: var(--background-image);
    background-position: top;
    background-size: cover;
    background-repeat: no-repeat;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: end;
    height: 100vh;
    width: 100vw;
}

@keyframes pop-up-appear {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes showConsole {
    0% {
        
    }
    100% {
        bottom: 20vh;
    }
}

@keyframes headerSlideUp {
    0% {
        opacity: 0;
        height: 0;
        top: 0;
    }
    1% {
        top: 25vh;
        height: 25vh;
        opacity: 1;
    }
    100% {
        opacity: 1;
        height: 25vh;
        top: 0;
    }
}

@keyframes ontstopperPullChallenges{
    0% {
        right: 10vw;
        rotate: 0turn;
        opacity: 0;
    }
    5% {
        right: 10vw;
        rotate: 2turn;
        opacity: 1;
    }
    69% {
        right: 87vw;
        rotate: 2turn;
        opacity: 1;
    }
    86% {
        right: 30vw;
        rotate: 2turn;
        opacity: 1;
    }
    95% {
        right: 10vw;
        rotate: 2turn;
        opacity: 1;
    }
    100% {
        right: 10vw;
        rotate: 0turn;
        opacity: 0deg;
    }
}

@keyframes bananaAppear{
    0% {
        rotate: 0turn;
        opacity: 0;
    }
    20% {
        rotate: 2turn;
        opacity: 1;
    }
    80% {
        rotate: 2turn;
        opacity: 1;
    }
    100% {
        rotate: 0turn;
        opacity: 0;
    }
}

@keyframes bananaShootToCloseChallenges{
    0% {
        right: 0vw;
        opacity: 0;
    }
    20% {
        right: 0vw;
        opacity: 1;
    }
    79% {
        right: 30vw;
        opacity: 1;
    }
    80% {
        right: 30vw;
        opacity: 0;
    }
    100% {
        right: 30vw;
        opacity: 0;
    }
}

header {
    position: fixed;
    background-image: var(--header-logeerpartijtje-background);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    height: 0;
    top: 0;
    width: 100vw;
    z-index: 5;
    overflow: hidden;
    transition: 750ms linear;
}

header.visible {
    opacity: 1;
    animation: headerSlideUp 1250ms forwards 1s ease-in-out;
}

#banaancontainer, #ontstoppercontainer {
    position: absolute;
    z-index: 10;
    top: 7vh;
    right: 10vw;
    height: 10vh;
    width: auto;
    opacity: 0;
}

#ontstoppercontainer{
    width: 25vh;
}

#banaancontainer{
    width: 10vh;
}

#ontstoppercontainer > object {
    position: absolute;
    z-index: 10;
    height: inherit;
    width: auto;
}

#banaancontainer > object {
    position: absolute;
    transform: rotate(-90deg);
    z-index: 10;
    height: inherit;
    width: auto;
}
#banaancontainer > object:nth-child(1) {
    position: absolute;
}


main {
    display: flex;
    flex-direction: column;
    height: 69vh;
    overflow: hidden;
    box-shadow: black 0 0 1vw;
    transition: 750ms linear;
    z-index: 10;
}

main#home, main#games, main#settings {
    width: 69vw;
    border: var(--purple-color) 1px solid;
    border-bottom: none;
    border-top: none;
    border-radius: 1vw 1vw 0 0;
}

main#settings {
    height: calc(2vh + 1em);
}

main#logeerpartijtje {
    width: 100vw;
    box-shadow: none;
}

main#games{
    height: 40vh;
}

nav {
    background-color: var(--purple-color);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

div.objectcontainer{
    position: absolute;
    display: flex;
    justify-content: center;
    overflow: hidden;
    bottom: 0;
    height: 0;
    right: 0;
    width: 6%;
    transition: 500ms;
}

div.objectcontainer.visible {
    height: 125%;
}   

nav object {
    height: inherit;
    width: auto;
    transform: translate(-10%, 20%) rotate(15deg);
}

nav > ul {
    display: flex;
    justify-content: center;
    width: 100%;
}

nav > ul > li {
    position: relative;
    padding: 1vh 0.75rem;
    height: fit-content;
    cursor: pointer;
    transition: 500ms;
}

nav > ul > li:hover {
    background-color: var(--hover-pink-color);
    transition: 500ms;
}

nav > ul > li > p {
    text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}

nav > ul > li#currentpage{
    background-color: var(--pink-color);
    cursor: default;
}

content {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 67vh;
    background-color: var(--transparent-black-color);
    transition: 750ms linear;
}

main#logeerpartijtje > content{
    background-color: transparent;
}

footer{
    background-color: var(--blue-color);
    color: var(--text-color);
    padding: 2vh;
    text-align: center;
    width: 100vw;
    z-index: 10;
}

footer > p {
    font-weight: var(--semi-bold);
}

#challenge-container {
    position: absolute;
    top: 3vh;
    left: 0;
    display: flex;
    flex-direction: row-reverse;
    transition: 500ms ease-out;
}

#challenges {
    border: var(--purple-color) 1px solid;
    border-left: none;
    border-right: none;
    transition: 500ms;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 19vh;
    padding: 2vh 3vw;
    gap: 3vw;
    overflow: hidden;
    background-color: var(--transparent-black-color);
}

#challenges > a {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 1vh;
    transition: 500ms;
}

#challenges > a > img {
    width: 12vh;
    height: 12vh;
    box-shadow: black 0 0 1vw;
    border-radius: 1.5vh;
    overflow: hidden;
    transition: 500ms;
}

#challenges > a > p {
    font-size: 1.25vh;
    text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
    font-weight: var(--semi-bold);
}

#challenges > a:hover{
    transform: scale(1.05);
    transition: 500ms;
}

#challenges > a:hover > img{
    box-shadow: grey 0 0 1vw;
}

#challenges > a:hover > p{
    text-shadow: 0 4px 4px rgba(225, 225, 225, 0.25);
}

#challenge-button {
    padding: 0;
    border-radius: 1vw 1vw 0 0;
    transform: translate(-38%, 150%) rotate(90deg);
    width: 19vh;
    font-size: 1.65vh;
    height: 4.75vh;
}

#challenge-button:hover + #challenges {
    border: var(--hover-blue-color) 1px solid;
    border-left: none;
    border-right: none;
    transition: 500ms;
}

#challenge-button.clicked + #challenges {
    border: var(--pink-color) 1px solid;
    border-left: none;
    border-right: none;
    transition: 500ms;
}

#challenge-button.clicked {
    background-color: var(--pink-color);
}

#challenge-button.clicked:hover {
    background-color: var(--hover-blue-color);
}

#challenge-button.clicked:hover + #challenges {
    border: var(--hover-blue-color) 1px solid;
    border-left: none;
    border-right: none;
    transition: 500ms;
}

section#console{
    position: absolute;
    bottom: -50vh;
    left: 50%;
    transform: translate(-50%, 0);
    width: 50vw;
    height: 50vh;
    background-color: var(--black-text-color);
    border: var(--hover-blue-color) 2px solid;
    border-radius: 1vh;
    box-shadow: black 0 0 1vw;
    transition: 1s;
    z-index: 1;
}

a#horrorspel {
    cursor: pointer
}

div:has(> #horrorspel-popup){
    animation: pop-up-appear 1s forwards;
    position: absolute;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
}

div > div#horrorspel-popup {
    background-color: var(--text-color);
    border-radius: 1vw;
    gap: 1vw;
    align-items: center;
    justify-content: center;
    display: flex;
    flex-direction: column;
    padding: 1vw;
    width: 50vw;
    height: 50vh;
}

div > div#horrorspel-popup > h1 {
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    color: var(--black-text-color);
}

div > div#horrorspel-popup > p {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--black-text-color);
}

div > div#horrorspel-popup > #ogen-container {
    display: flex;
    gap: 1vw;
    justify-content: center;
    align-items: center;
    margin: 4vh;
}

div > div#horrorspel-popup > #ogen-container > #ogen1 {
    width: 10vh;
    height: 10vh;
    font-size: 5vh;
    color: white;
    background-color: blue;
    text-align: center;

}

div > div#horrorspel-popup > #ogen-container > #ogen2 {
    width: 10vh;
    height: 10vh;
    font-size: 5vh;
    background-color: white;
    color: var(--black-text-color);
    text-align: center;
}

div > div#horrorspel-popup > #ogen-container > #ogen1:focus, div > div#horrorspel-popup > #ogen-container > #ogen2:focus {
    outline: none;
}

div > div#horrorspel-popup > button {
    font-size: 3vh;
    width: 50%;
}

div > div#horrorspel-popup > a {
    font-size: 2vh;
    transition: 300ms;
    cursor: pointer;
    color: blue;
}

div > div#horrorspel-popup > a:hover {
    color: var(--hover-blue-color);
}

@media only screen and (max-width: 1040px) {
    body::before {
        content: 'Sorry, you need to be on a desktop to use this page.';
        position: absolute;
        display: flex;
        background-color: white;
        color: black;
        width: 100vw;
        height: 100vh;
        text-align: center;
        z-index: 1000;
    }
}