@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;700&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'DM Sans', sans-serif;
}

:root {
    font-size: 62.5%; /* 1rem = 10px */
}

html {
  scroll-behavior: smooth;
}

body::-webkit-scrollbar {
  width: 10px;
}

body::-webkit-scrollbar-thumb {
  background-color: #542D6B;
}

h1, h3 {
    text-transform: uppercase;
}

p, li {
    line-height: 28px;
    font-size: 1.6rem;
    color: #495057;
}

.center {
    max-width: max(1180px, 52%);
    padding: 0 4%;
    margin: 0 auto;
}

.w33 {
    width: 33%;
}

.w40 {
    width: 40%;
}

.w50 {
    width: 50%;
}

.w60 {
    width: 60%;
}

.w66 {
    width: 66%;
}

main {
    position: relative;

    background-color: #F9FBFC;
    height: 90vh;

    overflow: hidden;
}

#autoNav {
    padding: 20px 100px;

    position: fixed;
    z-index: 5;

    width: 100%;

}

#autoNav ul {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: flex-end;

    list-style: none;
}

#autoNav ul li {
    margin: 0 25px;
}

#autoNav ul li a {
    color: #542D6B;
    opacity: .7;
    text-decoration: none;
    font-size: 1.6rem;
    transition: opacity 0.4s;
}

#autoNav ul li a::after {
  content: '';
  width: 0%;
  height: 2px;
  background-color: #542D6B;

  position: relative;
  bottom: -20px;

  display: block;

  transition: width 0.2s;
}

#autoNav ul li a.active::after,
#autoNav ul li a:hover::after {
  padding-inline: 10;
  width: 100%;
}

#autoNav.scroll{
    background-color: rgb(255, 255, 255, 0.8);
    backdrop-filter: blur(15px);
    box-shadow: 0 0 8px 0 rgb(133, 133, 133);
}

#autoNav ul li a.active,
#autoNav ul li a:hover {
    opacity: 1;
    font-weight: bold;
}

#autoNav {
    transition: 200ms;
}

nav#autoNav .close-menu,
nav#autoNav .open-menu{
  display: none;
}

#textMain {
    position: relative;
    z-index: 2;
}

#textMain .center {
    display: flex;
    align-items: center;
    justify-content: left;

    height: 90vh;
}

#textMain h1 {
    position: relative;
    z-index: 3;

    max-width: 700px;
    font-size: 4.6rem;
    font-weight: 400;
    color: #011C40;
}

.img-main {
    position: absolute;
    bottom: -5px;
    right: 100px;
}

.img-main img {
    width: 580px;
}

.bg-main {
    background-color: #CEEEF2;
    width: 700px;
    height: 1300px;

    position: absolute;
    right: -200px;
    top: -150px;
    transform: rotate(45deg);
    z-index: 1;
}

#members {
  background-color: rgb(255, 250, 241, 0.6);
  backdrop-filter: blur(8px);
  
  border-radius: 7px;
  box-shadow: 0 0 8px 0 #DCE9E2;
  
  max-width: 800px;
  margin: 0 auto;
  padding: 30px 104px;
  
  position: relative;
  top: -100px;
  z-index: 4;
}

#members h2 {
    font-size: 1.6rem;
    color: #A558D1;
    text-transform: uppercase;

    margin-bottom: 30px;
}

.member-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.single-member {
    display: flex;
    align-items: center;
}

.img-member {
    margin-right: 15px;
}

.img-member img {
    width: 110px;
}

.name {
    font-size: 1.6rem;
    font-weight: bold;
    color: #03738C;
}

.instagram a {
    font-size: 1.3rem;
    color: #03738C;
    text-decoration: none;

    transition: .4s;
}

.instagram a:hover {
    color: #011126;
}

.line-members {
    width: 3px;
    height: 100px;

    background-color: #A558D1;
}

#about {
    padding: 20px 0 150px;
}

#about .center {
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.text-about {
    padding: 0 30px;
}

.text-about h3 {
    color: #A558D1;
    font-size: 1.4rem;

    margin-bottom: 15px;
}

