/*********** Fonts ***************/

@font-face {
   
    font-family: montserratreg; src: url(https://feralasar.neocities.org/Fonts/MontserratRegular-RpK6l.otf);
    
    }
 
  @font-face {
    
    font-family: sandandreas; src: url(https://feralasar.neocities.org/Fonts/SanAndreas-MVxPw.otf);
    
    }
 
  @font-face {
    
    font-family: highonfire; src: url(https://feralasar.neocities.org/Fonts/Highonfire-3XM3.otf);
    
    }
    
  @font-face {
      
      font-family: darkcastle; src: url(https://feralasar.neocities.org/Fonts/Darkcastle_PERSONAL_USE_ONLY.otf);
      
    }
    
     /*********** Background ***************/
 
  body { 
    
    background-image: url(https://file.garden/ZYYlEdYewxMFm_3g/My%20website%20stuff/Website%20graphics/Backgrounds/redweb.gif);

    overflow: none;
    
    background-size: 100px;
    
   background-color: #4d5a81;
    
    cursor:url("https://file.garden/ZYYlEdYewxMFm_3g/My%20website%20stuff/Website%20graphics/Tiny%20pixels/Maz%20paw%20pad.png"), auto;
    
    box-sizing: border-box;
    
    }
    
     /*********** Container ***************/
     
     #container {
       
      max-width: 900px;
      
      margin: 0 auto;
      
      margin-top: 30px;

     }
  
   #boxes {
    
    display: flex;
    
    flex-flow: column nowrap;
     
   }
   
   .boxrow {
     
    align-items: center;
     
    display: flex;
 
    flex-direction: column;
   }
     
     /*********** Imgs ***************/
  
  img {
    
    max-width: 100%;
    
    height: auto;
  }
  
   .zoom {
      
      transition: transform .2s;
    }
    
    .zoom:hover {
      
      transform: scale(1.2);
      
      cursor: url("https://file.garden/ZYYlEdYewxMFm_3g/My%20website%20stuff/Website%20graphics/Tiny%20pixels/Maz%20paw%20click.png"), pointer;
    }
 
     .stuff {
      
      margin: 20px 0px 20px 0;
    
    }
  
  /********* Cards ***********/
  
  .card1 {
    
    height: 250px;
    
    border-radius: 10px 50px;
    
  }
  
  .card2 {
    
    text-align: left;
  }
  
  .card3 {
    
    border-radius: 10px;
    
    height: 520px;
    
    
  }
   .card4 {
     
    border-radius: 20px;
    
    height: 450px;
    
  }
  
  .cardrow {
    
    display: flex;
    
    flex-flow: row wrap;
    
  }
  
  .col {
    
    padding: 20px;
    
    position: relative;
    
    width: 100%
  }
  
  .row {
    
    display: flex;
    
    flex-flow: wrap;
    
  }
  
  .invenbox {
    
    border-radius: 10px;
    
    height: 300px;
    
  }
  
   .playlistbox {
 
   height: 160px;
 
 }
 
 .invenbox {
 
   height: 300px;
 
  }

  .picturecard {

    height: 420px;
     
    width: 200px;
     
    padding: 5px;
     
    border-radius: 10px;
     
    border: 5px double #eaeaea;
    
    background-image: url("https://file.garden/ZYYlEdYewxMFm_3g/My%20website%20stuff/Website%20graphics/Backgrounds/asfalt-light.png");
    
    background-color: #0c0c0c;
    
    text-align: center;

  }
  
  .m-2 {
    
    margin: .7rem;
  }
  /******* HR *********/
   hr {
     
    width: 80%;
     
    display: block;
     
    color: #323232;
     
    border-width: 1px;
     
    margin-top: 20px;
  
    margin-bottom: 20px;
    
    }
  
  /******* Links ***********/
  
  a {
    
    color:  #D9D9D9;
    
    cursor: url(https://file.garden/ZYYlEdYewxMFm_3g/My%20website%20stuff/Website%20graphics/Tiny%20pixels/Maz%20paw%20click.png), pointer;
    
    text-decoration: none;
    
  }
  
   a:hover {
 
   color: #22263d;
 }
  
   .designlink {
 
   margin: 20px 20px 30px 30px;
 
   font-size: 16px;
 
   color: #b73c3c;
 
   font-family: montserratreg;
 
  }
  
  
  /******* Words **********/

  .spoiler {

      background: black;
      color: black; 

  }

  .spoiler:hover {

      background: transparent;
     
  }
  
  .title {
    
    font-size: 40px;
    
    letter-spacing: 6px;
  }
  
  .about {
    
    font-family: times;
    
    font-size: 18px;
    
    text-indent:1em;
    
    line-height:1.5em;
  }
  
  .infoheader {
    
    letter-spacing: 3px;
    
    font-size: 30px;
    
    text-align: center;
    
    margin: 5px 0 5px 0;
  }
  
   .list {
     
     text-align: left;
     
     font-size: 18px;
     
     font-family: times;
   }
   
   
   /******* ul/li **********/
   
   ul,li {
     
     list-style-position: outside;
     
     list-style-image: url(/);
     
   }
   
    li {
     
     margin-top: 25px;
     margin-bottom: 25px;
     
     }
  
  /******** Table ********/
  
  .infotable {
    
    width: 100%;
    
    padding: 5px;
    
    font-family: verdana;
    
    text-align: left;
    
    font-size: 15px;
    
    border-spacing: 5px;
  }
  
  .infotable td {
    
   width: 10%;
    
   padding: 5px;
   
   font-size: 0.9em;
 }
  
  .infotable td:nth-child(2n+1) {
    
   background-color:rgba(37,37,39,4);
   
   border-radius: 5px;
   
  }
  
    .songs {
 
   padding: 5px;
 
   text-align: left;
 
   width: 100%;
   
   border-spacing: 10px;
 
   }
 
   .songs td {
 
 
    padding: 10px;
 
 
   }
 
   .songs td:nth-child(2n+1) {
 
     padding: 8px 10px 8px;
    
     background-color:rgba(37,37,39,4);
     
     border-radius: 20px 3px;
     
    }
  /********* Headers **********/
  
  
  h1 {
    
    font-style: italic;
    
    color: #222222;
    
    letter-spacing: 2px;
    
    font-family: tahoma;
    
    font-size: 16px;
    
    margin-bottom: 20px;
    
  }
  
  h2 {
    
    font-style: italic;
    
    color: #cde0ff;
    
    font-size: 15px;
    
    font-family: georgia;
    
    letter-spacing: 1px;
    
  }
  
  /************ Repeating stuff *********/
  
  .triviabox, .card2 {
 
   border-radius: 30px;
 
  }
  
  .card2, .triviabox {
 
     height: 400px;
 
   }

     .box1, .box2, .box3, .card1, .card2, .card3, .card4, .invenbox, .triviabox, .playlistbox {
      
      max-height: auto;
      
  }
  
    .card1, .card2, .card3, .card4, .invenbox, .triviabox, .playlistbox {
      
    border: 5px double #E6E6E6;
    
    align-content: center;
    
    width: 85%;  
    
    overflow: scroll;
    
    overflow-x: hidden;

    background-image: url(https://file.garden/ZYYlEdYewxMFm_3g/My%20website%20stuff/Website%20graphics/Backgrounds/always-grey.png);
    
    background-color: #808080;
    
    padding: 18px;
      
    }
  
     .box1, .box2, .box3, footer {
      
      Background-color: #313131;
      
      margin-bottom: 30px;
      
      background-image: url(https://file.garden/ZYYlEdYewxMFm_3g/My%20website%20stuff/Website%20graphics/Backgrounds/black-orchid.png);
      
    }
    
    .box1, .box2, .box3 {
      
      border-radius: 100px 10px;
      
      border: 5px double #E6E6E6;
      
      padding: 10px;
      
    }
    
    .infotable, .infoheader, .title, .fillerwords, .songs {
      
      color: #eaeaea;
      
      
    }
    
    .infoheader, .title {
      
      font-family: darkcastle;
      
    }
    
     .playlistbox, .invenbox {
 
    border-radius: 10px;
 
    }
  
 /********* Boxes **********/
 
  .box1 {
    
    order: 1;
    
    height: 2480px;
    
  }
  
  .box2 {
    
    order: 2;
    
    height: 1030px;
    
  }
  
  .box3 {
    
    order: 3;
    
    height: 750px;
    
  }
   /******Footer******/
  
   #footerbar {
     
     order: 3;
     
     display: flex;
     
     flex-direction: row;
     
     Justify-content: center;
     
     }
 
  footer {
    
    order: 3;
    
    border: 40px solid transparent;
    
    border-image: url(https://files.catbox.moe/v4wkmr.png) 40 round;
    
    border-image-outset: 0;
    
    }
 
  .back {
   
    cursor: url(https://file.garden/ZYYlEdYewxMFm_3g/My%20website%20stuff/Website%20graphics/Tiny%20pixels/Maz%20paw%20click.png), pointer;
  }
  
  /******** Media queries *********/
  
  @media screen and (max-width: 630px){
    
      .songs td {
 
       display: block;
 
   }

  @media screen and (max-width: 420px) {
    
    .infotable td {
      
      width: 90%;
      
      display: block;
    }

    .title {

    font-size: 20px;
    
  }
  
  @media screen and (max-width: 330px) {
    
    h1 {
   
   font-size: 12px;
 
    }
    
    .infoheader {
      
      font-size: 15px;
    }}}}