* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   font-family: "Ancizar Serif", serif;

}

.logo-mario {
   height: 200px;
}

button {
   color: white;
   background-color: #C51111;
   border: none;
   border-radius: 3px;
   width: 200px;
   height: 50px;
   cursor: pointer;
   font-weight: bold;
   margin-top: 30px;
}

button:hover {
   background-color: rgb(11, 121, 1);
   border: none;
   transition: 0.3s ease-in-out;
}

.imagem-mario-luigi {
   height: 500px;

}

body {
   height: 100vh;
}

.caixa-principal {
   width: 40%;
}

.caixa-video {
   position: fixed;
   top: 0;
   z-index: -1;
}

video {
   min-height: 100%;
   min-width: 100%;
   position: fixed;
   top: 0;

}

.mascara {
   height: 100vh;
   width: 100vw;
   background: linear-gradient(109deg, rgba(10, 12, 16, 0.99) 15%, rgba(10, 12, 16, 0.7) 50%, rgba(10, 12, 16, 0.99) 85%);
   position: fixed;
   top: 0;
}

.caixa-mae {
   display: flex;
   /*colocando um item do lado do outro */
   align-items: center;
   padding: 100px;
   height: 100vh;
   justify-content: space-around;
}

p{
   color: white;
   font-size: 20px;
}

.link-whatsapp img {
   height: 60px;
   position: fixed;
   right: 20px;
   bottom: 20px;
}

.header {
   display: flex;
   align-items: center;
   gap: 30px;
   margin: 30px;

}

.header img {
   height: 60px;

}

.header a {
   color: white;
   font-size: 24px;
   cursor: pointer;
}

.header a:hover{
 color: #C51111;
 font-size: 26px;
 transition: 0.5s ease-in-out;
}

.formulario-fale-conosco{
   background-color: white;
   display: flex;
   gap: 20px;
   flex-direction: column;
   position: fixed;
   top: 30%;
   left: -300px;
   padding: 20px;
   border-radius: 5px;
   transition: left 1s ease-in-out;
    
}

input {
   height: 40px;
   border-radius: 5px;
   border: 1px solid gray;
   padding-left: 5px;
   outline-color: green;
}
textarea {
   width: 270px;
   height: 100px;
   border-radius: 5px;
   border: 1px solid gray;
   padding-left: 5px;
   outline-color: green;
}

.mascara-formulario{
   visibility: hidden;
   position: fixed;
   top: 0;
   width: 100vw;
   height: 100vh;
   background: linear-gradient(109deg, rgba(10, 12, 16, 0.99) 15%, rgba(10, 12, 16, 0.7) 50%, rgba(10, 12, 16, 0.99) 85%);
   transition: visibility 1s ease-in-out;
}

@media (max-width: 1100px) {
   p{
      display: none;
   }
   
   .caixa-mae{
      flex-direction: column;
      padding: 20px;
      justify-content: flex-start;
   }
 .caixa-principal{
   display: flex;
   align-items: center;
   flex-direction: column;
 }

 .imagem-mario-luigi{
   width: 80vw;
   height: auto;
 }

.header {
   margin: 10px;
   display: flex;
   align-items: center;
   justify-content: center;
}

.header img{
   display: none;
}
.header a:hover {
    color: #C51111;
    font-size: 21px;
    transition: 0.5s ease-in-out;
}
.header a {
   font-size: 20px;
}



}