@import url('https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');


@font-face {
  font-family: "suisse-light";
  src: url('SuisseIntl-Light.woff2');
}

@font-face {
  font-family: "suisse-bold";
  src: url('SuisseIntl-Regular.woff2');
}

@font-face {
  font-family: "AllianceNo1";
  src: url('edb9f1eb1c1a7ead-s.p.woff2');
}


html{
  overflow: hidden;
}
body {
  padding: 0;
  margin: 0;
  width: 100vw;
  height: 100vh;
  background: #05060f linear-gradient(0deg,rgba(216,236,248,.06),rgba(152,192,239,.06));
 overflow: hidden;

}

.basee {
  padding-right: none;
  width: 100%;
  height: 100%;
  color: #1ae3de;
	cursor: context-menu; 
	margin-top: 0%; 
  z-index: 3; 
  scrollbar-width: 3px;
  overflow-y: scroll;
  overflow-x: hidden;
  scrollbar-color: #1ae3de transparent;
  scrollbar-width: 3px;
}

.basee::-webkit-scrollbar {
    width: 3px;
    background-color: transparent; 
}

.basse::-webkit-scrollbar-thumb {
    background-color: #1ae3de;
}

#btnFilter .relative {
  display: flex;}

 /* styles.css */


header {
 z-index: 3;
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%; 
  padding: 10px;
  padding-left: 5px;
  overflow: hidden;
 position: absolute;
 pointer-events: none;
 transition: opacity 0.3s ease, visibility 0.3s ease; 
}

.logo-container {
  max-width: 100%;
  text-align: left;
  display: flex;
  flex-direction: row;
  gap: 25px;
  pointer-events: none;
}


.logo {
  height: 12.5vw;
  margin-left: 5%;
  width: auto;
  backdrop-filter: blur(5px);
  z-index: -2;
  cursor: pointer;
pointer-events: all;
}

.logo:hover{
  transform: none;
  transition: none;
  transform-origin: none;
  margin-left: 5%;
  z-index: -9999999;
}

@media (max-width: 830px) {

  .logo {
    height: 40vw;
    margin-top: 3vh;
    margin-left: 5%;
    width: auto;
    backdrop-filter: blur(5px);
    z-index: -2;
    cursor: pointer;
  pointer-events: all;
  }
}

header:hover{
  transform: none;
  transform: none;
}

nav {
  width: 100%;
  height: 10vh;
  display: flex;
  justify-content: center;
  font-family: "HelveticaNeue", sans-serif;
  font-weight: bolder;
  margin-top: 2%;
  margin-left: 30%;
}

ul {
  pointer-events: all;
  list-style: none;
  margin: 0;
  flex-direction: row;
  padding: 0;
  display: flex;
  gap: 40px;
}


/* Estilo das seções */
.section {
  display: none;
  color: aliceblue;
}

.section.active {
  display: block;
}


.content {
  position: relative;
}

.item {
  opacity: 0;

  animation: fadeInUp 1s forwards;
}

@keyframes fadeInUp {
  from {
      opacity: 0;
      transform: translateY(20px);
  }
  to {
      opacity: 1;
      transform: translateY(0);
  }
}

 .lll{

  color: white;
}

 #l6{
  margin-top: 1%;
  max-width: 7vw;
  pointer-events: none;
 justify-content: end;
}

/* Paginas de autor*/

.marta-castelo, .autor{
  top: 0;
  right: 0;
  width: 100%;
  height: 100vh;
  background-color: black;
  border: 2px solid rgba(0, 190, 190, 1);
  color: #4be3da;
  z-index: 3;
  position: absolute;
  overflow: hidden;
  display: none;
  flex-direction: row;
  font-family: "suisse-bold";

}


#autor1{
  margin-top: 13%;
  right: 0;
  width: 100%;
  height: 70%;
  color: #4be3da;
 
  overflow: hidden;
  z-index: -300000000000 !important;
  display: flex;
  flex-direction: row;
  font-family: "suisse-bold";
 
}


.lado-esquerdo::-webkit-scrollbar {
  width: 2px;
  background-color: rgba(26, 227, 224, 0); /* Fundo quase transparente */
}

.lado-esquerdo::-webkit-scrollbar-thumb {
  background-color: #1ae3de;
}

