/* !!!!THIS IS THE ACTUAL MIN SITE!!!! */

/* ----MULTIPLE PAGES---- */

/* FONTS */
.font1 {
  font-family: "Buenard", serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
}
.font2 {
  font-family: "Yrsa", serif;
  font-optical-sizing: auto;
  font-weight: 100px;
  font-style: normal;
}
/* FONTS */


/* -------------ALL PAGES-------------- */
body {
  background-color: #dde7dc;
  color: #5c5c5c;
  width: 1432px;
  margin: 0;
}

.container {
  height: 500px;
  margin: 0;
}

/* THE TITLE AND LINKS */
h1 {
  font-size: 56px;
  margin-bottom: -27px;
  margin-top: 27px;
}
.contitle {
  height: 99px;
  margin-left: 149px
}
.ultitle {
  list-style-type: none;
}
.lititle {
  float: left;
  height: 10px;
}
.a1 {
  font-size: 40px;
  margin-top: 48px;
}
a:link {
  color: #b65ef5;
  text-decoration: none;
}
.uhere {
  color: #6d7aa5;
}
.a2:link {
  color: #7771f7;
  text-decoration: none;
}
.dividers {
  width: 4px;
  height: 70px;
  margin-top: 20px;
  margin-left: 10px;
  margin-right: 10px;
  background-color: #5c5c5c;
}
/* ----THE TITLE AND LINKS---- */

.longline {
  height: 4px;
  margin-bottom: -2px;
  margin-top: -10px;
  background-color: #5c5c5c;
}

h4 {
  font-size: 25px;
}

h3 {
  font-size: 30px;
}

h2 {
  font-size: 55px;
  margin-top: -7px;
  margin-left: -5px;
  line-height: .55;
}

p {
  font-size: 20px;
}
/* -------------ALL PAGES-------------- */


/* ----CORE PAGE---- */
.monrectangle {
  position: static;
  float: left;
  width: 200px;
  height: 724px;
  margin-top: -48px;
  margin-left: -10px;
  background-color: #b6daca;
}

.liyrectangle {
  position: static;
  float: right;
  width: 200px;
  height: 724px;
  margin-top: -663px;
  background-color: #fce192;
}

.choose {
  position: relative;
  color: #ffffff;
  margin-top: 50px;
  margin-left: 505px;
}

.chotriangle1 {
  margin-left: 270px;
  margin-top: -68px;
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-right: 35px solid #5c5c5c;
}

.chorectangle {
  margin-top: -68px;
  width:425px;
  height: 40px;
  background-color: #5c5c5c;
}

.chotriangle2 {
  margin-top: -68px;
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-left: 40px solid #5c5c5c; 
}

.ultitle2 {
  list-style-type: none;
  margin-left: 300px;
}

.lititleya {
  margin-top: -20px;
  margin-left: -560px;
  font-size: 30px;
  float: left;
  height: 10px;
}

.coreya {
  margin-left: 0;
}

.coreimg {
  width: 1042px;
  margin-top: 10px
}

.bottommid {
  width: 949px;
  margin-left: 235px;
  margin-top: 30px;
  margin-right: 240px;
}

.teyvat {
  margin-top: -5px;
  margin-left: 355px;
}

.corlineall {
  margin-top: -70px;
}

.lineedge1 {
  width: 4px;
  height: 40px;
  background-color: #5c5c5c;
}

.midline {
  height: 4px;
  width: 940px;
  margin-top: -22px;
  background-color: #5c5c5c;
}

.lineedge2 {
  width: 4px;
  height: 40px;
  margin-top: -22px;
  margin-left: 940px;
  background-color: #5c5c5c;
}
/* ----CORE PAGE---- */


/* ----LVL2 PAGE---- */
.monrectangle2 {
  position: static;
  float: left;
  width: 200px;
  height: 724px;
  margin-top: -8px;
  margin-left: -10px;
  background-color: #b6daca;
}

.monrectangle3 {
  position: static;
  float: right;
  width: 200px;
  height: 724px;
  margin-top: -704px;
  margin-left: -10px;
  background-color: #b6daca;
}

.allname {
  position: relative;
}

.nametitle {
  margin-top: 10px;
  margin-bottom: 60px;
  color: #ffffff;
}

.namrectangle {
  margin-top: -96px;
  width:320px;
  height: 40px;
  background-color: #5c5c5c;
}

.namtriangle {
  margin-top: -40px;
  margin-left: 320px;
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-left: 40px solid #5c5c5c; 
}

