*{
    margin: 0;
    padding: 0;


}
/*⋆⭒𓆟⋆｡˚𖦹𓆜✩⋆⋆⭒𓆟⋆｡˚𖦹𓆜✩⋆COISAS GERAIS⋆⭒𓆟⋆｡˚𖦹𓆜✩⋆⋆⭒𓆟⋆｡˚𖦹𓆜✩⋆*/

body{
    font-family:"Cascadia Code";
 
  
}


a{
    color: white;
}
a:link{
    text-decoration: none;
    color:white;
    
}
a:hover{
    text-decoration: none;
    color:#ffffff;
    
}


/*⋆⭒𓆟⋆｡˚𖦹𓆜✩⋆⋆⭒𓆟⋆｡˚𖦹𓆜✩⋆FONTS⋆⭒𓆟⋆｡˚𖦹𓆜✩⋆⋆⭒𓆟⋆｡˚𖦹𓆜✩⋆*/

@font-face {
    font-family: "Cascadia Code";
    src: url(fonts/CascadiaCode-VariableFont_wght.woff2);
}
@font-face {
    font-family: "Cascadia Code";
    src: url(fonts/CascadiaCode-Italic-VariableFont_wght.woff2);
    font-style: italic;
}
@font-face {
    font-family: "Cascadia Code";
    src: url(fonts/CascadiaMonoPL-Bold.woff2);
    font-weight: 700;
}
@font-face {
    font-family: "Goozete";
    src: url(fonts/Goozette.woff);
}

/*⋆⭒𓆟⋆｡˚𖦹𓆜✩⋆⋆⭒𓆟⋆｡˚𖦹𓆜✩⋆HEADER⋆⭒𓆟⋆｡˚𖦹𓆜✩⋆⋆⭒𓆟⋆｡˚𖦹𓆜✩⋆*/


header{ 
    display: flex;
    max-width: 100%;
    background-color: black;
    height: 2rem;
    justify-content: center;
    align-items: center;
    color: white;
    font-weight: Bold;
    border-bottom: 3px solid #ffffff;
}

header nav ul {
    display: flex;
    justify-content: space-evenly;
    gap: 19rem;
    list-style:none;
}

header .selected-page-1{
    color: #174e8d;
}

header .selected-page-2{
    color: #00A8AF;
}
header .selected-page-3 {
    color: #0a6fa1;
}
@media (max-width:768px){
     header{
         height: 4rem;
         text-align: center;
         width: 100%;
     }
     header nav ul {
         display: flex;
         justify-content: space-evenly;
         gap: 2rem;
         list-style:none;
         font-size: 0.7rem;
         padding:0 0.5rem;
         }

}
/*⋆⭒𓆟⋆｡˚𖦹𓆜✩⋆⋆⭒𓆟⋆｡˚𖦹𓆜✩⋆FOOTER⋆⭒𓆟⋆｡˚𖦹𓆜✩⋆⋆⭒𓆟⋆｡˚𖦹𓆜✩⋆*/

footer{
    display: flex;  
    justify-content: center;
    align-items: center;
    max-width: 100%;
    background-color: black;
    height: 2rem;
    color: white;
    font-weight: Bold;
    font-size: 1rem;
}

@media (max-width:768px){
    footer{
         height: 4rem;
         text-align: center;
          font-size: 0.7rem;
        padding:0 0.5rem;
    }
}



/*⋆⭒𓆟⋆｡˚𖦹𓆜✩⋆⋆⭒𓆟⋆｡˚𖦹𓆜✩⋆MAIN-HOME-PAGE⋆⭒𓆟⋆｡˚𖦹𓆜✩⋆⋆⭒𓆟⋆｡˚𖦹𓆜✩⋆*/

main>section{
    width: 100%;
    overflow: hidden;
    
}

.nexus-text{
    display: flex;
    align-items: center;
    font-family: "Goozete";
    color: white;
    font-size: 3rem;
    height: 10rem;
    
}

/*⋆---future/nexus banner---⋆⋆*/

main .future-nexus{
    height: 15rem;
    background-color: #00A8AF;
      border-bottom:3px solid #ffffff ;
    width: 100%;
    overflow: hidden;
}

main .future-nexus .shoal-fish{
    height: 15rem;
    width: 5rem;
    display: flex;
    align-items: center;
}
main .future-nexus .shoal-fish img{
   width: 15rem;
}
main .future-nexus .nexus-text{
    font-size: 3rem;
    display: flex;
    height: 15rem;
    align-items: center;
}

/*⋆---Manifest CONNECTION---⋆⋆*/

main .group-nexus{
    border-bottom:3px solid #ffffff ;
    width: 100%;
    overflow: hidden;
    height: 15rem;
    background-color: #0a6fa1;
    display: block;
}

