*,*::before,*::after{
    box-sizing: border-box;
  }
*{
  margin: 0;
  padding: 0;
  }

@font-face {
    font-family: 'Zona Pro ExtraBold';
    src: local('Zona Pro ExtraBold'), local('Zona-Pro-ExtraBold'),
        url('ZonaPro-ExtraBold.woff2') format('woff2'),
        url('ZonaPro-ExtraBold.woff') format('woff'),
        url('ZonaPro-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
  }

@font-face {
    font-family: 'Zona Pro SemiBold';
    src: local('Zona Pro SemiBold'), local('Zona-Pro-SemiBold'),
        url('ZonaPro-SemiBold.woff2') format('woff2'),
        url('ZonaPro-SemiBold.woff') format('woff'),
        url('ZonaPro-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
  }


body{
  font-family: 'Zona Pro ExtraBold'
  }
.layout0{
  display: flex;
  flex-direction: column;
  }
.layout1{
  display: flex;
  flex-direction: row;
  }
.layout2{
  display: flex;
  flex-direction: row;
  }
.layout3{
  display: flex;
  flex-direction: row;
  }
#panel1{
  width: 22vw;
  height: 100vh;
  background-color: #b4004c;
  margin: 0;
  background-image: url("https://aspii.neocities.org/shrines/draingang/ecco1.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  }
#panel2{
  width: 3vw;
  height: 100vh;
  background-color: white;
  margin: 0;
  color: black;
  font-size: 3vw;
  position: relative;
  overflow: hidden;
  }
#panel3{
  width: 3vw;
  height: 100vh;
  background-color: black;
  margin: 0;
  font-size: 1.5vw;
  line-height: 1.3vw;
  color: white;
  position: relative;
  overflow: hidden;
  }
#panelblade{
  width: 22vw;
  height: 100vh;
  background-color: #b4004c;
  margin: 0;
  background-image: url("https://aspii.neocities.org/shrines/draingang/bladee1.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  }
#panelthaiboy{
  width: 22vw;
  height: 100vh;
  background-color: #b4004c;
  margin: 0;
  background-image: url("https://aspii.neocities.org/shrines/draingang/thaiboy1.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  }
#panel4{
  width: 30vw;
  height: 100vh;
  background-color: #fffcfc;
  margin: 0;
  color: #21000d;
  font-size: 1.05vw;
  padding: 2.5vw;
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: normal;
  text-align: justify;
  line-height: 1.5vw;
  }
h1{
  font-size: 3vw;
    text-align: center;
    line-height: 3vw;
  }
.box_rotate {
  transform: rotate(-90deg) translate(-100%, 0);
  transform-origin: top left;
  white-space: nowrap;
  display: inline-block;
  position: absolute;
  top: 0;
}
.box_rotateE1 {
  transform: rotate(90deg) translate(0, -100%);
  transform-origin: top left;
  white-space: nowrap;
  display: inline-block;
  position: absolute;
  top: 0;
}
.box_rotate2 {
  transform: rotate(90deg) translate(0, -100%);
  white-space: nowrap;
  display: inline-block;
  position: absolute;
  top: 0;
  transform-origin: top left;
}

.box_rotate3 {
  transform: rotate(90deg) translate(0, -100%);
  transform-origin: top left;
  white-space: nowrap;
  display: inline-block;
  position: absolute;
  top: 0;
  margin-left: -0.5vw;
}
.box_rotate4 {
  transform: rotate(90deg) translate(0, -100%);
  transform-origin: top left;
  white-space: nowrap;
  display: inline-block;
  position: absolute;
  top: 0;
}

#panel5{
  width: 52vw;
  height: 100vh;
  background-color: #b4004c;
  margin: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  font-size: 1.2vw;
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: normal;
  text-align: justify;
  line-height: 1.5vw;
  padding: 3vw;
  }
#panel7{
  width: 5vw;
  height: 100vh;
  background-color: #ff04fc;
  margin: 0;
  color: #e90002;
  font-size: 5vw;
  position: relative;
  overflow: hidden;
  }
#panel6{
  width: 3vw;
  height: 100vh;
  background-color: #e90002;
  margin: 0;
  font-size: 1.5vw;
  line-height: 1.3vw;
  color: #ff04fc;
  position: relative;
  overflow: hidden;
  }
#panel8{
  width: 40vw;
  height: 100vh;
  background-color: #fffcfc;
  margin: 0;
  color: #21000d;
  padding: 3vw;
  background-image: url("https://aspii.neocities.org/shrines/draingang/bladeegif2.gif");
  background-size: 110% 110%;
  }
#bladee{
  background-color: white;
  }
  
#ecco1{
  width: 3vw;
  height: 100vh;
  background-color: white;
  color: black;
  margin: 0;
  font-size: 1.5vw;
  position: relative;
  overflow: hidden;
  line-height: 1.4vw;
  }
#ecco2{
  width: 5vw;
  height: 100vh;
  background-color: black;
  margin: 0;
  color: white;
  font-size: 4.5vw;
  position: relative;
  overflow: hidden;
  }
#ecco3{
  width: 35vw;
  height: 100vh;
  margin: 0;
  background-image: url("https://media1.tenor.com/m/Tw8h6tMIMnYAAAAd/ecco2k-ecco2k-peroxide.gif");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  }
#ecco4{
  width: 57vw;
  height: 100vh;
  background-color: #fffcfc;
  margin: 0;
  color: black;
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: normal;
  text-align: justify;
  line-height: 1.5vw;
  padding: 2.5vw;
  }