* {
  margin: 0;
  padding: 0;
}

html{
  scroll-behavior: smooth;
}

body {
  height: fit-content;
  background-color: rgb(255, 255, 255);
  z-index: -3;
}

.fundo {
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 52.5%;
  background-color: black;
}

.paragrafo {
  margin-left: 5%;
}

.paragrafo-grande {
  margin-left: 8%;
}



header {
  background-repeat: no-repeat;
  background-position: center;
  padding-top: 3%;
  padding-bottom: 0.6%;
  animation: expandirAltura linear forwards;
  animation-timeline: scroll(root);
  animation-range: 0% 300%;
  background-color: black;
}


header h1 {
  text-align: center;
  position: relative;
  font-size: 4vw;
  font-family: "Josefin Sans", sans-serif;
  color: white;
}

nav {
  width: 100%;
  height: 6vw;Não deu tempo de terminar hj prof, mas resumindo, eu gosto de desenhar

}

nav ul {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: end;
  list-style-type: none
}

nav ul li {
  list-style-type: none;
  margin: 0 2% 0 2%;

}

nav ul li a {
  display: inline-block;
  text-decoration: none;
  color: black;
  padding: 1vw;
  font-size: 1.3vw;
  font-family: "Josefin Sans", sans-serif;
  transition: background-color 0.2s;
  background-color: white;
}

nav ul li a:hover {
  background-color: rgb(218, 217, 217);
}

#segundo {
  margin-top: 5%;
  font-size: 6vw;
}

#saitama-ok {
  position: absolute;
  width: 25%;
  float: left;
  transform: translateY(-42%);
}

main {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  width: 100%s;
  margin-top: 2%;
}

main a {
  text-decoration: none;
  color: inherit;
}

main .caixa {
  display: flex;
  width: 100%;
  height: fit-content;
  justify-content: center;
  margin: 0;
}

.texto-vertical{
  writing-mode: vertical-rl;
  position: absolute;
  transform: translateX(-8em);
  margin-top: -8%;
  font-size: 2vw;
  font-family: "Josefin Sans", sans-serif;
  text-orientation: upright;
  letter-spacing: -0.15em;
  transition: opacity 0.2s, margin-top 0.2s;
}
 
.item:hover .texto-vertical{
  opacity: 0.5;
  margin-top: 5%;
}


.item {
  position: relative;
  overflow: hidden;
  display: inline-block;
  width: 33%;
  height: 58vh;
  margin: 1%;
  background-color: white;
  transition: height 0.2s, width 0.2s;
  border: 1px solid black;
  text-align: center;
  vertical-align: middle;
  justify-content: center;
  align-items: center;
  box-shadow: 0 0 2vw 0.1vw black;
  color: black;
}
.item:hover{
  cursor: pointer;
}

.item#item1::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(imagens/imagem-corrida2.jpg);
  transform: scale(1);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 1;
  transition: opacity 0.3s, transform 1s;
  z-index: 0;
}

.item#item2::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(imagens/imagem-desenho.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 1;
  transition: opacity 0.3s, transform 1s;
  z-index: 0;
}

.item#item3::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(imagens/imagem-escrita.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 1;
  transition: opacity 0.3s, transform 1s;
  z-index: 0;
}

.item#item4::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(imagens/);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 1;
  transition: opacity 0.3s, transform 1s;
  z-index: 0;
}

.item#item1:hover::before {
  opacity: 0.3; 
  transform: scale(1.05);
}

.item#item2:hover::before {
  opacity: 0.3; 
  transform: scale(1.05);
}

.item#item3:hover::before {
  opacity: 0.3; 
  transform: scale(1.05);
}

.item#item4:hover::before {
  opacity: 0.3; 
  transform: scale(1.05);
}


.expandir-logo {
  position: relative;
  z-index: 1;
  opacity: 0;
  width: 100%;
  margin-top: 5%;
  font-size: 1.2em;
  text-align: center;
  margin-top: 19%;
  transform: translateX(-20%);
  transition: margin 1s, opacity 0.2s;
  text-decoration: none;
  font-family: "Josefin Sans", sans-serif;
}

main div .item:hover .expandir-logo {
  opacity: 1;
  margin-left: 20%;
  }

.bloco{
  width: 100%;
}


.conteudo-oculto {
  max-height: 0;
  overflow: hidden;
  width: 100%;
  margin: auto;
  background:   white;
  text-align: center;
}

.conteudo-oculto:target {
  max-height: 10%;
  font-family: "Josefin Sans", sans-serif;
  font-size: 2em;
}