.lado-direito::-webkit-scrollbar {
  width: 2px;
  background-color: rgba(26, 227, 224, 0); /* Fundo quase transparente */
}

.lado-direito::-webkit-scrollbar-thumb {
  background-color: #1ae3de;
}

.lado-esquerdo, .lado-direito {
  width: 50%;
  height: 100vh;
  overflow-y: scroll;
  overflow-x: hidden;
  scrollbar-color: #1ae3de transparent;
  scrollbar-width: 2px;
}

.oiu{
  user-select: none; width: 90%; margin-left: 5%; margin-top: 3%; 
}

.oiu1{
  user-select: none; width: 90%; margin-left: 5%;  margin-top: 30%;
}

.oiu2{
  user-select: none; width: 90%; margin-left: 5%; margin-top: 30%; 
}

.oiu:hover, .oiu1:hover, .oiu2:hover{
  pointer-events: none;
}


.close{
  font-size: 4vw;
  color: white;
  cursor: pointer;
  background-color: transparent;
  margin-left: 35%;
  margin-top: -1%;
  position: fixed; 
}

.re{
  user-select: none;
  width: 20vw;
}

.closee, .cclose {
  display: none;
  position: absolute;
  margin-left: 32vw;
  font-size: 6vw;
  color: white;
  cursor: pointer;
  background-color: transparent;
  margin-top: 5vh;
  pointer-events: all;

}



.titulo{
  font-size: 1.4vw;
  width: 20vw;
  font-family: "AllianceNo1";
  font-weight: bold;  
  margin-left: 4%;
  margin-top: 10%;
 }

 .h1{
   
  font-size: 1.4vw;
  margin-left: 4%;
  margin-top: 5%;

 }

 .h11{
  font-weight: bold;
  font-size: 1.4vw;



 }
 .h3,.h2{
  margin-left: 4%;
  font-size: 1vw;
  width: 30vw;
  font-family: "AllianceNo1";
 }

 #ss{
  font-weight: bold;
  margin-top: 20%;
  font-size: 1.7vw;
  font-family: "AllianceNo1";
}


#blog-detail {
  margin-left: 5%;
  margin-top: 7%;
   font-size: 1vw;
   width: 25vw;
 
   font-size: 1.2vw;
 
 }

 .legimg{
  font-size: 0.8vw;
  font-family: "AllianceNo1";
  color: #1ae3de;
  width: 12vw;
  margin-left:5% ;
 }
 .tt{
  margin-top: 3%;
  width: 35vw;
  font-size: 1.2vw;
  margin-left: 5%;
  line-height: 1.6;
 }

 
 .sub{
  font-size: 1.05vw;
  margin-left: 5%;
  width: 40vw;
 }

 .info-container, .info-container1{
  
  font-size: 1.1vw;
  font-weight: bold;
  margin-top: 2%;
  margin-left: 4%;
  font-family: "AllianceNo1";
 }

 a, button {
  -webkit-tap-highlight-color: transparent; /* Remove o "highlight" azul */
}


@media (max-width: 830px) {



  
#autor1{
  margin-top: 55%;
  right: 0;
  width: 100%;
  height: 72%;
  color: #4be3da;
 
  overflow: hidden;
  z-index: -300000000000 !important;
  display: flex;
  flex-direction: row;
  font-family: "suisse-bold";
 
}

  
  .lado-esquerdo .oiu1{
    user-select: none; width: 90%; margin-left: 5%;  margin-top: 250%;
  }
  
 .lado-esquerdo .oiu2{
    user-select: none; width: 90%; margin-left: 5%; margin-top: 170%; 
  }


  .oiu1 {
    user-select: none;
    width: 90%;
    margin-left: 5%;
    margin-top: 50%;
}

