#uni{
    padding: 0;
    margin: 0;
   }
 
   
div{
    display: block;
}

#ss{
    height: 730px;
    padding: 0;
}

#u34{
    position: absolute;
    top:50px;
    left: 70px;
    width: 700px;
    height: 700px;
}

#firsthalf{
    background-color: #6497b1;
    width: 1521px;
    height: 754px;
    position: relative;
    right:10px;
    bottom:10px;
    background-repeat:no-repeat;
    background-position: center;
    background-size: cover;
    padding: 0;
    margin: 0;
    border:0px;
}

#swipe{
    background: #b3cde0;
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
    opacity: 0.6;
    width: 500px;
    height: 400px;
    font-size: 40px;
    font-family: 'Acme';
    position: relative;
    left:800px;
    bottom: 600px;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 30px;

}


#user{
    width: 150px;
    height: 150px;
    position: absolute;
    left: 980px;
    bottom: 510px;
}

#l1{
    position: absolute;
    left:1008px;
    top:280px;
    font-family: 'Roboto Slab', serif;
    font-weight: 400;
    font-size: 20px;
}

#username{
    position: absolute;
    left: 960px;
    top: 340px;
    width: 200px;
    height: 50px;
    font-family: 'Kantumruy';
}

#mf{
    position:absolute;
    width: 200px;
    height: 30px;
    padding: 0;
    margin: 0;
    font-family: 'Kantumruy';
}



#em{
    position:absolute;
    width: 200px;
    height: 30px;
    padding: 0;
    margin: 0;
    font-family: 'Kantumruy';
}

#load{
    position:absolute;
    top:430px;
    left:1010px;
    background-color:#054054;
    border: none; /* Remove borders */
    padding-left: 3px;
    padding-right: 3px;
    font-size: 19px ;/* Set a font size */
    border-radius: 12px;
    height: 40px;
    width: 100px;
    font-family: 'Barlow';
    color: white;
    vertical-align:middle;
    
}

#load:hover{
    background-color: #10566d;
}


#ikigaimain{
   display: none;
}

#butimg{
    animation: buttonRotate .6s;
    position:absolute;
    bottom: 8px;
    right: 8px;
}

@keyframes buttonRotate{
    100%{
        transform: rotate(90deg);
    }
}


#ikigaimain{
    width: 1519px;
    height: 750px;
    background-repeat:no-repeat;
    background-position: center;
    background-size: cover;
    padding: 0;
    margin: 0;
    position: relative;
    bottom: 8px;
    right: 8px;
}



#top-nav{
    width: 910px;
    height: 50px;
    position: relative;
    left: 600px;
    bottom:680px;
    font-size: 20px;
    font-family: 'Roboto Slab', serif;
    font-weight:400;
}

#n1{
    position: relative;
    left:250px;
    top:12px;
    text-decoration: none;
    color:#054054;
    width: 140px;
    height: 40px;
    padding: 6px;
    text-align: center;
    vertical-align: middle;
    
   
}

#n2{
    position: relative;
    left: 350px;
    top:12px;
    text-decoration: none;
    color:#054054;
    width: 140px;
    height: 40px;
    padding: 6px;
    text-align: center;
    vertical-align: middle;
    
    
}

#n3{
    position: relative;
    left: 450px;
    top:12px;
    text-decoration: none;
    color:#054054;
    width: 140px;
    height: 40px;
    padding: 6px;
    text-align: center;
    vertical-align: middle;
    text-decoration: none !important;
    
}



#premain{
    height: 700px;
    position: relative;
    bottom:630px;
}

#pm1{
    height: 100px;
    font-family: 'Barlow';
    font-size: 70px;
    position: absolute;
    left: 200px;
    top:100px;
}

#pm2{
    height: 80px;
    position: absolute;
    top:180px;
    left:204px;
    font-family: 'Barlow';
    font-weight: 500;
    font-size: 35px;
}

#pm3{
    height: 50px;
    font-weight:300;
    font-size: 20px;
    font-family: 'Roboto Slab', serif;
    position: absolute;
    top: 230px;
    left: 204px;
}

#flowerpot{
    position: absolute;
    bottom: 150px;
    left: 850px;
    width: 500px;
    height: 500px;
}