.text-about h2 {
    font-size: 4rem;
    color: #212529;

    margin-bottom: 30px;
}

.text-about p {
    font-size: 1.6rem;
    color: #495057;
}

#metaverso .metaverso-box1 {
    position: relative;

    overflow: hidden;
    
    padding: 150px 0;

    background-color: #FFFAF1;
}

.metaverso-box1 .center {
    position: relative;
    z-index: 2;
}

.metaverso-box1 h2 {
    font-size: 4rem;
    color: #011126;
    text-transform: uppercase;

    padding-left: 25px;

    border-left: 10px solid #A558D1;
}

.metaverso-box1 h3 {
    font-size: 1.6rem;
    color: #A558D1;

    margin-top: 25px;
}

.text-metaverso {
    max-width: 700px;
    margin-top: 60px;
}

.text-metaverso p {
    margin-bottom: 30px;
    font-size: 1.6rem;
    color: #212529;
}

.bg-metaverso-box1 {
    background-color: #E4CDF1;
    width: 1100px;
    height: 1800px;

    position: absolute;
    left: -300px;
    top: 0;
    transform: rotate(-40deg);
    z-index: 1;
}

#metaverso .metaverso-box2 {
    padding: 100px 0;
}

.metaverso-box2 h3 {
    text-align: center;
    font-size: 1.6rem;
    color: #A558D1;
}

.metaverso-box2 h2 {
    text-align: center;
    font-size: 4rem;
    color: #011126;
    
    margin: 20px 0 60px;
}

.box-text-metaverso {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.metaverso-box2 .text-metaverso {
    margin-top: 0;
    max-width: 570px;
}

#metaverso .metaverso-box3 {
    padding: 100px 0;
    background-color: #A558D1;
    color: white;
}

.metaverso-box3 h3 {
    font-size: 1.6rem;
    font-weight: normal;
}

.metaverso-box3 h2 {
    font-size: 4rem;
    margin: 20px 0 60px;
}

.metaverso-box3 .text-metaverso p {
    color: white;
    font-weight: 300;
}

#metaverso .metaverso-box4 {
    padding: 100px 0;
    background-color: #FFFAF1;
}

.metaverso-box4 h2 {
    font-size: 4rem;
    color: #011126;
    max-width: 700px;
}

.metaverso-box4 .text-metaverso {
    max-width: 580px;
}

#metaverso .metaverso-box5 {
    padding: 0 0 100px;
    background-color: #FFFAF1;

    position: relative;
    overflow: hidden;
}

.metaverso-box5 .center {
    position: relative;
    z-index: 2;
}

.metaverso-box5 h2 {
    font-size: 4rem;
    text-align: center;
    color: #011126;

    margin-bottom: 80px;
}

.metaverso-box5 .img-metaverso {
    text-align: center;
}

.metaverso-box5 .text-metaverso {
    max-width: 550px;
    margin: 0;
}

.bg-metaverso-box5 {
    background-color: #E4CDF1;
    width: 1500px;
    height: 600px;

    position: absolute;
    right: -400px;
    bottom: -400px;
    transform: rotate(-30deg);
    z-index: 1;
}

#midiasDigitais .midias-box1 {
    padding: 150px 0;
    background-color: #F7F9F9;
}

.midias-box1 h2 {
    color: #212529;
    font-size: 4rem;
    text-transform: uppercase;

    padding-left: 25px;

    border-left: 10px solid #03738C;
}

.midias-box1 h3 {
    color: #03738C;
    font-size: 1.6rem;

    margin-top: 25px;
}

.box-text-midias {
    margin-top: 60px;

    display: flex;
    align-items: center;
    justify-content: space-between;
}

.text-midias {
    max-width: 550px;
}

.list-midias {
    padding: 0 0 0 50px;
}

.list-midias p {
    margin-bottom: 30px;
}

.list-midias li {
    margin-left: 30px;
    margin-bottom: 10px;
}

#midiasDigitais .midias-box2 {
    padding: 100px 0;

    position: relative;
    overflow: hidden;
}

