:root{
    --bodyColor:white;
    --topHeadingColor:#e74c3c;
    --topHeadingTextColor:white;
    --topHeadingBorderColor:var(--topHeadingColor);
    --topButtonColor:var(--topHeadingColor);
    --topButtonHoverColor:#cb4335;
    --topButtonBorderColor:#f5b7b1;
    --bottomButtonColor:#212529;
    --bottomButtonHoverColor:#484848;
    --bottomButtonBorderColor:#212529;
    --titleHeadingColor:var(--topHeadingColor);
    --titleHeadingTextColor:white;
    --titleHeadingBorderColor:rgba(0,0,0,0);
    --settingColor:rgb(255,240,240);
    --settingTextColor:black;
    --settingSwitchColor:#ec7063;
    --smileyColor:var(--bodyColor);
    --smileyHoverColor:red;

    --animationRainbowPlayState: paused;

    --aniTopBtnPink:var(--topButtonBorderColor);
    --aniTopBtnRed:var(--topButtonBorderColor);
    --aniTopBtnOrange:var(--topButtonBorderColor);
    --aniTopBtnYellow:var(--topButtonBorderColor);
    --aniTopBtnGreen:var(--topButtonBorderColor);
    --aniTopBtnBlue:var(--topButtonBorderColor);
    --aniTopBtnPurple:var(--topButtonBorderColor);
    
    --aniBottomBtnPink:var(--bottomButtonBorderColor);
    --aniBottomBtnRed:var(--bottomButtonBorderColor);
    --aniBottomBtnOrange:var(--bottomButtonBorderColor);
    --aniBottomBtnYellow:var(--bottomButtonBorderColor);
    --aniBottomBtnGreen:var(--bottomButtonBorderColor);
    --aniBottomBtnBlue:var(--bottomButtonBorderColor);
    --aniBottomBtnPurple:var(--bottomButtonBorderColor);
    
    --aniHeadingPink:var(--titleHeadingBorderColor);
    --aniHeadingRed:var(--titleHeadingBorderColor);
    --aniHeadingOrange:var(--titleHeadingBorderColor);
    --aniHeadingYellow:var(--titleHeadingBorderColor);
    --aniHeadingGreen:var(--titleHeadingBorderColor);
    --aniHeadingBlue:var(--titleHeadingBorderColor);
    --aniHeadingPurple:var(--titleHeadingBorderColor);
    
    --dinoGameColor:#f7f7f7;
    --monkeyMartColor:#00ba60;
    
}

.darkmode{
    --bodyColor:#212529;
    --topHeadingColor:#a93226;
    --topHeadingTextColor:white;
    --topHeadingBorderColor:#a93226;
    --topButtonColor:var(--topHeadingColor);
    --topButtonHoverColor:#cb4335;
    --topButtonBorderColor:#d98880;
    --bottomButtonColor:#212529;
    --bottomButtonHoverColor:#1b1e21;
    --bottomButtonBorderColor:var(--topButtonBorderColor);
    --titleHeadingColor:var(--topHeadingColor);
    --titleHeadingTextColor:white;
    --titleHeadingBorderColor:rgba(0,0,0,0);
    --settingColor:#641e16;
    --settingTextColor:white;
    --settingSwitchColor:#c0392b;
    --smileyColor:var(--bodyColor);
    --smileyHoverColor:red;

    --animationRainbowPlayState: paused;
    
    --aniTopBtnPink:var(--topButtonBorderColor);
    --aniTopBtnRed:var(--topButtonBorderColor);
    --aniTopBtnOrange:var(--topButtonBorderColor);
    --aniTopBtnYellow:var(--topButtonBorderColor);
    --aniTopBtnGreen:var(--topButtonBorderColor);
    --aniTopBtnBlue:var(--topButtonBorderColor);
    --aniTopBtnPurple:var(--topButtonBorderColor);
    
    --aniBottomBtnPink:var(--bottomButtonBorderColor);
    --aniBottomBtnRed:var(--bottomButtonBorderColor);
    --aniBottomBtnOrange:var(--bottomButtonBorderColor);
    --aniBottomBtnYellow:var(--bottomButtonBorderColor);
    --aniBottomBtnGreen:var(--bottomButtonBorderColor);
    --aniBottomBtnBlue:var(--bottomButtonBorderColor);
    --aniBottomBtnPurple:var(--bottomButtonBorderColor);
    
    --aniHeadingPink:var(--titleHeadingBorderColor);
    --aniHeadingRed:var(--titleHeadingBorderColor);
    --aniHeadingOrange:var(--titleHeadingBorderColor);
    --aniHeadingYellow:var(--titleHeadingBorderColor);
    --aniHeadingGreen:var(--titleHeadingBorderColor);
    --aniHeadingBlue:var(--titleHeadingBorderColor);
    --aniHeadingPurple:var(--titleHeadingBorderColor);
    
    --dinoGameColor:#202020;
    --monkeyMartColor:#008b48;
}

.darkmode .dino-game{
    filter:invert(.9);
}