#headmain{
    font-family: 'Barlow';
    font-size: 40px;
    width: 400px;
    height: 50px;
    position: relative;
    bottom: 680px;
    left: 556px;
    color: white;
    font-weight: 600;
    text-align: center;
    vertical-align: middle;
    background-color:#054054;
    padding: 9px;
}



.dividemain{
    height: 700px;
    width: 1500px;
}


.div1{
    width: 1519px;
    height: 700px;
    clip-path: polygon(0 0, 100% 0, 100% 100%,0 calc(100%-80px));
    background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
    opacity: 0.5;
}
.div2{
    width: 1519px;
    height: 500px;
    clip-path: polygon(0 0, 100% 80px, 100% 100%, 0 100%);
    margin-top: -80px;
    background: white;

}


#boxmain{
    width: 1200px;
    height: 1300px;
    background: linear-gradient(to right, #74ebd5 0%, #9face6 100%);
    position: relative;
    bottom: 660px;
    left:160px;
    border-radius: 12px;
}

#LL{
    width: 500px;
    height: 450px;
    position: relative;
    left:50px;
    top:50px;
    background: rgba(255,255,255,0.4);
    backdrop-filter: blur(10px);
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.2);
}

#GG{
    
    width: 500px;
    height: 450px;
    position: relative;
    left:650px;
    bottom: 400px;
    background: rgba(255,255,255,0.4);
    backdrop-filter: blur(10px);
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.2);

}

#PP{
    width: 500px;
    height: 450px;
    position: relative;
    bottom: 350px;
    left:50px;

    background: rgba(255,255,255,0.4);
    backdrop-filter: blur(10px);
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.2);

}

#NN{
    width: 500px;
    height: 450px;
    position: relative;
    bottom: 800px;
    left: 650px;

    background: rgba(255,255,255,0.4);
    backdrop-filter: blur(10px);
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.2);
}

#Lhead , #Ghead , #Phead , #Nhead{
   position: absolute;
   left: 66px;
   top: 20px;
   width: 350px;
   height: 30px;
   font-size: 24px;
   text-align: center;
   vertical-align: middle;
   color: #054054;
   background: rgba(255,255,255,0.4);
   backdrop-filter: blur(10px);
   border-radius: 10px;
   border: 1px solid rgba(255,255,255,0.2);
   padding: 7px;
   font-family: 'Roboto Slab', serif;
   font-weight: 100px;
}

#divmainL , #divmainG , #divmainP , #divmainN{
    position: relative;
    left: 140px;
    top: 120px;
    width: 228px;
    height: 300px;
}

#L1 , #G1 , #P1 , #N1{
    width: 220px;
    height: 25px;
    margin-top: 14px;
}

#L2 , #G2 , #P2 ,#N2{
    width: 220px;
    height: 25px;
    margin-top: 14px;
}

#L3 , #G3 , #P3 , #N3{
    width: 220px;
    height: 25px;
    margin-top: 14px;
}

#L4 , #G4 , #P4 , #N4{
    width: 220px;
    height: 25px;
    margin-top: 14px;
}

#L5 , #G5 , #P5 , #N5{
    width: 220px;
    height: 25px;
    margin-top: 14px;
}

#bL1 , #bG1 , #bP1 , #bN1{
    position: relative;
    width: 150px;
    height: 33px;
    top: 80px;
    left: 73px;
    font-family: 'Barlow';
    background-color:#6497b1;
    border: none; /* Remove borders */
    padding-left: 3px;
    padding-right: 3px;
    font-size: 19px ;/* Set a font size */
    border-radius: 12px;
    color: white;
    vertical-align:middle;
}

#bL1:hover , #bG1:hover , #bP1:hover , #bN1:hover{
    background-color: #74a6be;
}

#bL2 , #bG2 , #bP2 , #bN2{
    position: relative;
    width: 150px;
    height: 33px;
    top: 80px;
    left: 110px;
    font-family: 'Barlow';
    background-color:#6497b1;
    border: none; /* Remove borders */
    padding-left: 3px;
    padding-right: 3px;
    font-size: 19px ;/* Set a font size */
    border-radius: 12px;
    color: white;
    vertical-align:middle;
}

#bL2:hover , #bG2:hover  ,#bP2:hover , #bN2:hover{
    background-color: #74a6be;
}

