html, body {
    display: flex;
    flex-direction: column;
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 12pt;
    height: 100%;
    padding: 0;
    margin: 0;
    overflow: hidden;
}
main {
    flex-grow: 1;
    background-color: black;
    display: flex;
    align-items: center;
    flex-direction: column;
    animation: colors 3s ease-in-out infinite;
    background-image: url("clouds.gif");
    background-size:cover
}
.img-wrapper {
    flex-grow: 1;
    height: 25%;
    width: 25%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.img-wrapper > .image {
    background-color: white;
    box-shadow: 0px 0px 50px 50px white;
    animation: didit 2s ease-in-out infinite;
    display: flex;
}
.image > img {
    height: 100%;
    width: 100%;
}
#cover {
    background-color: black;
    z-index: 99;
    position: absolute;
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 30px;

}
#cover > h1 {
    font-size: 2em;
    color: white;
    animation: didit 7s ease-in-out infinite;

}
#cover > div {
    display: flex;
    align-items: center;
    gap: 20px;

}
#no-button,
#yes-button {
    color: white;
    background-color: grey;
    cursor: pointer;
    transition: 0.6s ease-in-out;
    border: none;
    padding: 5px;
    border-radius: 2px;
}
#no-button:hover {
  background-color: red;
}
#yes-button {
    padding: 10px;
    font-size: 2em;
}
#yes-button:hover {
    background-color: green;
}
#audio {
    position: absolute;
    pointer-events: none;
}

#SECRET {
    display: none;
}
.fade {
    animation: fade 200ms linear;
}
@keyframes fade {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}
@keyframes didit {
    0%{
        transform:scale(1);
    }
    25%{
        transform: scale(1.5) rotate(10deg);
    }
    50%{
        transform: scale(1);
    }
    75%{
        transform: scale(1.5) rotate(-10deg);
    }
    100%{
        transform: scale(1);
    }
}
@keyframes colors {
    0%{
        background-color: black;
    }

    25% {
        background-color: rgb(252, 204, 4);
    }

    50% {
        background-color: black;
    }

    75%{
        background-color: rgb(23, 133, 27);
    }

    100% {
        background-color: black;
    }
}