.midias-box2 .center {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

/*.midias-flex1, .midias-flex2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}*/

.midias-beneficios {
    margin-left: 15px;
    max-width: 700px;
}

.midias-beneficios h3 {
    color: #03738C;
    font-size: 1.6rem;
}

.midias-beneficios h2 {
    margin: 20px 0 40px;

    font-size: 4rem;
    color: #212529;
}

.midia-single-box {
    background-color: #FFFAF1;
    padding: 30px;
    border-radius: 10px;
    border: 1px solid #CEEEF2;
    height: 290px;
    max-width: 340px;
    margin: 25px 0;
}

.title-midia-single-box {
    display: flex;
    align-items: center;
}

.title-midia-single-box img {
    width: 30px;
}

.title-midia-single-box p {
    color: #03738C;
    text-transform: uppercase;
    margin-left: 10px;
    font-weight: 700;
}

.text-midia-single-box p {
    margin-top: 20px;
}

.bg-midias {
    background-color: #CEEEF2;
    width: 1500px;
    height: 600px;

    position: absolute;
    left: -400px;
    bottom: -400px;
    transform: rotate(30deg);
    z-index: 1;
}

#midiasDigitais .midias-box3 {
    padding: 100px 0;
    background-color: #FFFAF1;
}

.title-midias-box3 {
    text-align: center;
}

.title-midias-box3 h3 {
    font-size: 1.6rem;
    color: #03738C;
}

.title-midias-box3 h2 {
    font-size: 4rem;
    color: #011126;

    margin: 20px auto 60px;
    max-width: 620px;
}

.midia-flex {
    display: flex;
    align-items: center;
    justify-content: space-around;

    margin-top: 100px;
}

.text-midia-flex {
    max-width: 620px;
}

.text-midia-flex h3 {
    text-transform: initial;
    color: #03738C;
    font-size: 2.4rem;
}

.text-midia-flex p {
    margin-top: 40px;
}

.text-midia-flex ul {
    margin: 10px 0 0 30px;
}

.img-midia-flex {
    text-align: center;
}

#bioinformatica .bio-box1 {
    padding: 150px 0;

    position: relative;
    overflow: hidden;
}

.bio-box1 .center {
    position: relative;
    z-index: 2;
}

.bio-box1 h2 {
    font-size: 4rem;
    color: #212529;
    text-transform: uppercase;

    padding-left: 25px;

    border-left: 10px solid #00856F;
}

.bio-box1 h3 {
    font-size: 1.6rem;
    color: #00856F;

    margin-top: 25px;
}

.text-bio-box1 {
    max-width: 700px;
    margin-top: 60px;
}

.text-bio-box1 p {
    margin-bottom: 30px;
    font-size: 1.6rem;
}

.bg-bio-box1 {
    background-color: #DCE9E2;
    width: 1100px;
    height: 1800px;

    position: absolute;
    left: -300px;
    top: 0;
    transform: rotate(-40deg);
    z-index: 1;
}

#bioinformatica .bio-box2 {
    padding: 100px 0;
    background-color: #00856F;

    color: white;
}

.bio-box2 h3 {
    font-size: 1.6rem;
    font-weight: normal;
}

.bio-box2 h2 {
    font-size: 4rem;
    margin: 20px 0 60px;
}

.bio-box2 p {
    color: white;
    font-weight: 300;
    max-width: 700px;
}

#bioinformatica .bio-box3 {
    padding: 100px 0;
}

.bio-box3 h3 {
    text-align: center;
    font-size: 1.6rem;
    color: #00856F;
}

.bio-box3 h2 {
    text-align: center;
    font-size: 4rem;
    color: #011126;
    
    margin: 20px auto 60px;

    max-width: 600px;
}

.box-text-bio-box3 {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.text-bio-box3 {
    max-width: 600px;
}

.img-bio-box3 {
    text-align: center;
}

#bioinformatica .bio-box4 {
    padding: 100px 0;
    background-color: #F7F9F9;

    position: relative;
    overflow: hidden;
}