.darkmode .monkey-mart{
    filter: brightness(75%);
}

.rainbow{
    --animationRainbowPlayState: running;
    
    --aniTopBtnPink:pink;
    --aniTopBtnRed:red;
    --aniTopBtnOrange:orange;
    --aniTopBtnYellow:yellow;
    --aniTopBtnGreen:green;
    --aniTopBtnBlue:blue;
    --aniTopBtnPurple:purple;
    
    --aniBottomBtnPink:pink;
    --aniBottomBtnRed:red;
    --aniBottomBtnOrange:orange;
    --aniBottomBtnYellow:yellow;
    --aniBottomBtnGreen:green;
    --aniBottomBtnBlue:blue;
    --aniBottomBtnPurple:purple;
    
    --aniHeadingPink:pink;
    --aniHeadingRed:red;
    --aniHeadingOrange:orange;
    --aniHeadingYellow:yellow;
    --aniHeadingGreen:green;
    --aniHeadingBlue:blue;
    --aniHeadingPurple:purple;
}

.setting-header{
    color:var(--topHeadingTextColor);
    background:var(--topHeadingColor);
    border-bottom-color:var(--topHeadingBorderColor);
    border-bottom-width:2px;
    border-bottom-style:solid;
}

.setting-body{
    background:var(--settingColor);
    color:var(--settingTextColor);
}

.setting-item-head{
    font-size:18px;
    margin-bottom:2px;
}

.form-switch{
    margin-left:3px;
    margin-right:3px;
}

.form-switch .form-check-input {
    background-color:var(--settingSwitchColor);
    border:none;
    outline:0;
    box-shadow:0 0 0 0 rgba(0, 0, 0, 0);
    background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba(255,255,255,1.0)'/></svg>");
}

.form-switch .form-check-input:focus {
    background-color:var(--settingSwitchColor);
    border:none;
    outline:0;
    box-shadow:0 0 0 0 rgba(0, 0, 0, 0);
    background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba(255,255,255,1.0)'/></svg>");
}

.form-switch .form-check-input:checked {
    background-color:var(--settingSwitchColor);
    border:none;
    background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba(255,255,255,1.0)'/></svg>");
}

iframe{
    height:100vh;
}

iframe.useful-websites{
    width:100vw;
    height:92vh;
}

iframe.game-websites{
    height:600px;
    width:1000px;
    margin-top:15px;
    z-index:-1;
}

iframe.desmos{
    height:552px;
    border-bottom:5px;
    border-color:#2b69ca;
    border-style:solid;
}

iframe.smallMoveUp{
    margin-top:-12px;
}

iframe.not-fixed{
    position:relative;
}

iframe.moveUp{
    margin-top:-80px;
}

iframe.dino-game{
    height:500px;
    border-radius:10px;
}

iframe.video{
    height:90vh;
    position:relative;
    margin-top:1.3vh;
    margin-bottom:1.3vh;
}

iframe.geometry-dash{
    transform:scale(0.95, 0.95); 
    margin-top:2vh;
    margin:auto;
    z-index:1;
}

iframe.monkey-mart{
    height:100vh;
    transform:scale(0.85, 0.85); 
    margin:auto;
    margin-top:-35px;
    z-index:1;
}

iframe.slope{
    height:800px;
    margin-top:-197px;
    margin-left:230px;
    transform: scale(0.98, 0.98); 
    z-index:-1;
}

body{
    background:var(--bodyColor);
    width: 100vw;
    overflow-y:hidden;
}

body.dino-game{
    background-color:var(--dinoGameColor);
}

body.kahoot{
    background-color:#381272;
}

