@font-face {
    font-family: 'OpenSansPX';
    src: url(fonts/OpenSansPX.ttf);
  }
   
  
  
   
  
  
  
  
   
  
  
  body{
      background-image:url(https://drfaker1210.neocities.org/bigboi.gif);
      background-size:  cover;
  }
  
  
  
  
  
  .layout {
      opacity: 0.1;
      position: fixed;
      z-index: -10;
      width: 80%;
      bottom: -70px;
      margin: auto;
  }
  
  
  
  
  .box1 {
      position: absolute;
      margin-left: 25.7%;
      margin-top: 0.2%;
      width: 35.94%;
      height: 20.37%;
      display: block;
      
  }
  
  .box2 {
      position: absolute;
      margin-left: 62.3%;
      margin-top: 0.2%;
      width: 11.46%;
      height: 20.37%;
      
  }
  
  .box3 {
      position: absolute;
     
      margin-top: 2%;
      width: 100%;
      
      display: block;
      
  }
  
  .box4 {
      position: absolute;
      margin-left: 62.3%;
      margin-top: 12.38%;
      width: 11.46%;
      height: 24.37%;
  }
  
  .box5 {
      
      position: absolute;
      
      margin-top: 6.5%;
      width: 100%;
      
      display: block;
  }
  
  
  
  
  
  
  .box96 {
      
      height:7vh;
  }
  
  .boxany {
      
      height: 46.8vh
  }
  
  
  .infobox {
      font: 2.2vh Segoe UI, sans-serif;
  }
  
  
  .title {
      padding-left: 1vh;
      font-family: 'OpenSansPX',  'Century Gothic';
      font-size: 7.5vh;
      height: 1vh;
      line-height: 7vh;
  }
  
  
  
  .thingy {
      font-family: 'OpenSansPX',  'Century Gothic';
      font-size: 5vh;
      position: relative;
      left: 1.2vh;
  }
  
  
  
  
  
  
  .toprightimg {
      cursor: pointer;
      display: block;
      width: 100%;
  }
  
  
  
  
  .bonkers {
      width:100%;
      height:100%;
      margin-left: 0.5vh;
      margin-top: 4vh;
  }
  
  p {
      font-size: 2.2vh;
      position: relative;
      left: 1.35vh;
      bottom: 2vh;
      margin-right: 3vh;
      margin-bottom: -1.3vh;
  }
  
  br {
      display: block;
      margin: 0.7vh 0;
      
   }
  
  li {
      font-size: 2.2vh;
      position: relative;
      
  }
  
  ul {
      position: relative;
      bottom: 1.1vh;
      padding-left: 3.8vh;
  }
  
  .webbuttonsdiv {    /* 7.38% */
      
      line-height: 0;
      
      width: 100%;
      
      height: 35.4vh;
      overflow-y: scroll;
  }
  
  .webbuttons {
      padding: 0;
      width: 100%;
      
      
  }
  
  .sizing {
      height: 35.4vh;
  }

  .copytext {
      height: 10vh;
      width: 80%; 
      resize: none;

  }
  
  .short-text { display: none; }
  
  /* making this shit work for mobile */
  
  @media (max-aspect-ratio: 3/2) {
     
  
      body{
          background-image:url(https://drfaker1210.neocities.org/frame0000.gif);
          background-size:  cover;
      }
      
      
      
      
      .layout {
          opacity: 0.1;
          position: fixed;
          z-index: -10;
          width: 80%;
          bottom: -70px;
          margin: auto;
      }
      
      
      
      
      .box1 {
          position: absolute;
          margin-left: 3%;
          margin-top: 0.2%;
          width: 60%;
          height: 20.37%;
          display: block;
          
      }
      
      .box2 {
          position: absolute;
          margin-left: 65%;
          margin-top: 0.2%;
          width: 30%;
          height: 30%;
          
      }
      
      .box3 {
          position: absolute;
         
          margin-top: 3%;
          width: 100%;
          
          display: block;
          
      }
      
      .box4 {
          position: absolute;
          margin-left: 65%;
          margin-top: 32%;
          width: 30%;
          height: 24.37%;
      }
      
      .box5 {
          
          position: absolute;
          
          margin-top: 6.5%;
          width: 100%;
          
          display: block;
      }
      
      
      
      
      
      
      .box96 {
          
          height:5vh;
      }
      
      .boxany {
          
          height: 58vh
      }
      
      
      .infobox {
          font: 1.7vh Segoe UI, sans-serif;
      }
      
      
      .title {
          padding-left: 1vh;
          font-family: 'OpenSansPX',  'Century Gothic';
          font-size: 6.3vh;
          height: 1vh;
          line-height: 5.2vh;
      }
      
      
      
      .thingy {
          font-family: 'OpenSansPX',  'Century Gothic';
          font-size: 5vh;
          position: relative;
          left: 1.2vh;
      }
      
      .testtext {
          font-size: 20vh;
      }
      
      
      
      
      .toprightimg {
          cursor: pointer;
          display: block;
          width: 100%;
      }
      
      
      
      
      .bonkers {
          width:100%;
          height:100%;
          margin-left: 0.5vh;
          margin-top: 4vh;
      }
      
      p {
          font-size: 2.1vh;
          position: relative;
          left: 1.35vh;
          bottom: 2vh;
          margin-right: 3vh;
          margin-bottom: -1.3vh;
      }
      
      br {
          display: block;
          margin: 0.7vh 0;
          
       }
      
      li {
          font-size: 2.2vh;
          position: relative;
          
      }
      
      ul {
          position: relative;
          bottom: 1.1vh;
          padding-left: 3.8vh;
      }
      
      .webbuttonsdiv {    /* 7.38% */
          
          line-height: 0;
          
          width: 100%;
          
          height: 33.7vh;
          overflow-y: scroll;
      }
      
      .webbuttons {
          padding: 0;
          width: 100%;
          
      }
      
      .sizing {
          height: 33.7vh;
      }
  
      .short-text { display: inline; }
      .full-text { display: none; }
  
  }
  
  
  
  /* because fuck safari */
  @media only screen 
      and (device-width : 414px) 
      and (device-height : 896px) 
      and (-webkit-device-pixel-ratio : 2) {
     
  
      body{
          background-image:url(https://drfaker1210.neocities.org/frame0000.gif);
          background-size:  cover;
      }
      
      
      
      
      
      .layout {
          opacity: 0.1;
          position: fixed;
          z-index: -10;
          width: 80%;
          bottom: -70px;
          margin: auto;
      }
      
      
      
      
      .box1 {
          position: absolute;
          margin-left: 3%;
          margin-top: 0.2%;
          width: 60%;
          height: 20.37%;
          display: block;
          
      }
      
      .box2 {
          position: absolute;
          margin-left: 65%;
          margin-top: 0.2%;
          width: 30%;
          height: 30%;
          
      }
      
      .box3 {
          position: absolute;
         
          margin-top: 3%;
          width: 100%;
          
          display: block;
          
      }
      
      .box4 {
          position: absolute;
          margin-left: 65%;
          margin-top: 32%;
          width: 30%;
          height: 24.37%;
      }
      
      .box5 {
          
          position: absolute;
          
          margin-top: 6.5%;
          width: 100%;
          
          display: block;
      }
      
      
      
      
      
      
      .box96 {
          
          height:5vh;
      }
      
      .boxany {
          
          height: 50vh
      }
      
      
      .infobox {
          font: 1.7vh Segoe UI, sans-serif;
      }
      
      
      .title {
          padding-left: 1vh;
          font-family: 'OpenSansPX',  'Century Gothic';
          font-size: 5.1vh;
          height: 1vh;
          line-height: 5.2vh;
      }
      
      
      
      .thingy {
          font-family: 'OpenSansPX',  'Century Gothic';
          font-size: 4vh;
          position: relative;
          left: 1.2vh;
      }
      
      .testtext {
          font-size: 20vh;
      }
      
      
      
      
      .toprightimg {
          cursor: pointer;
          display: block;
          width: 100%;
      }
      
      
      
      
      .bonkers {
          width:100%;
          height:100%;
          margin-left: 0.5vh;
          margin-top: 4vh;
          
  
      }
      
      p {
          font-size: 2vh;
          position: relative;
          left: 1.35vh;
          bottom: 2vh;
          margin-right: 3vh;
          margin-bottom: -1.3vh;
      }
      
      br {
          display: block;
          margin: 0.7vh 0;
          
       }
      
      li {
          font-size: 1.7vh;
          position: relative;
          
      }
      
      ul {
          position: relative;
          bottom: 1.1vh;
          padding-left: 3.8vh;
      }
      
      .webbuttonsdiv {    /* 7.38% */
          
          line-height: 0;
          
          width: 100%;
          
          height: 29vh;
          overflow-y: scroll;
      }
      
      .webbuttons {
          padding: 0;
          width: 100%;
          
      }
      
      .sizing {
          height: 29vh;
      }
  
      .short-text { display: inline; }
      .full-text { display: none; }
  
      
  
  }
  
  /* this is probably the worst way to do this, idc im gonna code like yandere dev!!! */
  @media screen and (min-width : 1280px) {


    
    
   
  
  




.layout {
    opacity: 0.1;
    position: fixed;
    z-index: -10;
    width: 80%;
    bottom: -70px;
    margin: auto;
}




.box1 {
    position: absolute;
    margin-left: 0px;
    margin-top: 2.5px;
    width: 460.032px;
    height: 174.9783px;
    display: block;
    
}

.box2 {
    position: absolute;
    margin-left: 468.48px;
    margin-top:  2.5px;
    width: 146.688px;
    height: 174.9783px;
    
}

.box3 {
    position: absolute;
   
    margin-top: 9.2px;
    width: 100%;
    
    display: block;
    
}

.box4 {
    position: absolute;
    margin-left: 468.48px;
    margin-top: 158.5px;
    width: 146.688px;
    height: 209.3383px;
}

.box5 {
    
    position: absolute;
    
    margin-top: 9.5px;
    width: 100%;
    
    display: block;
}






.box96 {
    
    height: 40px;
}

.boxany {
    
    height: 268.5px
}


.infobox {
    font: 12px Segoe UI, sans-serif;
}


.title {
    padding-left: 5.75px;
    font-family: 'OpenSansPX',  'Century Gothic';
    font-size: 43px;
    height: 1vh;
    line-height: 40px;
}



.thingy {
    font-family: 'OpenSansPX',  'Century Gothic';
    font-size: 28.7px;
    position: relative;
    left: 6.9px;
}






.toprightimg {
    cursor: pointer;
    display: block;
    width: 100%;
}




.bonkers {
    display:block;
    width:616.5px;
    
    margin: 0 auto;
    margin-top: 4vh;
    
    
}

p {
    font-size: 12.6px;
    position: relative;
    left: 7.9px;
    bottom: 11px;
    margin-right: 1px;
    margin-bottom: -1.3vh;
}

br {
    display: block;
    margin: 0.7vh;
    
 }

li {
    font-size:  12.6px;
    position: relative;
    
}

ul {
    position: relative;
    bottom: 6.9px;
    padding-left: 21.5px;
}

.webbuttonsdiv {    /* 7.38% */
    
    line-height: 0;
    
    width: 100%;
    
    height: 203px;
    overflow-y: scroll;
}

.webbuttons {
    padding: 0;
    width: 100%;
    
    
}

.sizing {
    height: 203px;
}



.short-text { display: none; }
  
   

  
  }


  


  
  
  @media screen and (min-width : 1500px) {


    
    
   
  
  
  
    
    
    
    .layout {
        opacity: 0.1;
        position: fixed;
        z-index: -10;
        width: 80%;
        bottom: -70px;
        margin: auto;
    }
    
    
    
    
    .box1 {
        position: absolute;
        margin-left: 0px;
        margin-top: 0px;
        width: 552.0384px;
        height: 75.97396px;
        display: block;
        
    }
    
    .box2 {
        position: absolute;
        margin-left: 562.176px;
        margin-top:  0px;
        width: 176.0256px;
        height: 175.97396px;
        
    }
    
    .box3 {
        position: absolute;
       
        margin-top: 12px;
        width: 100%;
        
        display: block;
        
        
    }
    
    .box4 {
        position: absolute;
        margin-left: 562.176px;
        margin-top: 188px;
        width: 176.0256px;
        height: 68.20596px;

        
    }
    
    .box5 {
        
        position: absolute;
        
        margin-top: 12px;
        width: 100%;
        
        display: block;

        
    }
    
    
    
    
    
    
    .box96 {
        
        height: 48px;
        
    }
    
    .boxany {
        
        height: 322.2px
        
    }
    
    
    .infobox {
        font: 14.4px Segoe UI, sans-serif;
        
    }
    
    
    .title {
        padding-left: 6.9px;
        font-family: 'OpenSansPX',  'Century Gothic';
        font-size: 51.6px;
        height: 1.2vh;
        line-height: 48px;
        
    }
    
    
    
    .thingy {
        font-family: 'OpenSansPX',  'Century Gothic';
        font-size: 34.44px;
        position: relative;
        left: 8.28px;
        
    }
    
    
    
    
    
    
    .toprightimg {
        cursor: pointer;
        display: block;
        width: 100%;
        
    }
    
    
    
    
    .bonkers {
        display:block;
        width:738px;
    
        margin: 0 auto;
        margin-top: 12vh;
        
        
    }
    
    p {
        font-size: 15.12px;
        position: relative;
        left: 9.48px;
        bottom: 13.2px;
        margin-right: 10px;
        margin-bottom: -1.2px;
        
    }
    
    br {
        display: block;
        margin: 0.84vh;
        
     }
    
    li {
        font-size:  15.12px;
        position: relative;
        
    }
    
    ul {
        position: relative;
        bottom: 8.28px;
        padding-left: 28.8px;
    }
    
    .webbuttonsdiv {    /* 7.38% */
        
        line-height: 0;
        
        width: 100%;
        
        height: 254px;
        overflow-y: scroll;
    }
    
    .webbuttons {
        padding: 0;
        width: 100%;
        
        
    }
    
    .sizing {
        height: 254px;
    }
    

   


    
    
    .short-text { display: none; }
      
       
    
     
  
    
    }