main .group-nexus .shoal-fish{
    height: 15rem;
    display: flex;
    align-items: center;
}

main .group-nexus .shoal-fish img{
    height: 7rem;
}

main .group-nexus .nexus-text{
    display: flex;
    justify-content: center;
    height: 15rem;
    align-items: center;
}


/*⋆---MAP CONNECTION---⋆⋆*/


main .map-nexus{
    border-bottom:3px solid #ffffff ;
    width: 100%;
    overflow: hidden;
    height: 15rem;
    background-color: #174e8d;

}
main .map-nexus .shoal-fish {
    height: 15rem;
    display: flex;
    align-items: center;
}

main .map-nexus .shoal-fish img {
  height: 12.5rem;

}

main .map-nexus .nexus-text{
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: "Goozete";
    color: white;
    font-size: 4rem;
    height: 15.4rem;
    
}

@media (max-width:768px){
    main .group-nexus .nexus-text{
        font-size: 2.5rem;
    }
    main .group-nexus .shoal-fish{
        display: none;
        
    }
    
    main .future-nexus .nexus-text{
        font-size: 2.5rem;
    }
    main .future-nexus .shoal-fish{
        display: none;
    }
    main .map-nexus .nexus-text{
        font-size: 3rem;
        text-align: center;
    }
    main .map-nexus .shoal-fish {
        display: none;
    }
    .row{
        flex-direction: column;
    }
    

}

/*⋆⭒𓆟⋆｡˚𖦹𓆜✩⋆⋆⭒𓆟⋆｡˚𖦹𓆜✩⋆MAIN ANIMATIONS⋆⭒𓆟⋆｡˚𖦹𓆜✩⋆⋆⭒𓆟⋆｡˚𖦹𓆜✩⋆*/

@keyframes billboard {
    from {
        transform: translateX(-1400px);
    }

    to {
        transform: translateX(1400px)
    }
}

.bill-board-1{
    animation-name: billboard;
    animation-duration:19s ;
    animation-direction: normal;
    animation-iteration-count: infinite;

}

.bill-board-2{
    animation-name: billboard;
    animation-duration:25s ;
    animation-direction: normal;
    animation-iteration-count: infinite;

}
.bill-board-3{
    animation-name: billboard;
    animation-duration:14s ;
    animation-direction: normal;
    animation-iteration-count: infinite;

}
@media (max-width:768px){
       @keyframes billboard {
     from {
        transform: translateX(-400px);
     }

     to {
        transform: translateX(600px)
     }
     }
 .bill-board-1{
    animation-name: billboard;
    animation-duration:15s ;
    animation-direction: normal;
    animation-iteration-count: infinite;

}

 .bill-board-2{
    animation-name: billboard;
    animation-duration:15s ;
    animation-direction: normal;
    animation-iteration-count: infinite;

}
 .bill-board-3{
    animation-name: billboard;
    animation-duration:14s ;
    animation-direction: normal;
    animation-iteration-count: infinite;

}
}

/*⋆⭒𓆟⋆｡˚𖦹𓆜✩⋆⋆⭒𓆟⋆｡˚𖦹𓆜✩⋆MAIN-MAP-PAGE⋆⭒𓆟⋆｡˚𖦹𓆜✩⋆⋆⭒𓆟⋆｡˚𖦹𓆜✩⋆*/

.map-background{
     background-color: #174e8d;
}


main.map-box{
    background-color: #174e8d;
    height: 170dvh;
}

main.map-box .container{
    padding: 3rem;
}

main.map-box .question-box{
    display: flex;
    flex-direction: column;
    align-items: center;
    aspect-ratio: 4/1.25;
    background-color: #ffffff;
    padding: 1.5rem;
    border-radius: 1rem;
    margin-bottom: 2rem;
    
}
main.map-box .question-box .question-box-request{
   margin-bottom: 0.5rem;
}

main.map-box .question-box .question-box-question{
    font-size: 2rem;
    text-align: center;
    font-weight: 900;
    margin-bottom: 0.7rem;
}

main.map-box .question-box button{
    background-color: #174e8d;
    color: #ffffff;
    padding: 0.5rem;
}
main.map-box .question-box textarea{
    margin-bottom: 0.5rem;
}
#map{
   height: 100%;
   margin: 31rem 2rem 2rem 2rem;
}