.oiu2 {
  user-select: none;
  width: 90%;
  margin-left: 5%;
  margin-top: 50%;
}
  

  .info-container, .info-container1{
    white-space: nowrap;
    font-size: 3vw;
    font-weight: bold;
    margin-top: 1%;
    margin-left: 1%;
    font-family: "AllianceNo1";

   }

  
  .sub{
    font-size: 3.5vw;
    margin-left: 5%;
    width: 50vw;
    margin-bottom: 30%;
   }
 .tt{
  margin-top: 3%;
  width: 80vw;
  font-size: 4vw;
  margin-left: 5%;
  line-height: 1.6;
 }

  #blog-detail {
    margin-left: 5%;
    margin-top: 20%;
     font-size: 1vw;
     width: 85vw;
   
     font-size: 5vw;
   
   }
  #ss{
    font-weight: bold;
    margin-top: 20%;
    font-size: 8vw;
    font-family: "AllianceNo1";
  }
  
  
  .h1{
   
    font-size: 6vw;
    margin-left: 4%;
    margin-top: 5%;
  
   }
  
  
   .h3,.h2{
    margin-left: 4%;
    font-size: 5vw;
    width: 30vw;
    font-family: "AllianceNo1";
   }
  .closee {
    display: none;
    position: absolute;
    margin-left: 20vw;
    font-size: 23vw;
    color: white;
    filter: url(#glow);
    cursor: pointer;
    background-color: transparent;
    margin-top: -55vh;
    z-index: 999999999999999;
    
    pointer-events: all;
  }
  .close, .closeee{
    font-size: 20vw;
    color: white;
    cursor: pointer;
    background-color: transparent;
    margin-top: -1.5%;
    margin-left: 75%;
    height: 0.5%;
   
  }

  .titulo{
    font-size: 6vw;
    width: 80vw;
    font-weight: bold;  
    margin-left: 4%;
    margin-top: 30%;
    font-family: "AllianceNo1";
    
   }

   .combined-content{
    scrollbar-color: #1ae3de transparent;
    scrollbar-width: 3px;
  }
  
  .combined-content::-webkit-scrollbar {
      width: 3px;
      background-color: transparent; 
  }
  
  .combined-content::-webkit-scrollbar-thumb {
      background-color: #1ae3de;
  }

  .legimg{
    font-size: 3vw;
    font-family: "AllianceNo1";
    color: #1ae3de;
    width: 52vw;
    margin-left:5% ;
   }
  
}

.width {
  font-size: 4vw;
  color: #4be3da;
  cursor: pointer;
  background-color: transparent;
  margin-top: -0.5%;
  margin-left: 55%;
}

.close:hover, .closee:hover{
  color: #4be3da;
}

section {
  scroll-snap-align: center;
  height: 100vh;
  width: 100vw;
  /* display: grid;
  place-items: center; */
}

.width:hover{
  color: aliceblue;
}



#ro{
  display: flex;
  flex-direction: row;
  margin-top: 3%;
  width: 100%;
gap: 2vw;
 }

 #ff{
  margin-left: 2%;
  height:auto;
    width: 47vw;
    pointer-events: none;
    margin-top: 5%;
   }

   
  

  .heed{
    z-index: 99;
    margin-left: 2%;
    margin-top: 1%;
    display: flex;
    width: 95%;
    flex-direction: row;
    background: transparent;
    position: fixed;
    justify-content: space-between;
  }






 #op{
  margin-top: 10%;
 }

 #p1{
  font-size: 2vw;
  font-weight: bold;
  width: 25vw;

 }

 #blog-detail a{
  color: #1ae3de;
  color: inherit; /* Faz com que o link herde a cor do elemento pai */
  text-decoration: none;
  text-decoration: underline;

 }

 .ruf{
  margin-top: 7%;
  display: flex;
  flex-direction: column;
  gap: 2vw;

  height: 55vw;

 }

 #ruf1{
  height: 45vw;
 }





#vf p{
  font-size: 1vw;
  width: 20vw;
}

#vf {
  margin-top: 5%;
  height: 50vh;
}

.ty{
  margin-left: 2%;
}


.marta1{
  width: 69vw;
 pointer-events: none;
 margin-left: 4%; 
 margin-top: 20vh;
}


.marta2{
  width: 55vw;
  
 pointer-events: none;
 margin-left: 4%; ;
 margin-top: 20vh;

}



.marta3{
  height: 20vw;
 pointer-events: none;
 margin-top: 20vh;
 margin-left: 4%; ;
}

/* Para todos os navegadores modernos */
/* Garante que todas as barras de rolagem fiquem visíveis */


/* Para Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: #999 #f1f1f1;
}

/* Para navegadores WebKit (Chrome, Safari, Edge) */
*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

*::-webkit-scrollbar-thumb {
  background: #999;
  border-radius: 4px;
}

*::-webkit-scrollbar-track {
  background: #f1f1f1;
}