body {width: 100%; Height: auto; min-width: 816px;}
.stripe-4 {
          color: white;
          background: repeating-linear-gradient(
             45deg,
             #333 25%,
             #222 25%,
             #222 50%,
             #333 50%,
             #333 75%,
             #222 75%

          );
          background-size: 30px 30px;
        }

.module {
          color: white;
          border: 1px solid #ccc;
          margin: 3%;
          > h2 {
            padding: 1rem;
            margin: 0 0 0.5rem 0;
          }
          > p {
            padding: 0 1rem;
          }
        }

@font-face {
          font-family: Bubble;
          src: url(Fonts/groovy-font/Groovy-r09O.ttf);
          }


.container {
  width: 100%;
  height: 100%;
}

.leftpane {
    width: 33%;
    height: 100%;
    float: left;
    border-collapse: collapse;
    position: relative;
    max-width: 1000px;
    


}

.middlepane {
    width: 34%;
    height: 100%;
    float: left;
    
    border-collapse: collapse;
}

.rightpane {
  width: 33%;
  height: 100%;
  position: relative;
  float: right;
  
  border-collapse: collapse;
}

html, body {
            max-width: 100%;
            overflow-x: hidden;
        }

.al {
  text-align: center;
    }

.tr {
  transform: translate(0px,50px);
}

.tr-al {
  text-align: center; transform: translate(0px,25px);
}

.bu-tr-al {
  text-align: center; transform: translate(0px,100px); font-family: Bubble;
}

.le {
          transform: translate(30px,70px); font-family: Roboto, Helvetica, sans-serif;
        }

.ri {
          transform: translate(100px,0px); font-family: Roboto, Helvetica, sans-serif;
        }

h3 {
          text-decoration: underline; font-weight: 900;
        }

.ril {
          
          transform: translate(230px,-240px);
          font-family: Roboto, Helvetica, sans-serif;
          max-width: fit-content;
          text-align: center;
        }

.riln {
          
          transform: translate(280px, -250px);
          font-family: Roboto, Helvetica, sans-serif;
          max-width: fit-content;
}




body {
          overflow: hidden;
        }

.Header {
          height: 70px;
          width: 100%;
          background: #333;
          position: fixed;
          top: 0;
          z-index: 1000;
        }

.image-wrapper {
  position: relative;
  max-width: 1000px;
  
}

.div-1{  
          height: 50px;
          width: 50px;
          background: #ff0000;
          transform: translate(10px,10px);
          border-radius: 15px;
          corner-shape: squircle;
          
        }

.div-2 {
          height: 50%;
          width: 50%;
          max-height: 615px;
          min-height: 200px;
          min-width: 395px;
          background: #ff0000;
          border-radius: 20px;
          border-color: rgba(0, 0, 0, 0);
          corner-shape: squircle;
          background-size: cover;
          flex-direction: collumn;
          transform: translate(30%, -275px);
          
        }
        
.divs {
          height: 570px;
          width: 485px;
          background: #ff0000;
          border-radius: 20px;
          border-color: rgba(0, 0, 0, 0);
          corner-shape: squircle;
          background-size: cover;
          flex-direction: collumn;
          transform: translate(50px, -880px);
          
        }

.beastbuybut {
          height: 50px;
          width: 300px;
          transform: translate(-350px, -650px);
          background: #ff0000;
          border-radius: 20px;
          border-color: rgba(0, 0, 0, 0);
          corner-shape: squircle;
          background-size: cover;
          font-family: Roboto, Helvetica, sans-serif;
          text-align: center;
}

.Homeb {
          position: absolute; top: 0%; left: 0%;
          transform: translate(125px, 25px);
          font-family: Roboto, Helvetica, sans-serif;
          font-weight: 900;
        }

.browseb {
          position: absolute; top: 0%; left: 0%;
          transform: translate(225px, 25px);
          font-family: Roboto, Helvetica, sans-serif;
          font-weight: 900;
        }