.bio-box4 .center {
    position: relative;
    z-index: 2;
}

.title-bio-box4 {
    text-align: center;
}

.title-bio-box4 h3 {
    font-size: 1.6rem;
    color: #00856F;
}

.title-bio-box4 h2 {
    font-size: 4rem;
    color: #212529;
    margin: 20px 0 40px;
}

.title-bio-box4 p {
    max-width: 600px;
    margin: 0 auto 80px;
}

.flex-box4 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

.single-flex-box4 {
    max-width: 350px;
    background-color: white;

    padding: 24px;
    margin-bottom: 40px;

    border: 1px solid #DCE9E2;
    border-radius: 6px;
}

.single-flex-box4 h4 {
    color: #212529;
    font-size: 2.4rem;

    margin-bottom: 20px;
}

.bg-bio-box4 {
    background-color: #DCE9E2;
    width: 1500px;
    height: 600px;

    position: absolute;
    right: -400px;
    bottom: -400px;
    transform: rotate(-30deg);
    z-index: 1;
}

footer {
    padding: 100px 0;
}

footer .center {
    display: flex;
    justify-content: space-between;
}

.btnReferencias {
    display: flex;
    align-items: center;

    margin-bottom: 60px;
}

.btnReferencias button {
    cursor: pointer;

    width: 80px;
    padding: 5px 0;

    border: none;
    font-size: 1.8rem;

    opacity: .6;
}

#sitesButton {
    border-radius: 100px 0 0 100px;
    margin-right: -2px;
}

.btnReferencias .active {
    background-color: #011C40;
    color: white;
    opacity: 1;
}

#abntButton {
    border-radius: 0 100px 100px 0;
    margin-left: -2px;
}

.referencias h2 {
    color: #212529;
    font-size: 2.4rem;
    margin-right: 30px;
}

#sites a {
    display: block;
    color: #011C40;
    text-decoration: none;
    font-size: 1.8rem;
    margin-top: 20px;

    transition: .4s;
}

#sites a:hover {
    color: #03738C;
    text-decoration: underline;
}

#abnt {
    display: none;
}

#abnt p, #abnt a {
    color: #011C40;
    text-decoration: none;
    margin-top: 20px;
}

#abnt a:hover {
    color: #03738C;
    text-decoration: underline;
}

footer h1 {
    font-weight: 400;
    color: #011C40;
    font-size: 3.6rem;
    
    max-width: 600px;
    padding-left: 20px;
}

.dev p {
    text-align: center;
    font-size: 1.8rem;
    color: white;
    font-weight: 300;

    padding: 20px 0;

    background-color: #011126;
}

#backToTopButton {
  position: fixed;
  bottom: 10px;
  right: 25px;
  z-index: 5 ;

  opacity: 0;
  visibility: hidden;

  transform: translateY(100%);
  transition: 200ms;
}

#backToTopButton.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

