/*********** 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);
   
   }

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

 body { 
   
   background-image: url("https://files.catbox.moe/m58p49.png");
   
   background-repeat: repeat;
   
   cursor:url("https://files.catbox.moe/ll1upe.png"), auto;
   
   box-sizing: border-box;
   
   }
   
 /*********** Container ***************/
 
 #container {
   
   max-width: 900px;
   
   display: flex; 
   
   flex-direction: column; 
   
   margin: 0 auto; 
   
   margin-top: 100px;  
   
   flex-wrap: nowrap;
   
   }
   
   
 /*********** Title *********/
 
 #title {
   
   order: 1;
   
   max-height: auto;
   
   border: solid 40px transparent;
   
   border-image: url(https://files.catbox.moe/w20d6w.png) 40 round;
   
   border-image-outset: 0.4;
   
 }
   
 /*********** Imgs ***************/
 
 img {
   
   max-width: 100%;
   
   height: auto;
 }

     .cornerart {
       
       background-position: left;
      
       left: 0;
       
     }
     
     .cornerart2 {
       
       background-position: bottom right;
       
       right: 0;
     }
     
     .beachdivider {
       
       margin-bottom: 30px;
     }

     .charpicture {
         
      max-width:auto;

      margin-top: 10px;

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

 .cornerart, .cornerart2 {
   
   position: absolute;
   
 }
 
 #title, #box, footer {
   
   text-align: center;
   
   margin-bottom: 30px;
   
   background-image: url(https://files.catbox.moe/3azrif.png);
 }
 
 #box a, .back {
   
   cursor: url("https://files.catbox.moe/xvyo8m.png"), pointer;
   
 }
 
 /*********** Box ***************/

   #box { 
   
   order: 2;
   
   padding: 20px;
   
   max-height: auto;
   
   border: 15px solid transparent; 
   
   border-image: url(https://files.catbox.moe/2g2f04.png) 15 round;
   
   border-image-outset: 0.4;
   
   }
   
   #box p {
     
     margin-top: 30px;
     
     margin-bottom: 40px;
     
     font-size: 15px;
     
     font-family: arial;
     
     color: #151515;
   }

   #characterbox {
       
    display: flex;

    width: 90%;

    border-radius: 40px;

    border: 2px solid black;

    height: 350px;

    margin: 0 auto;

    overflow: scroll;

    overflow-x: hidden;

    flex-flow: wrap row;

    align-items: center;

    gap: 20px;

    padding: 30px;

    text-align: center;

    background-image: url(https://files.catbox.moe/i1tcck.png)

   }

   .character {
       
    max-width: auto;

    border-radius: 50px;

    height: 330px;

    border: 2px solid rgb(100, 92, 69);

    padding: 15px;

    margin-bottom: 30px;

    text-align: center;

    width: 200px;

    background-image: url(https://files.catbox.moe/3azrif.png)

   }

   .characterwords {
    
    font-size: 15px;

    font-family: tahoma;
   }

    h1 {
    
      font-size: 19px;

      font-family: courier;

      letter-spacing: 4px;

      font-style: italic;

      color: rgb(70, 60, 42);

    }
   
  /******Footer******/
  
   #footerbar {
    
    order: 3;
    
    display: flex;
    
    flex-direction: row;
    
    Justify-content: center;
    
   }

 footer {
   
   border: 30px solid transparent;
   
   border-image: url(https://files.catbox.moe/v4wkmr.png)17% round;
   
   border-image-outset: 0;
   
 }
    
 @media screen and (max-width: 850px) {

   .cornerart, .cornerart2 {
     
     display: none;

   }
  }

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

   #characterbox {

    height: 500px;

    width: 70%;
   }
  }
  @media screen and (max-width: 330px) {
    
    h1 {
        
        font-size: 14px;
    }
  }