html, body {
    overflow: hidden;
   }
   
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Helvetica, sans-serif;
}

.main-container {
    width: 100%;
    height: 100vh;
  }

section {
    height: 100vh;
    width: 100%;
  }
  
.hidden {
    opacity: 0;
    cursor: auto !important;
    transition: all 0.3s ease-out;
  }
  
.nothidden {
    z-index: 2;
    opacity: 1;
    transition: all 1s ease-in;
  }

.texts {
    display: flex;
    flex-direction: column;
  }

body{
    background-color: #B7D3C1;
}

p{
    margin-top: 12%;
    line-height: 1.3;
}

ul{
    margin-top: 15%;
    line-height: 1.3;
}

pre{
    display: inline-block;
    margin-left:1em;
}

a{
    color: #022F40;
    text-decoration: none;
}


.hidden-li {
    display: none;
    color: #022F40;
}


/*

.hidden-li2 {
    display: none;
}

.img-container2 {
    position: relative;
    width: 100%; 
    height: 100vh; 
}

#myCanvas {
    display: block; 
}

.inter1{
    top: 70%;
    left: 40%;
    margin-top: 3%;
    pointer-events: auto;
    font-size: 1.3em;
    font-weight: bold;


*/

.container, .container2, .container3, .container4, .container5, .container6{
    position: absolute;
    text-align: left;
}

.titulo{
    position: absolute;
    top: 26%;
    left: 10%;
    font-size: 2.4em;
    color: #022F40;
    line-height: 1.25;
}

.about-titulo, .problems-titulo, .likes-titulo, .school-titulo, .home-titulo{
    position: absolute;
    top: 20%;
    left: 10%;
    font-size: 2em;
    color: #022F40;
}


.about, .problems, .likes, .school, .home{ 
    position: absolute;
    top: 23%;
    left: 15%;
    font-size: 1.7em;
    color: #022F40;
}

.img1, .img2, .img3, .img4, .img5, .img6{
    width: 100%;
}

.paginicial{
    top: 3%;
    left: 45%;
    margin-top: 3%;
    font-size: 1.5em;
    font-weight: bold;
}

.botao1{
    top: 65%;
    left: 10%;
    font-size: 1.3em;
}

.botao2{
    top: 51%;
    left: 10%;  
}

.botao3{
    top: 58%;
    left: 10%;
}

.botao4{
    top: 49%;
    left: 10%; 
}

.botao5{
    top: 60%;
    left: 10%;
}

.botao6{
    top: 53%;
    left: 10%;  
}

.botao2, .botao3, .botao4, .botao5, .botao6{
    margin-top: 3%;
    pointer-events: auto;
    font-size: 1.3em;
    font-weight: bold;

}

.botao1, .botao2, .botao3, .botao4, .botao5, .botao6,  .paginicial{
    position: absolute;
    background-color: #B7D3C1;
    color: #022F40;
    text-align: center;
    text-decoration: none;
    padding: 10px 30px;
    border: 6px solid #022F40;
    border-radius: 100px;
    transition-duration: 0.4s;
    cursor: pointer;
}

.botao1:hover, a:hover, .botao2:hover, .botao3:hover, .botao4:hover, .botao5:hover, .botao6:hover, .paginicial:hover{
    background-color: #022F40;
    color: #B7D3C1;
    
}

.up{
    position: absolute;
    top: 5%;
    left: 3%;
}

.down{
    position: absolute;
    top: 88%;
    left: 3%;
  
}

.up, .down{
    display: block;
    background-color: #B7D3C1;
    color: #022F40;
    text-align: center;
    text-decoration: none;
    padding: 10px 30px;
    border: 5px solid #022F40;
    border-radius: 100px;
    transition-duration: 0.4s;
    cursor: pointer;
}

.up:hover, .down:hover{
    background-color: #022F40;
    color: #B7D3C1;
}

.text-size{
    position: absolute;
    top: 8%;
    right: 3%;
    transform: translateY(-50%);
}

.A1{
    top: 9%;
    right: 14%;
    font-size: 1em;
    padding: 5px 10px;
    border: 4px solid #022F40;
    font-weight: bold;
}

.A2{
    top: 8%;
    right: 9%;
    font-size: 1.4em;
    padding: 7px 12px;
    border: 4.5px solid #022F40;
    font-weight: bold;
    
}
.A3{
    top: 20%;
    right: 3%;
    font-size: 1.8em;
    padding: 8px 14px;
    border: 5px solid #022F40;
    font-weight: bold;
}

.A1, .A2, .A3{
    background-color: #B7D3C1;
    color: #022F40;
    text-align: center;
    text-decoration: none;
    border-radius: 100px;
    transition-duration: 0.4s;
    cursor: pointer;
    pointer-events: auto;
    font-weight: bold;
}

.A1:hover, .A2:hover, .A3:hover{
    background-color: #022F40;
    color: #B7D3C1;
}