#bFindIki{
    position: relative;
    width: 130px;
    height: 45px;
    bottom: 762px;
    left: 452px;
    font-family: 'Barlow';
    background-color:#054054;
    border: none; /* Remove borders */
    padding-left: 3px;
    padding-right: 3px;
    font-size: 19px ;/* Set a font size */
    border-radius: 12px;
    color: white;
    vertical-align:middle;

}

#bFindIki:hover{
    background-color: #10566d;
}

#remALL{
    position: relative;
    width: 130px;
    height: 45px;
    bottom: 762px;
    left: 492px;
    font-family: 'Barlow';
    background-color:#054054;
    border: none; /* Remove borders */
    padding-left: 3px;
    padding-right: 3px;
    font-size: 19px ;/* Set a font size */
    border-radius: 12px;
    color: white;
    vertical-align:middle;
}

#remALL:hover{
    background-color: #10566d;
}

#imsg{
    position: relative;
    width: 700px;
    vertical-align: middle;
    height: auto;
    text-align: center;
    bottom: 750px;
    font-size: 30px;
    left: 254px;
    color: #054054;
    background: rgba(255,255,255,0.4);
    backdrop-filter: blur(10px);
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.2);
}

#imsg2{
    position: relative;
    width: 700px;
    vertical-align: middle;
    height: auto;
    text-align: center;
    bottom: 750px;
    font-size: 30px;
    left: 254px;
    color: #054054;
    background: rgba(255,255,255,0.4);
    backdrop-filter: blur(10px);
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.2);
    display: none;
}

#symm2{
   position: absolute;
   top: 1386px;
   left: 557px;
   width: 100px;
   height: 100px;
}

 /* 
#graphs{
    width: 1519px;
    height: 700px;
    position: relative;
    bottom: 545px;

}

#graphmain{
    font-family: 'Barlow';
    font-size: 40px;
    width: 803px;
    height: 97px;
    position: relative;
    left: 350px;
    color: white;
    font-weight: 600;
    text-align: center;
    vertical-align: middle;
    background-color: #054054;
    padding: 9px;
}
#renderButton{
    position: relative;
    top: 540px;
    left: 952px;
    width: 150px;
    height: 40px;
    font-family: 'Barlow';
    background-color:#6497b1;
    border: none; 
    padding-left: 3px;
    padding-right: 3px;
    font-size: 19px ;
    border-radius: 12px;
    color: white;
    vertical-align:middle;
}

#renderButton:hover{
    background-color: #74a6be;
}

#chartContainer{
    background-color: white;
    position: relative;
    top: 64px;
    left: 550px;

}

#graphimg{
    position: absolute;
    bottom: 40px;
    right: 1050px;
}

*/

#designby{
    width: 1518px;
    height: 252px;
    background-color:#054054;
    position: relative;
    bottom: 360px;
    padding-bottom: 0;
    margin-bottom: 0;
}

#d1{
    width: 800px;
    height: 140px;
    font-size: 14px;
    font-family: 'Roboto Slab', serif;
    font-weight:100;
    color: white;
    position: relative;
    left: 140px;
    top: 60px;
    text-align: justify;
}

#imd1{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 2px solid white;
    position: absolute;
    left: 20px;
    top: 70px;
}

#d12{
    padding-bottom: 4px;
    padding-top: 7px;
}

#d13{
    padding-bottom: 4px;
    font-size: 22px;
    font-weight: 300;
}

#d14{
    padding-bottom: 4px;
}

#d15{
    padding-bottom: 4px;
}

#d16{
    padding-bottom: 4px;
    padding-left: 30px;
    padding-top: 4px;
}

#d21{
    width: 30px;
    height: 30px;
    position: absolute;
    left:135px;
    top:165px;
}

#ds{
    font-size: 16px;
    font-family: 'Roboto Slab', serif;
    font-weight: 100;
    color: white;
    position: absolute;
    left:700px;
    bottom:117px;

}

#d22{
    width: 30px;
    height: 30px;
    position: absolute;
    left: 860px;
    bottom:110px;
    border: 2px solid whitesmoke;
}

#d23{
     width: 120px;
     height: 120px;
     border-radius: 50%;
     position: absolute;
     left:1300px;
     bottom: 70px;
     border: 2px solid white;
}

#d24{
    font-family: 'Roboto Slab', serif;
    color: white;
    position: absolute;
    left:1302px;
    bottom: 40px;
    font-size: 18px;
    padding: 0;
    font-weight: 300;
}