/*********** 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: designernotes; src: url(https://feralasar.neocities.org/Fonts/Designer-Notes.ttf);
}

 @font-face {

  font-family: designernotesbold; src: url(https://feralasar.neocities.org/Fonts/Designer-Notes-Bold.ttf);
}

/*************** Background ***************/

body { 
  
  background-image: url("https://file.garden/ZYYlEdYewxMFm_3g/My%20website%20stuff/Website%20graphics/Backgrounds/wallpaper%20flowers.png");

  background-color: #000108;

  cursor:url("https://file.garden/ZYYlEdYewxMFm_3g/My%20website%20stuff/Website%20graphics/Tiny%20pixels/Badger%20pawpad.png"), auto;
  
  box-sizing: border-box;
  
  }
/*********** Container ***************/

#container {

  text-align: center;

  max-width: 1300px;

  margin: 0 auto;

  margin-top: 50px; 

}

/*********** Imgs ***************/

img {

  height: auto;
 
  max-width: 100%;
  
}

.picture {

  max-width: 100%;

  margin-top: 20px;
}

/*********** Box ***************/

.box {

max-height: auto;

margin: 0 auto;

width: 700px;

padding: 20px;

border: 40px solid transparent;

border-image: url(https://file.garden/ZYYlEdYewxMFm_3g/My%20website%20stuff/Website%20graphics/borders/uneven-wooden-frame.png) 40 round;

border-image-outset: 0.4;

max-height: auto;

background-image: url(https://file.garden/ZYYlEdYewxMFm_3g/My%20website%20stuff/Website%20graphics/Backgrounds/classy-fabric.png);

}

.description {

font-size: 15px;

font-family: montserratreg;

color: white;

}

h1 {
  
font-size: 23px;

font-family: designernotes;

letter-spacing: 4px;

font-style: italic;

}

.title {

  font-size: 30px;

  font-family: highonfire;

  color: white;

}

/******** worlds ********/

#worldboxes {

  margin-top: 50px;

  display: flex;

  flex-direction: row;

  flex-wrap: nowrap;

  gap: 40px;

  margin-bottom: 30px;
}

.world {

  margin: 0 auto;

  max-width: 500px;

  max-height: auto;

  border-radius: 20px;

  padding: 60px;

  border: 4px solid rgb(24, 14, 14);

  background-image: url(https://file.garden/ZYYlEdYewxMFm_3g/My%20website%20stuff/Website%20graphics/Backgrounds/Wood%20background.png);

  background-size: 200px;


}
  .worldwordsbackground {
   
    margin-top: 30px;
    
    margin-bottom: 30px;
    
    padding: 10px;
    
    font-size: 15px;
    
    letter-spacing: 2px;
    
    font-family: designernotesbold;
    
    background-color: #cfcfcf;
    
    border: 15px solid transparent;
    
    border-image: url(https://file.garden/ZYYlEdYewxMFm_3g/My%20website%20stuff/Website%20graphics/borders/Paper%20border.png) 15 round;
    
    background-image: url(https://file.garden/ZYYlEdYewxMFm_3g/My%20website%20stuff/Website%20graphics/Backgrounds/paper%20texture.png);
    
    border-image-outset: 0.4;
    
}

h1 {
  
  font-size: 23px;
  
  font-family: designernotes;
  
  letter-spacing: 4px;
  
  font-style: italic;
  
  }
  
  .title {
  
    font-size: 40px;
  
    font-family: highonfire;
  
    color: white;
  
  }

  /******Footer******/

#footerbar {
  
  order: 2;
  
  display: flex;
  
  flex-direction: row;
  
  Justify-content: center;
  
  }
  
  footer {
   
  border: 30px solid transparent;
  
  border-image: url(https://file.garden/ZYYlEdYewxMFm_3g/My%20website%20stuff/Website%20graphics/borders/wooden-frame.png)17% round;
  
  border-image-outset: 0;
  
  }  


/******** Repeating stuff *******/

.box, footer {

  background-color: #2a2a2a;
}

.world a, .back {

cursor: url("https://file.garden/ZYYlEdYewxMFm_3g/My%20website%20stuff/Website%20graphics/Tiny%20pixels/Badger%20pawpad%20click.png"), pointer;

}

@media screen and (max-width: 840px){

  .box {

 width: 400px;
}
}
@media screen and (max-width: 550px) {


  .box {

    width: 200px;
  }

  #worldboxes {

    flex-direction: column;
  }

  .world {

    max-width: 250px;
  }
}
@media screen and (max-width: 340px){

  .box {

    width: 150px;
  }

  .world {

    width: 180px;
  }
}