*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    color: black;
}

html,body{
    height: 100%;
    width: 100%;
}

@font-face {
    font-family: Arisefont;
    src: url(XRXV3I6Li01BKofINeaB.woff2);
}

div {
    font-family: Arisefont;
}

h4 {
    font-size: larger;
    color: #0064C0;
    position: absolute;
    left: 22%;
    top: 26%;
}

h5 {
    font-size: larger;
    color: #303335;
    position: absolute;
    left: 22%;
    top: 24%;
}

h6 {
    font-size: larger;
    color: #303335;
    position: absolute;
    left: 24%;
    top: 57%;
}

h1 {
    font-size: larger;
    color: #303335;
    position: absolute;
    left: 24%;
    top: 77%;
}

#box{
    width: 33.6%;
    background-color: white;
    overflow: hidden;
    position: fixed;
    
}
#b2{
    height: 300px;
    width: 66.4%;
    background-color: white;
    overflow: auto;

}

#main{
    display: flex;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

#centline{
    height: 128%;
    width: 1px;
    background-color: #CED9E3;
    position: absolute;
    right: 66.7%;
}

#midline {
    height: 1px;
    width: 94%;
    background-color: #6EBAFF;
    position: absolute;
    left: 3%;
    bottom: 37%;
}

#centbox{
    height: 77%;
    width: 53%;
    background-color: #0E7EE5;
    border-radius: 10px;
    position: absolute;
    bottom: 12.6%;
    left: 39.8%;
}

#b1{
    height: 55%;
    width: 25%;
    background-color: #EDF2F5;
    border-radius: 5%;
    position: absolute;
    right: 71.1%;
    top: 10%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    position: fixed;
}

#ib1{
    height: 17%;
    width: 90%;
    background-color: #B0D9FF;
    position: absolute;
    right: 6%;
    top: 10%;
    border-radius: 50px;

}
#ib2{
    height: 17%;
    width: 90%;
    /* background-color:#B0D9FF ; */
    position: absolute;
    right: 6%;
    top: 33%;
    border-radius: 50px;
}

#im{
    position: absolute;
    top: 29%;
    left: 8%;

}

#im1{
    position: absolute;
    top: 29%;
    left: 8%;
}

#im2{
    position: absolute;
    left: 12%;
    top: 57.5%;
    
}

#im3{
    position: absolute;
    left: 12%;
    top: 77.4%;
}

p {
    position: absolute;
    left: 17%;
    top: 9%;
    color: #FFFFFF;
    font-weight: bolder;
    font-size: larger;
}

p1 {
    position: absolute;
    left: 8%;
    top: 8%;
    color: #FFFFFF;
    font-size: medium;
    font-weight: bolder;
}

p2 {
    position: absolute;
    left: 8%;
    top: 18%;
    color: #FFFFFF;
    font-size: medium;
    font-weight: 500;
}

p3 {
    position: absolute;
    left: 8%;
    top: 34%;
    color: white;
    font-size: medium;
    font-weight: bolder;
}
p4 {
    position: absolute;
    left: 8%;
    top: 44%;
    color: white;
    font-size: medium;
    font-weight: 500; 
}

p5 {
    position: absolute;
    left: 8%;
    top: 70%;
    color: white;
    font-size: medium;
    font-weight: bolder;
}

#centim1 {
    position: absolute;
    left: 3%;
    top: 8%;
    width: 20px;
}

#centim2 {
    position: absolute;
    left: 3%;
    top: 34%;
    width: 20px;
}

#centim3 {
    position: absolute;
    left: 3%;
    top: 76%;
    width: 20px;
}

#expbox {
    position: absolute;
    background-color: #3090E6;
    height: 40%;
    width: 46.4%;
    left: 43%;
    bottom: 30%;
    border-radius: 10px;

}

#krit {
    position: absolute;
    left: 6%;
    top: 5.3%;
    border-radius: 50%;
}

#startbox {
    position: absolute;
    height: 10%;
    width: 87%;
    left: 6.5%;
    top: 85%;
    background-color: #F3D018;
    border-radius: 10px;
}

p6 {
    position: absolute;
    top: 23%;
    left: 43.5%;
    color: #ED8E00;
    font-weight: bolder;
    font-size: medium;
}

a {
    color: #74630B;
}

p7 {
    position: absolute;
    top: 110%;
    right: 30%;
    color: #ED8E00;
    font-weight: bolder;
    font-size: larger;
}

#iim {
    position: absolute;
    right: 78%;
    top: 110%;
    max-width: fit-content;
    height: 8%;
}

p8 {
    position: absolute;
    left: 39.8%;
    top: 94%;
    color: #08519F;
    font-weight: bolder;
    font-size: larger;
}

#testbox {
    position: absolute;
    height: 18%;
    width: 10%;
    background-color: #E5F1FF;
    top: 101%;
    left: 40%;
    border-radius: 10px;
}

#discussioncorner {
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: #E5F1FF;
    top: 0%;
    left: 106%;
    border-radius: 10px;
}

#calculationgame {
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: #E5F1FF;
    top: 0%;
    left: 212%;
    border-radius: 10px;
}

#revisechapter {
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: #E5F1FF;
    top: 0%;
    left: 318%;
    border-radius: 10px;
}

#dedicatedmentor {
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: #E5F1FF;
    top: 0%;
    left: 424%;
    border-radius: 10px;
}

#tbox {
    position: absolute;
    left: 38%;
    top: 27%;
}

#dcbox {
    position: absolute;
    left: 38%;
    top: 27%;
}

#cgbox {
    position: absolute;
    left: 38%;
    top: 27%;
}

#rcbox {
    position: absolute;
    left: 38%;
    top: 27%;
}

#dmbox {
    position: absolute;
    left: 38%;
    top: 27%;
}

p9 {
    position: absolute;
    top: 107%;
    left: 39%;
    font-size: medium;
    font-weight: 600;
    color: #08519F;
}

p14 {
    position: absolute;
    top: 128%;
    left: 40%;
    font-size: medium;
    font-weight: 600;
    color: #08519F;
}

p10 {
    position: absolute;
    top: 107%;
    left: 25%;
    font-size: medium;
    font-weight: 600;
    color: #08519F;   
}

p15 {
    position: absolute;
    top: 128%;
    left: 30%;
    font-size: medium;
    font-weight: 600;
    color: #08519F;
}

p11 {
    position: absolute;
    top: 107%;
    left: 25%;
    font-size: medium;
    font-weight: 600;
    color: #08519F;
}

p16 {
    position: absolute;
    top: 128%;
    left: 35%;
    font-size: medium;
    font-weight: 600;
    color: #08519F;
}

p12 {
    position: absolute;
    top: 107%;
    left: 25%;
    font-size: medium;
    font-weight: 600;
    color: #08519F;
}

p17 {
    position: absolute;
    top: 128%;
    left: 22%;
    font-size: medium;
    font-weight: 600;
    color: #08519F;
}

p13 {
    position: absolute;
    top: 107%;
    left: 25%;
    font-size: medium;
    font-weight: 600;
    color: #08519F;
}

p18 {
    position: absolute;
    top: 128%;
    left: 35%;
    font-size: medium;
    font-weight: 600;
    color: #08519F;
}