.lititle2 {
  float: left;
  margin-left: -110px;
}

.play {
  margin-left: 20px;
  position: relative;
  width: 450px;
}

.playrectangle {
  width: 500px;
  height: 185px;
  margin-top: -205px;
  margin-left: 3px;
  border-radius: 15px;
  background-color: #b6daca;
}

.charaselect {
  margin-left: 70px;
}

.nameselect1 {
  position: relative;
  margin-left: 30px;
  margin-top: 28px;
}

.nameselect2 {
  position: relative;
  margin-left: 30px;
  margin-top: 30px;
}

.pointrectangle1 {
  width:425px;
  height: 80px;
  margin-top: -92px;
  margin-left: -10px;
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
  background-color: #f0a5a5;
}

.pointtriangle1 {
  margin-top: -80px;
  margin-left: 415px;
  width: 0;
  height: 0;
  border-top: 40px solid transparent;
  border-bottom: 40px solid transparent;
  border-left: 60px solid #f0a5a5; 
}

.pointrectangle2 {
  width:425px;
  height: 80px;
  margin-top: -92px;
  margin-left: -10px;
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
  background-color: #98ced0;
}

.pointtriangle2 {
  margin-top: -80px;
  margin-left: 415px;
  width: 0;
  height: 0;
  border-top: 40px solid transparent;
  border-bottom: 40px solid transparent;
  border-left: 60px solid #98ced0; 
}

.livenation {
  margin-right: 240px;
  margin-left: 230px;
  margin-top: 273px;
}

.imgplace {
  width: 503px;
  height: 317px;
  margin-left: 40px;
  margin-bottom: px;
}

.nationli {
  list-style-type: square;
  margin-top: -345px;
  margin-left: 740px;
}

.endline {
  width: 140px;
  height: 4px;
  margin-left: 1035px;
  margin-top: 33px;
  background-color: #5c5c5c;
}
/* ----LVL2 PAGE---- */


/* ----SECOND LVL2 PAGE---- */
.liyrectangle2 {
  position: static;
  float: left;
  width: 200px;
  height: 724px;
  margin-top: -8px;
  margin-left: -10px;
  background-color: #fce192;
}

.liyrectangle3 {
  position: static;
  float: right;
  width: 200px;
  height: 724px;
  margin-top: -704px;
  margin-left: -10px;
  background-color: #fce192;
}

.playrectangle2 {
  width: 500px;
  height: 185px;
  margin-top: -205px;
  margin-left: 3px;
  border-radius: 15px;
  background-color: #fce192;
}

.pointrectangle3 {
  width:425px;
  height: 80px;
  margin-top: -92px;
  margin-left: -10px;
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
  background-color: #f9c778;
}

.pointtriangle3 {
  margin-top: -80px;
  margin-left: 415px;
  width: 0;
  height: 0;
  border-top: 40px solid transparent;
  border-bottom: 40px solid transparent;
  border-left: 60px solid #f9c778; 
}

.pointrectangle4 {
  width:425px;
  height: 80px;
  margin-top: -92px;
  margin-left: -10px;
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
  background-color: #a4d399;
}

.pointtriangle4 {
  margin-top: -80px;
  margin-left: 415px;
  width: 0;
  height: 0;
  border-top: 40px solid transparent;
  border-bottom: 40px solid transparent;
  border-left: 60px solid #a4d399; 
}
/* ---- OTHER LVL2 PAGE ---- */


/* ----LVL3 PAGE---- */
.benrectangle1 {
  position: static;
  float: left;
  width: 200px;
  height: 724px;
  margin-top: -8px;
  margin-left: -10px;
  background-color: #e6a178;
}

.benrectangle2 {
  position: static;
  float: right;
  width: 200px;
  height: 724px;
  margin-top: -704px;
  margin-left: -10px;
  background-color: #e6a178;
}

.allname2 {
  position: relative;
}

.nametitle2 {
  margin-top: 10px;
  margin-bottom: 60px;
  margin-left: 190px;
  color: #ffffff;
}

.sublinks {
  margin-left: 888px;
  margin-top: -75px;
}

.bottomsublink {
  margin-top: -33px;
}

.nametraits {
  margin-left: 260px;
  margin-top: -16px;
}

.traitslist {
  list-style-type: square;
  margin-top: -10px;
  margin-left: 214px;
}

.litbig {
  font-size: 20px;
  margin: 0
}

.fitlitbig {
  list-style-type: none;
}

