/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

     :root{
       --bc: #171991;
       --bd: 3px ridge #e8ebe7;
       --bdt: 10px ridge #e8ebe7;
       --button-col: #c4c4c4; 
       --btn-bd: 3px outset #e8ebe7;
       --btn-bd-h: 3px inset #e8ebe7;
       --btn-txt: black;
       --btn-txt-h: white;
       --txt-c: white;
      }    
      
     :root:has(#Normal:checked){
       background-image:url(https://roomba-nest-monster.neocities.org/minecraftblissfull.png);
       --bc: #171991;
       --bd: 3px ridge #e8ebe7;
       --bdt: 10px ridge #e8ebe7;
       --button-col: #c4c4c4; 
       --btn-bd: 3px outset #e8ebe7;
       --btn-bd-h: 3px inset #e8ebe7;
       --btn-txt: black;
       --btn-txt-h: white;   
       --txt-c: white;
     }
     
     :root:has(#Hacker:checked){
       background-image:url(https://roomba-nest-monster.neocities.org/minecraftendportalbackground.jpg);
       --bc: #1a111f;
       --bd: 3px solid #57cf30;
       --bdt: 10px solid #57cf30;
       --button-col: #1a111f; 
       --btn-bd: 3px outset #1a111f;
       --btn-bd-h: 3px inset #1a111f;
       --btn-txt: white;
       --btn-txt-h: white;
       --txt-c: #68ff36;
     }
     
     html { 
     background-image:url(https://roomba-nest-monster.neocities.org/minecraftblissfull.png);
     font-family:"Courier New";
     color: var(--txt-c);
     }
     
     @font-face{
       font-family:"Minecraftia";
       src: url("/Minecraftia.ttf") format("truetype");
     }
     
     #rakpet{
       background-color: var(--bc);
       border: var(--bd);
       margin: 10px;
       border-top: var(--bdt);
       width: 150px;
       height: 150px;
       
       position: absolute;
       top: 0px;
       right: 10px;
        }
    
     #topbox{
       background-color: var(--bc);
       border: var(--bd);
       margin: 10px;
       border-top: var(--bdt);
       margin-right: 180px;
       height: 150px;
       }
       
     #blinkiebox{
       margin: 10px;
       width: 500px;
       height: 125px;
       position: absolute;
       right: 200px;
       display: grid;
       grid-template-columns:auto auto auto;
       row-gap: 0;
       column-gap: 0;
     }
     
     #blinkiebox > div{
       height: 20px;
       display: flex;
       flex-direction: row;
     }
     
       
     #buttonbox{
       background-color:var(--button-col);
       height: 57px;
       display: flex;
       margin: 10px;
       }
       
     a.button{
       background-color:var(--button-col);
       border: var(--btn-bd);
       width: 75px;
       padding-top:15px;
       text-decoration:none;
       text-align:center;
       font-family:"Courier New";
       color:var(--btn-txt);       
       cursor: pointer;
       transition-duration: 0.1s;
       }
       
     a.button:hover{  
       background-color: black;
       color:var(--btn-txt-h);
       border: var(--btn-bd-h);
     }
    
    .theme-switcher{
      margin: 10px;
      position: absolute;
      right: 10px;
    }
    
    .theme-switcher > fieldset{
      border: 0;
    }
    
     #mainbox{ 
       background-color: var(--bc);
       border: var(--bd);
       margin: 10px;
       height: 1500px;
       width: 63%;
       margin-left: 10px;
       }
       
      .flexmain{
        height:850px;
        display: flex;
        flex-direction: row;
        }
        
      .flexmain > div{ 
        margin: 10px;
        width: 50%;
        display: flex;
        flex-direction: column;
        }        
        
      .flex1 > div{
        background-color:#151530; 
        margin-bottom:10px;
        border-radius:20px;
        word-wrap: break-word;
      }

      .flex2 > div{
        background-color:#151530; 
        margin-bottom: 10px;
        margin-top:10px;
        border-radius:20px;  
        word-wrap: break-word;
      }       
     .sidebox{
       margin: 10px;
       
       height: 1500px;
       width: 33%;
       margin-right: 20px;
       position: absolute;
       right: 0px;
       top: 240px;
       
       display: flex;
       flex-direction: column;
       }
      
      .sidebox > div{
       background-color:var(--bc);
       border: var(--bd);
       height: 80px;
       margin-bottom: 10px;
      }
      
      #lastsidebox{
        margin-bottom: -6px;
      }
      
      #minitopbox{
        text-align:center;
      }
      
      
      
      
/* MC Gallery */
      #godzilla{
         display: block;
         margin-left: auto;
         margin-right: auto;
         width: 50%;
      }
      
      #mctopbox{
        background-color: #c7af83;
        border: 3px dashed #3b251c;
        text-align: center;
        font-family:Minecraftia;
        padding: 10px;
        width: 50%;
        
        margin:0px auto;
      }
      
      #mcmain{
        background-color: #c7af83;
        border: 3px dashed #3b251c;
        margin: auto;
        margin-top:10px;
        padding: 10px;
        width: 50%;
        height: 300px;
        
        text-align: center;
        
        display: grid;
        grid-template-columns: auto auto ;
      }
      
      #backbutton{
       background-color: #c4c4c4;
       border: 3px outset #e8ebe7;
       width: 75px;
       
       position: absolute;
       left: 10px;
       top:10px;
       
       text-decoration:none;
       text-align:center;
       font-family:"Courier New";
       color: black;       
       cursor: pointer;
       transition-duration: 0.1s;
      }
      
      #backbutton:hover{
       background-color: black;
       color: white;
       border: 3px inset #e8ebe7;        
      }
      
   /* MINECRAFT SPLASH TEXT */  
      
      #status {
    color: #FFFF00;
    text-shadow:3px 3px #3F3F00;
    font-size: 1.5em;
    font-family: Minecraftia;
    padding: 40px;
    position: absolute;
    right: 200px;
    top: 100px;
    
    rotate: -25deg;
      }
      
    .pop {
      animation-name:pop;
      animation-duration:0.58s;
      animation-iteration-count:infinite;
    }
    @keyframes pop{
      0% {
          transform:scale(0.95)
      }
      50% {
          transform:scale(1)
      }
      100% {
          transform:scale(0.95)
      }
    }