* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;

}
    .logo-mario {
        width: 200px;

    }

    button {
        color: white;
        background-color: rgb(170, 3, 3);
        border-radius: 3px;
        border: none;
        width: 200px;
        height: 50px;
        cursor: pointer;
        text-transform: uppercase;
        font-weight: bold;
        margin: 30px;

    }

    button:hover {
        color: rgb(235, 231, 17);
        font-size: 15px;
        transition: 1s linear;
    }

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

    body {

        height: 100vh;
    }

    .caixa-principal {
        width: 40%;
    }

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

    }


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

    .caixa-imagem img {
        position: fixed;
        height: 100vh;
        width: 100vw;
        top: 0;
    }


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





    .caixa-mae {
        display: flex;
        align-items: center;
        justify-content: space-around;
        padding: 100px;
        height: 100vh;
    }

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

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

    .link-wpp img {

        height: 60px;
        position: fixed;
        right: 20px;
        bottom: 20px;
    }

    .link-wpp img:hover {

        transform: scale(1.2);
    }

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


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


    .header img {

        height: 60px;

    }



    .header a:hover {
        color: rgb(170, 3, 3);
        font-size: 26px;
        transition: 0, 5s ease-in-out;
    }





    .Formulario-fale-conosco {

        background-color: white;
        display: flex;
        flex-direction: column;
        position: fixed;
        Top: 30%;
        left: -300px;
        padding: 20px;
        border-radius: 5px;
        gap: 15px;
        transition: left 1s ease-in-out;

    }

    input {

        height: 40px;
        border-radius: 5px;
        border: 1px solid grey;
        padding-left: 5px;
        outline-color: rgb(11, 172, 11);
    }

    textarea {
        height: 100px;
        width: 270px;
        border-radius: 5px;
        border: 1px solid grey;
        padding-left: 5px;
        outline-color: rgb(11, 172, 11);

    }

    .mascara-formulario {
        visibility: hidden;
        position: fixed;
        top: 0;
        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%);
        transition: visibility 1s ease-in-out;

    }

    .caixa-text h1 {

        color: rgb(185, 22, 22);
        font-weight: bold;
        background-color: rgb(255, 255, 255);
        border-radius: 10px;
        border-color: black;


    }

    .caixa-text p {
        color: rgb(235, 231, 17);
        font-style: oblique;

    }

    .caixa-text {
        margin-left: 300px;
        margin-right: 300px;


    }

@media(max-width: 1100px){

p{
    display: none;
}
.caixa-mae{
    flex-direction: column;
    padding: 10px;
}
.caixa-principal{
display: flex;
align-items: center;
 flex-direction: column;
}

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

.header img{
display: none;

}
.header{
    margin: 10px;
    align-items: center;
    justify-content: center;
}
.header a{
    font-size: 20px;
}
.video{
width: 80vw;
height: auto;

}
}