body.desmos{
    background-image:linear-gradient(to left, #1a4079, #2b69ca);
}

body.monkey-mart{
    background-color:var(--monkeyMartColor);
}

body.slope{
    background-color:#190705;
}

.top-heading{
    background:var(--topHeadingColor);
    border-bottom-color:var(--topHeadingBorderColor);
    border-bottom-width:2px;
    border-bottom-style:solid;
    margin:auto;
    z-index:1;
}

nav{
    z-index:2;
}

.heading{
    width:50%;
    background:var(--titleHeadingColor);
    color:var(--titleHeadingTextColor);
    margin:auto;
    margin-top:19px;
    margin-bottom:19px;
    border-radius:10px;
    border-style:solid;
    border-width:3px;
    animation-name:titleHeadingRainbowAni;
    animation-duration:15s;
    animation-iteration-count:infinite;
    animation-play-state:var(--animationRainbowPlayState);
    padding-top:8px;
    padding-bottom:1px;
    text-align:center;
}

a{
    margin-left:15px;
    margin-bottom:13px;
}

.img-button{
    margin-left:0px;
    margin-bottom:0px;
    height:40px;
    background-color:rgba(0,0,0,0);
    color:white;
}

.img-button:hover{
    color:white;
}

.top-button{
    color:var(--topHeadingTextColor);
    background-color:var(--topButtonColor);
    border-width:2px;
    animation-name:topButtonRainbowAni;
    animation-duration:15s;
    animation-iteration-count:infinite;
    animation-play-state:var(--animationRainbowPlayState);
    margin-left:0px;
    margin-bottom:7px;
    margin-top:7px;
}

.top-button:hover{
    color:var(--topHeadingTextColor);
    background-color:var(--topButtonHoverColor);
    border-color:var(--topButtonBorderColor);
    border-width:2px;
}

.top-button:active{
    color:var(--topHeadingTextColor);
    background-color:var(--topButtonHoverColor);
    border-color:var(--topButtonBorderColor);
    border-width:2px;
}

.bottom-button{
    color:white;
    height:43px;
    padding-top:7px;
    border-width:2px;
    animation-name:bottomButtonRainbowAni;
    animation-duration:15s;
    animation-iteration-count:infinite;
    animation-play-state:var(--animationRainbowPlayState);
}

.bottom-button:hover{
    color:white;
    background-color:var(--bottomButtonHoverColor);
    border-color:var(--bottomButtonBorderColor);
    border-width:2px;
}

.bottom-button:active{
    background-color:var(--bottomButtonHoverColor);
    border-color:var(--bottomButtonBorderColor);
    border-width:2px;
}

.dropdown{
    color:white;
    background-color:var(--bottomButtonColor);
    border-color:var(--bottomButtonBorderColor);
    border-width:2px;
    margin-left:0px;
    margin-bottom:0px;
    margin-top:0px;
}

.dropdown:hover{
    color:white;
    background-color:var(--bottomButtonHoverColor);
}

.dropdown-menu:hover{
    background-color:var(--bottomButtonColor);
}

.btn.show{
    border-color:var(--bottomButtonBorderColor);
    border-width:2px;
}

a.hidden-smiley-btn{
  color:var(--smileyColor);
}

a.hidden-smiley-btn:hover{
    color:var(--smileyHoverColor);
}

div.fixed-bottom {
  position: fixed;
  bottom: 12;
  right:0;
  background-color:var(--bodyColor);
  text-align:right;
  z-index:1;
  padding-bottom:4px;
}

div.blackout{
    background-color:inherit;
    float:right;
    height:100vh;
    width:230px;
}

img{
    height:40px;
    border-bottom-left-radius:3px;
    border-top-left-radius:3px;
}

.img-group{
    background-color:var(--bottomButtonColor);
    border-style:solid;
    border-width:2px;
    border-radius:4px;
    animation-name:bottomButtonRainbowAni;
    animation-duration:15s;
    animation-iteration-count:infinite;
    animation-play-state:var(--animationRainbowPlayState);
    margin-left:15px;
    margin-bottom:13px;
}

.img-group:hover{
    background-color:var(--bottomButtonHoverColor);
}

#blocked-img{
    display:none;
}

.sporcle{
    width:100vw;
    height:66.5921788vw;
    transform: scale(0.5, 0.5);
    margin-top:-160px;
    margin-bottom:-250px;
    border-width:15px;
    border-color:black;
    border-style:solid;
    border-radius:50px;
    font-size:80px;
}

#blocker-div{
    background-color:grey;
    text-align:center;
    padding:4em;
}

#blocker-div:hover + #blocked-img,#blocked-img:hover{
    display:inline;
}

#blocker-div:hover,#blocker-div:has(+ #blocked-img:hover){
    display:none;
}

@keyframes topButtonRainbowAni{
    0%{ border-color:var(--aniTopBtnPink);}
    14%{ border-color:var(--aniTopBtnRed);}
    28%{ border-color:var(--aniTopBtnOrange);}
    42%{ border-color:var(--aniTopBtnYellow);}
    57%{ border-color:var(--aniTopBtnGreen);}
    72%{ border-color:var(--aniTopBtnBlue);}
    86%{ border-color:var(--aniTopBtnPurple);}
    100%{ border-color:var(--aniTopBtnPink);}
}

@keyframes bottomButtonRainbowAni{
    0%{ border-color:var(--aniBottomBtnPink);}
    14%{ border-color:var(--aniBottomBtnRed);}
    28%{ border-color:var(--aniBottomBtnOrange);}
    42%{ border-color:var(--aniBottomBtnYellow);}
    57%{ border-color:var(--aniBottomBtnGreen);}
    72%{ border-color:var(--aniBottomBtnBlue);}
    86%{ border-color:var(--aniBottomBtnPurple);}
    100%{ border-color:var(--aniBottomBtnPink);}
}

@keyframes titleHeadingRainbowAni{
    0%{ border-color:var(--aniHeadingPink);}
    14%{ border-color:var(--aniHeadingRed);}
    28%{ border-color:var(--aniHeadingOrange);}
    42%{ border-color:var(--aniHeadingYellow);}
    57%{ border-color:var(--aniHeadingGreen);}
    72%{ border-color:var(--aniHeadingBlue);}
    86%{ border-color:var(--aniHeadingPurple);}
    100%{ border-color:var(--aniHeadingPink);}
}