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

  @font-face {

    font-family: computerist; src: url(https://feralsworld.rodeo/Fonts/Computerist.ttf);
  }

  @font-face {
   
    font-family: montserratreg; src: url(https://feralasar.neocities.org/Fonts/MontserratRegular-RpK6l.otf);
    
    }
 
  @font-face {

  font-family: Tesla; src: url(https://feralsworld.rodeo/Fonts/TESLA.ttf);
}
    
  @font-face {
      
      font-family: pixeloperator; src: url(https://feralsworld.rodeo/Fonts/PixelOperator.ttf);
      
    }
    
     /*********** Background ***************/
 
  body { 
    
    background-image: url(https://file.garden/ZYYlEdYewxMFm_3g/My%20website%20stuff/Website%20graphics/Backgrounds/tumblr_inline_mlkwolhobQ1r53miq.png);
    
    background-size: 100px;
    
    cursor:url("https://file.garden/ZYYlEdYewxMFm_3g/My%20website%20stuff/Website%20graphics/Tiny%20pixels/flower%20cursor.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;
   }

   .divider {

      height: 3px;

      width: 70%;

      Background-color: #161616;

      border-radius: 60px;

      margin: 30px 30px;
   }
     
     /*********** 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/flower%20cursor.png"), pointer;
    }
 
     .stuff {
      
      margin: 20px 0px 20px 0;
    
    }
  
  /********* Cards ***********/
  
  .card1 {
    
    height: 300px;
    
    border-radius: 5px;
    
  }
  
  .card2 {
    
    text-align: left;
  }
  
  .card3 {
    
    border-radius: 10px;
    
    height: 520px;
    
    
  }
   .card4 {
     
    border-radius: 20px;
    
    height: 400px;
    
  }
  
  .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 {
     
    width: 200px;
     
    padding: 5px;

    max-height: auto;
     
    border-radius: 10px;
     
    border: 5px double #eaeaea;
    
    background-image: url("https://file.garden/ZYYlEdYewxMFm_3g/My%20website%20stuff/Website%20graphics/Backgrounds/white-diamond.png");
    
    background-color: #0c0c0c;
    
    text-align: center;

  }
  
  .m-2 {
    
    margin: .7rem;
  }
  
  /******* Links ***********/
  
  a {
    
    color:  #4f5a9c;
    
    cursor: url(https://file.garden/ZYYlEdYewxMFm_3g/My%20website%20stuff/Website%20graphics/Tiny%20pixels/flower%20cursor.png), pointer;
    
    text-decoration: none;
    
  }
  
   a:hover {
 
   color: #22263d;
 }
  
   .designlink {
 
   margin: 20px 20px 30px 30px;
 
   font-size: 16px;
 
   color: #4f5d8b;
 
   font-family: montserratreg;
 
  }
  
  
  /******* Words **********/

  .description {

    color: #222222;
  }
  
  .title {
    
    font-size: 70px;

    font-family: Tesla;

    color:#eaeaea;
    
    letter-spacing: 6px;
  }
  
  .about {
    
    font-family: times;
    
    font-size: 18px;
    
    text-indent:1em;
    
    line-height:1.5em;
  }
  
  .infoheader {

    font-family: computerist;
    
    letter-spacing: 7px;
    
    font-size: 30px;
    
    text-align: center;
    
    margin-bottom: 10px;
  }
  
   .list {
     
     text-align: left;
     
     font-size: 18px;
     
     font-family: times;
   }
   
   /******* ul/li **********/
   
   ul,li {
     
     list-style-position: outside;
     
     list-style-image: url(https://file.garden/ZYYlEdYewxMFm_3g/My%20website%20stuff/Website%20graphics/Plant%20pixels/yellow-tiny-flower-pixel.png);
     
   }
   
    li {
     
     margin-top: 25px;
     margin-bottom: 25px;
     
     }
  
  /******** Table ********/
  
  .infotable {
    
    width: 100%;
    
    padding: 5px;
    
    text-align: center;

    font-size: 14px;
    
    border-spacing: 5px;
  }

  .dtitle {

    font-family: pixeloperator;
  }
  
  .infotable td {
    
   width: 10%;
    
   padding: 8px;
   
   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: 5px;
     
    }
  /********* Headers **********/
  
  
  h1 {
    
    font-style: italic;
    
    color: #222222;
    
    letter-spacing: 2px;
    
    font-family: courier;
    
    font-size: 16px;
    
    margin-bottom: 20px;
    
  }
  
  h2 {
    
    font-style: italic;
    
    color: #b5b5ff;
    
    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, .infotable {
      
      max-height: auto;
      
  }
  
    .card1, .card2, .card3, .card4, .invenbox, .triviabox, .playlistbox {
      
    border: 5px double black;
    
    align-content: center;
    
    width: 85%;  
    
    overflow: scroll;
    
    overflow-x: hidden;

    background-image: url(https://file.garden/ZYYlEdYewxMFm_3g/My%20website%20stuff/Website%20graphics/Backgrounds/arabesque.png);
    
    background-color: #d8d8d8;
    
    padding: 18px;
      
    }
  
     .box1, .box2, .box3, footer {
      
      Background-color: #161616;
      
      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: 10px;
      
      border: 5px double rgb(173, 173, 173);
      
      padding: 10px;
      
    }

    .fillerwords, .songs, .infotable {

      color: #eaeaea;
      
    }
    
     .playlistbox, .invenbox {
 
    border-radius: 10px;
 
    }
  
 /********* Boxes **********/
 
  .box1 {
    
    order: 1;

    height: 2550px;
    
  }
  
  .box2 {
    
    order: 2;
    
    height: 1030px;
    
  }
  
  .box3 {
    
    order: 3;
    
    height: 700px;
    
  }
   /******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/flower%20cursor.png), pointer;
  }
  
  /******** Media queries *********/
  
  @media screen and (max-width: 630px){

    .title {

      font-size: 30px;
    }

    .infoheader {

      font-size: 20px;

 
    }
    
      .songs td {
 
       display: block;
 
   }

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

    .title {

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