@media (max-width:768px){

  main.map-box .container{
    padding: 2rem;
}
  textarea{
   width: 90%;
   margin-bottom: 0.1rem;
 }
 label{
    font-size: 0.6rem;
    margin-bottom: 0.1rem;
 }
 main.map-box .question-box {
    aspect-ratio: 4/1.5; 
    margin-right: 1.5rem;
    padding: 0.7rem;
    
 }
 button{
    font-size: 0.7rem;
      padding: 0.3rem;
      width: 50%;
      height: 30%;
 }
 
 main.map-box .question-box .question-box-request{
    font-size: 0.7rem;
 }
 main.map-box .question-box .question-box-question{
    font-size: 1rem;
    padding: 0.3rem;
 }
 #map{
    margin-top: 24rem;
    height: 100%;
  
 }
 .map-footer{
    display: none;
 }
}
/*⋆⭒𓆟⋆｡˚𖦹𓆜✩⋆⋆⭒𓆟⋆｡˚𖦹𓆜✩⋆IDENTITY-PAGE⋆⭒𓆟⋆｡˚𖦹𓆜✩⋆⋆⭒𓆟⋆｡˚𖦹𓆜✩⋆*/

main .identity-header{
    background-color: #00A8AF;
    width: 100%;
}

main .identity-header .identity-title{
    font-family: "Goozete";
    color: white;
    font-size: 1.9rem;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 10rem;
  
}

main .identity-header .identity-fish {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 8rem;
}

main .identity-fish img{
  max-width: 7rem;
}

main .identity-tutorial{
    background-color: white;
}

main .identity-tutorial .tutorial-text{
    margin: 2rem 0;
    text-align: center;
}
main .identity-tutorial .tutorial-text p{
    margin-bottom: 1rem;
}
main .identity-tutorial .tutorial-text img{
     width: 30rem;
    padding: 1rem;
    margin-bottom: 1rem;
}

main .identity-tutorial .step-number{
      font-family: "Goozete";
    color: #00A8AF;
    font-size: 2.5rem;
    text-align: center;
    margin-top: 2rem;
}
main .identity-tutorial .tutorial-img{
    display: flex;
    justify-content: center;
}

main .identity-tutorial .tutorial-img img{
    width: 30rem;
    padding: 1rem;
    margin-bottom: 1rem;
}

main .identity-tutorial .mng{
    font-weight: bold;
    text-align:center;
    margin-bottom: 2rem;
}

main .identity-tutorial .mng a{
 color: #00A8AF;
 text-decoration:underline;
 
}
@media(max-width:768px){

    main .identity-header .identity-title{
        font-size: 2rem;
        text-align: center;
        padding-right: 1rem;
    }
    
    main .identity-fish img{
        display: none;
    }

    main .identity-tutorial .tutorial-img img{
        width: 50%;
    }
    main .identity-tutorial .tutorial-text{
    margin: 2rem 1rem;
    text-align: center;
    }
    main .identity-tutorial .tutorial-text p{
    margin-bottom: 1rem;
      padding-right: 1rem;
    }
    main .identity-tutorial .tutorial-text img{
    width: 50%;
    }
    main .identity-tutorial .mng{
        padding-right: 1rem;
    }
}

/*⋆⭒𓆟⋆｡˚𖦹𓆜✩⋆⋆⭒𓆟⋆｡˚𖦹𓆜✩⋆MANIFEST-PAGE⋆⭒𓆟⋆｡˚𖦹𓆜✩⋆⋆⭒𓆟⋆｡˚𖦹𓆜✩⋆*/

main .manifest-heading{
    display: block;
    height: 10rem;
    background-color: #0a6fa1;
}

main .manifest-heading .manifest-fishy{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 10rem;
}

main .manifest-heading .manifest-title{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 10rem;
    font-family: "Goozete";
    color: white;
    font-size: 3rem;
    padding-top: 0.5rem;
}

main .manifest-10-commandments{
    background-color: #ffffff;
    margin-top: 2rem ;
    margin-bottom: 4rem;
  
}

main .manifest-10-commandments .c-number{
    font-family: "Goozete";
    color: #0a6fa1;
    font-size: 2.5rem;
    text-align: center;
    margin-top: 1rem;
}


main .manifest-10-commandments .c-text{
    color: #0a6fa1;
    font-size: 2rem;
    font-weight: bold;
    text-align: center;
    margin: 1rem 0;
}

main .manifest-10-commandments .c-explanation{
    color: black;
    text-align: center;
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    
    
}
@media(max-width:768px){
    main .manifest-heading .manifest-fishy{
        display: none;
    }
    main .manifest-heading .manifest-title{
        font-size: 1.5rem;
        padding-right: 1rem;
    }
    main .manifest-10-commandments .c-number{
     font-size: 2.5rem;
     padding-right: 1rem;
   
}


main .manifest-10-commandments .c-text{
    font-size: 1.5rem;
    font-weight: bold;
    padding-right: 1rem;
}

main .manifest-10-commandments .c-explanation{
    font-size: 1rem;
    padding-right: 1rem;
}
}