.bentraitsrectangle {
  width: 260px;
  height: 380px;
  margin-top: -330px;
  margin-left: 232px;
  border-radius: 15px;
  background-color: #e6a178;
}

.sum {
  width: 410px;
  margin-top: -385px;
  margin-left: 503px;
}

.imgcharacter {
  width: 260px;
  height: 380px;
  margin-top: -180px;
  margin-left: 726px;
}

.abiless {
  margin-top: -20px;
}

.lititle3 {
  width: 450px;
  float: left;
  margin-left: -108px;
  margin-top: -30px;
}

.lititle4 {
  float: left;
  margin-left: -55px;
  margin-top: 7px;
}

.conslashline {
  position: relative; /* Needed for positioning the absolute child */
  width: 200px;
  height: 126px;
  overflow: hidden; /* Hides parts of the line extending outside */
}

.slashline {
  position: relative;
  top: 50%; /* Center vertically */
  left: -50%; /* Adjust to ensure full coverage after rotation */
  width: 200%; /* Make it wide enough to cover the diagonal */
  height: 4px; /* Thickness of the line */
  background-color: #5c5c5c;
  transform-origin: center center; /* Rotate around its center */
  transform: rotate(120deg); /* Adjust angle as needed */
}
  
.lititle5 {
  width: 480px;
  float: left;
  text-align: right;
  margin-top: -30px;
  margin-left: -131px;
}

.abipush {
  margin-right: 50px;
}

.litbig2 {
  margin-top: -33px;
}

.imgsymbol {
  width: 70px;
  height: 70px;
  border-radius: 50px;
  margin-top: 150px;
  margin-left: -70px;
}

.endline2 {
  width: 140px;
  height: 4px;
  margin-left: 1035px;
  margin-top: 2px;
  background-color: #5c5c5c;
}
/* ----LVL3 PAGE---- */


/* ----2ND LVL3 PAGE---- */
.jearectangle1 {
  position: static;
  float: left;
  width: 200px;
  height: 724px;
  margin-top: -8px;
  margin-left: -10px;
  background-color: #98ced0;
}

.jearectangle2 {
  position: static;
  float: right;
  width: 200px;
  height: 724px;
  margin-top: -704px;
  margin-left: -10px;
  background-color: #98ced0;
}

.nametraits2 {
  margin-left: 280px;
  margin-top: -16px;
}

.jeatraitsrectangle {
  width: 260px;
  height: 380px;
  margin-top: -330px;
  margin-left: 232px;
  border-radius: 15px;
  background-color: #98ced0;
}
/* ----2ND LVL3 PAGE---- */


/* ----3RD LVL3 PAGE---- */
.ninrectangle1 {
  position: static;
  float: left;
  width: 200px;
  height: 724px;
  margin-top: -8px;
  margin-left: -10px;
  background-color: #f9c778;
}

.ninrectangle2 {
  position: static;
  float: right;
  width: 200px;
  height: 724px;
  margin-top: -723px;
  margin-left: -10px;
  background-color: #f9c778;
}

.sublinks2 {
  margin-left: 1075px;
  margin-top: -75px;
}

.nametraits3 {
  margin-left: 240px;
  margin-top: -16px;
}

.nintraitsrectangle {
  width: 260px;
  height: 380px;
  margin-top: -330px;
  margin-left: 232px;
  border-radius: 15px;
  background-color: #f9c778;
}

.imgcharacter2 {
  width: 260px;
  height: 380px;
  margin-top: -250px;
  margin-left: 726px;
}
/* ----3RD LVL3 PAGE---- */


/* ----4TH LVL3 PAGE---- */
.bairectangle1 {
  position: static;
  float: left;
  width: 200px;
  height: 724px;
  margin-top: -8px;
  margin-left: -10px;
  background-color: #a4d399;
}

.bairectangle2 {
  position: static;
  float: right;
  width: 200px;
  height: 724px;
  margin-top: -704px;
  margin-left: -10px;
  background-color: #a4d399;
}

.nametraits4 {
  margin-left: 266px;
  margin-top: -16px;
}

.baitraitsrectangle {
  width: 260px;
  height: 380px;
  margin-top: -330px;
  margin-left: 232px;
  border-radius: 15px;
  background-color: #a4d399;
}

.imgcharacter3 {
  width: 260px;
  height: 380px;
  margin-top: -203px;
  margin-left: 726px;
}
/* ----4TH LVL3 PAGE---- */