@font-face {
   font-family: 'Moons Trial';
   src: url('index/TT Moons Trial Black Italic');
}
*{
   margin: 0%;
   padding: 0%;
   color: white;
   font-family: 'Moons Trial' ;
}
body{
   width: 99vw;
   height: 98vh;
   background-color: #210635;
}
h1{
   text-align: center;
}
#co{
   width: 100%;
   height: 92%;
   display: flex;
   justify-content: center;
   align-items: center;
}
#conteiner{
   background-color: #420D4B;
   width: 85%;
   padding: 25px 10px;
   margin: auto;
   display: flex;
   justify-content: space-evenly;
   align-content: space-evenly;
   gap: 15px;
   flex-wrap: wrap;
   border-radius: 10px;
}
.caixa{
   width: 270px;
   height: 180px;
   position: relative;
}
.caixa:hover{
  top:-5px; 
}

.caixa img{
   width: 100%;
   border-radius: 10px;
   box-shadow: 0px 0px 18px black;
}
.caixa img:hover{
   cursor: pointer;
}
h3{
   text-align: center;
}
a{
   text-decoration-line: none;
}

@media (max-width: 650px) {
   body{
      width: 97vw;
      height: 98dvh;
      background-color: #210635;
   }
   #co{
      width: 100%;
      height: 90%;
      display: flex;
      justify-content: center;
      align-items: center;
   }
   #conteiner{
      background-color: #420D4B;
      width: 85%;
      padding: 25px 10px;
      margin: auto;
      display: flex;
      justify-content: space-evenly;
      align-content: space-evenly;
      gap: 25px;
      flex-wrap: wrap;
      border-radius: 10px;
      font-size: 12px;
   }
   h1{
      margin: 14px;
      text-align: center;
   }
   .caixa{
      width: 150px;
      max-height: 120px;
      position: relative;
   }
}
@media (min-width:651px) {
   h1{
      margin: 14px;
   }
}