:root {
--backgroundSize: 120px;
-ms-overflow-style: none;
scrollbar-width: none;
}

body {
margin: 0px;
background-image: url(bg.jpg);
background-size: var(--backgroundSize);
display: grid;
animation: bgcolourchange 10s infinite, movingbg 4s linear infinite;
}

@keyframes bgcolourchange {
0% {background-color: #556582;}
50% {background-color: #6c5582;}
100% {background-color: #556582;}
}


@keyframes movingbg {
from {background-position: 0 0;}
to {background-position: var(--backgroundSize) var(--backgroundSize);}
}

#hidden{display: none;}
#hidden2{display: none;}
#hidden3{display: none;}
#hidden4{display: none;}
#hidden5{display: none;}
#hidden6{display: none;}
#hidden7{display: none;}
#hidden8{display: none;}
#hidden9{display: none;}
#hidden10{display: none;}
#hidden11{display: none;}
#warning{display: block;}

.title1 {
margin: 0;
font-size: 100px;
font-family: 'Comic Sans MS', 'Chalkboard SE', 'Comic Neue', sans-serif;
animation: colourchange 0.75s infinite;
}

.title2 {
display: flex;
justify-content: center;
}

@keyframes colourchange {
0% {color: rgb(255, 0, 0);}
25% {color: rgb(255, 251, 0);}
50% {color: rgb(0, 255, 76);}
75% {color: rgb(0, 110, 255);}
100% {color: rgb(255, 0, 0);}
}

@keyframes fadeout {
0% {opacity: 1;}
100% {opacity: 0; visibility: hidden;}
}

.fadeout {
animation: fadeout 3s forwards;
pointer-events: none;
}

.iframe {
display: block; 
height: 100vh;
width: 100vw;
border: none; 
}

.burpbutton {
display: flex;
text-align: center;
animation: colourchange 0.75s infinite;
font-size: 25px;
font-family: 'Comic Sans MS', 'Chalkboard SE', 'Comic Neue', sans-serif;
position: absolute;
left: 15vw;
top: 4vw;
}

.jokeday {
display: flex;
text-align: center;
animation: colourchange 0.75s infinite;
font-size: 25px;
font-family: 'Comic Sans MS', 'Chalkboard SE', 'Comic Neue', sans-serif;
position: absolute;
right: 15vw;
top: 4vw;
}

.burpbuttonimg {
display: flex;
position: absolute;
left: 12vw;
top: 12vw;
}

.jokedayimg {
display: flex;
position: absolute;
right: 8vw;
top: 12vw;
}

.musictoggle {
display: flex;
position: absolute;
left: 0; 
right: 0; 
top: 19vw;
margin-inline: auto; 
width: fit-content;
}

.penfold {
display: flex;
text-align: center;
animation: colourchange 0.75s infinite;
font-size: 25px;
font-family: 'Comic Sans MS', 'Chalkboard SE', 'Comic Neue', sans-serif;
position: absolute;
left: 16vw;
top: 25vw;
}

.virus {
display: flex;
text-align: center;
animation: colourchange 0.75s infinite;
font-size: 25px;
font-family: 'Comic Sans MS', 'Chalkboard SE', 'Comic Neue', sans-serif;
position: absolute;
right: 14vw;
top: 25vw;
}

.penfoldimg {
display: flex;
position: absolute;
left: 15vw;
top: 29vw;
}

.virusimg {
display: flex;
position: absolute;
left: 66.5vw;
top: 36vw;
}

.socials {
display: flex;
justify-content: center;
font-size: 80px;
font-family: 'Comic Sans MS', 'Chalkboard SE', 'Comic Neue', sans-serif;
margin-top: 50vw;
}