.aboutb {
          position: absolute; top: 0%; left: 0%;
          transform: translate(325px, 25px);
          font-family: Roboto, Helvetica, sans-serif;
          font-weight: 900;
        }

.FAQb {
          position: absolute; top: 0%; left: 0%;
          transform: translate(425px, 25px);
          font-family: Roboto, Helvetica, sans-serif;
          font-weight: 900;
        }

hr.main {
          border-top: 2px solid #ffffff;
          width: 50%;
          transform: translate(50%,100px);
          display: flex;
          flex-direction: collumn;
          
        }
hr.mainj {
          border-top: 2px solid #ffffff;
          width: 50%;
          transform: translate(50%,20px);
          display: flex;
          flex-direction: collumn;
          
        }

div.bgb {
          height: 500px;
          width: 450px;
          border-style: solid;
          border-color: #1A1A1A;
          border-width: 5px;
          border-radius: 20px;
          corner-shape:round;
          background-color: #333;
          flex-direction: column;
          transform: translate(90px,200px);
}

div.bgbs {
          height: 1000px;
          width: 545px;
          border-style: solid;
          border-color: #1A1A1A;
          border-width: 5px;
          border-radius: 20px;
          corner-shape:round;
          background-color: #333;
          flex-direction: column;
          transform: translate(20px,90px);
}

div.bgb2 {
          height: 500px;
          width: 450px;
          border-style: solid;
          border-color: #1A1A1A;
          border-width: 5px;
          border-radius: 20px;
          corner-shape:round;
          background-color: #333;
          flex-direction: column;
          transform: translate(90px,200px);
}

div.bgb3 {
          height: 500px;
          width: 450px;
          border-style: solid;
          border-color: #1A1A1A;
          border-width: 5px;
          border-radius: 20px;
          corner-shape:round;
          background-color: #333;
          flex-direction: column;
          transform: translate(90px,200px);
}
@media (max-width: 1560px) {
  .leftpane {
    position: absolute;
    left: 200px;
    top: -50;
  }
}

@media (max-width: 1560px) {
  .middlepane {
    position: absolute;
    left: 700px;
    top: 125px;
  }
}

@media (max-width: 1560px) {
  .rightpane {
    position: absolute;
    left: 450px;
    top: 650px;
  }
}




@media (max-width: 1290px) {
  .leftpane {
    position: absolute;
    left: 0px;
    top: -50;
  }
}

@media (max-width: 1290px) {
  .middlepane {
    position: absolute;
    left: 500px;
    top: 125px;
  }
}

@media (max-width: 1290px) {
  .rightpane {
    position: absolute;
    left: 250px;
    top: 650px;
  }
}




@media (max-width: 1100px) {
  .leftpane {
    position: absolute;
    left: -50px;
    top: -50;
  }
}

@media (max-width: 1100px) {
  .middlepane {
    position: absolute;
    left: 425px;
    top: 125px;
  }
}

@media (max-width: 1100px) {
  .rightpane {
    position: absolute;
    left: 200px;
    top: 650px;
  }
}




@media (max-width: 1000px) {
  .leftpane {
    position: absolute;
    left: 10%;
    top: -50;
  }
}

@media (max-width: 1000px) {
  .middlepane {
    position: absolute;
    left: 10%;
    top: 650px;
  }
}

@media (max-width: 1000px) {
  .rightpane {
    position: absolute;
    left: 10%;
    top: 1200px;
  }
}
footer.footn {
  height: 35%;
  width: 100%;
  background: #1A1A1A;
  font-family: Roboto, Helvetica, sans-serif;
  
}
section.d1 {
  text-align: center;
  transform: translate(0px,0px);
  font-family: Roboto, Helvetica, sans-serif;
  
}
h3.h {
  text-align: center;
  transform: translate(-25%,0px);
  font-family: Roboto, Helvetica, sans-serif;
  

}
p.h {
  text-align: center;
  transform: translate(-17%,0px);
  font-family: Roboto, Helvetica, sans-serif;


}
a.hj {
  color: #333;
  font-family: Roboto, Helvetica, sans-serif;
  text-decoration: underline;
}