@media (max-width: 820px){

    .w33, .w40, .w50, .w60, .w66 {
        width: 100%;
    }

    nav {
        display: flex;
      
        height: 72px;
      
        position: fixed;
        top: 0;
        width: 100vw;
      
        z-index: 100;
    }
      

    nav#autoNav .close-menu,
    nav#autoNav .open-menu{
        display: block;
        position: fixed;
        top: 15px;
        left: 20px;

        border: none;
        background-color: rgb(255, 255, 255, 0);
    }

    body.menu-expanded {
        overflow: hidden;
    }
    
    body.menu-expanded > :not(nav) {
        visibility: hidden;
    }
    
    .menu,
    .close-menu,
    body.menu-expanded .open-menu {
        opacity: 0;
        visibility: hidden;
    }
    
    body.menu-expanded .menu,
    body.menu-expanded .close-menu {
        opacity: 1;
        visibility: visible;
    }
    
    .menu {
        transform: translateY(100%);
    }
    
    body.menu-expanded .menu {
        top: 0;
        left: 0;

        width: 100vw;
        height: 100vh;

        transition: transform 300ms;
        transform: translateY(0);
    }
    
    .menu ul {
        display: flex;
        flex-direction: column;
        gap: 4.8rem;

        margin-top: 6rem;

        font-weight: 700;
        font-size: 2.4rem;
        line-height: 3.1rem;
    }

    body.menu-expanded button {
        position: relative;
        z-index: 100;
    }

    main {
        height: 80vh;
    }

    #textMain h1 {
        max-width: 100%;

        font-size: 4rem;
        text-align: center;
        line-height: 55px;

        margin-top: -80px;
    }
    
    .img-main {
        bottom: 20px;
        right: -130px;
    }
    
    .img-main img {
        width: 440px;

        opacity: .8;
    }
    
    .bg-main {
        right: -350px;
    }

    #members {
        padding: 60px 30px;

        max-width: 400px;

        top: -80px;
    }
      
    #members h2 {
        font-size: 2.1rem;
        text-align: center;

        margin-bottom: 40px;
    }
      
    .member-box {
        flex-direction: column;

        gap: 20px;
    }
      
    .name {
      font-size: 2.1rem;
    }
      
    .instagram a {
        font-size: 1.8rem;
    }
      
    .line-members {
        display: none;      
    }

    #about {
        padding-bottom: 90px;
    }
    
    .text-about {
        padding: 0;
    }

    .video {
        display: none;
    }

    #metaverso .metaverso-box1 {
        padding: 90px 0;
    }
    
    .text-metaverso {   
        margin-top: 30px;
    }
    
    .bg-metaverso-box1 {
        height: 2100px;
    }
    
    #metaverso .metaverso-box2 {
        padding: 90px 0;
    }
    
    .box-text-metaverso {
        flex-direction: column;
    }

    #metaverso .metaverso-box2 img {
        display: none;
    }
    
    #metaverso .metaverso-box3 {
        padding: 90px 0;
    }
    
    #metaverso .metaverso-box4 {
        padding: 90px 0;
    }

    .metaverso-box4 .img-metaverso {
        text-align: center;

        margin-top: 20px;
    }

    #metaverso .metaverso-box5 {
        padding: 0 0 90px;
    }
    
    .metaverso-box5 h2 {
        margin-bottom: 40px;
    }

    .metaverso-box5 .box-text-metaverso {
        flex-direction: column-reverse;
    }

    .bg-metaverso-box5 {
        display: none;
    }

    #midiasDigitais .midias-box1 {
        padding: 90px 0;
    }
    
    .box-text-midias {
        margin-top: 40px;
    
        flex-direction: column;
    }
    
    .list-midias {
        margin-top: 40px;
        padding: 0;
    }
    
    #midiasDigitais .midias-box2 {
        padding: 90px 0;
    }
    
    .midias-box2 .center {
        justify-content: center;
    }
    
    .midia-single-box {
        margin: 25px 0;
    }
    
    #midiasDigitais .midias-box3 {
        padding: 90px 0;
    }
    
    .midia-flex {
        flex-direction: column;
    
        margin-top: 70px;
    }
    
    .img-midia-flex {
        display: none;
    }

    #bioinformatica .bio-box1 {
        padding: 90px 0;
    }
    
    .text-bio-box1 {
        margin-top: 40px;
    }
    
    .bg-bio-box1 {
        height: 2100px;
    }
    
    #bioinformatica .bio-box2 {
        padding: 90px 0;
    }
    
    .bio-box2 h2 {
        margin: 20px 0 40px;
    }
    
    #bioinformatica .bio-box3 {
        padding: 90px 0;
    }
    
    .bio-box3 h2 {
        margin: 20px auto 40px;
    }
    
    .box-text-bio-box3 {
        flex-direction: column;
    }
    
    .img-bio-box3 {
        text-align: center;

        margin-top: 20px;
    }
    
    #bioinformatica .bio-box4 {
        padding: 90px 0;
    }
    
    .flex-box4 {
        justify-content: center;
    }

    footer {
        padding: 90px 0;
    }
    
    footer .center {
        flex-direction: column;
    }
    
    footer h1 {
        display: none;
    }
    
}