:root {
    --corPrincipal: #051637;
    --corPrincipalc: #072258;
    --corContraste:#F09061;

}

html {
    scroll-behavior: smooth;
  }
  
a{
    text-decoration: none;
}

#bigger{
    font-size: 125%;
}

.desce{
    margin-top:60px;
}

#warning{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 13px;
    background-color: var(--corPrincipalc);
    width: 100%;
    height: 45px;
    color: white;
}

#headline{
    padding: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: url(media/FundoCapa.avif);
    background-position: center;
    background-size: cover;
    position: relative;
    width: 100%;
 &::before{
        content:"";
        position: absolute;
        top:0;
        background-color: rgba(0,0,0, 0.2);
        height: 100%;
        z-index:0;
        width: 100%;
    }

    h1{
        z-index: 1;
        font-size: 48px;
        color: #3C3C3C;
    }

    .images{
        position: relative;
        left:5%;
        width: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 1;

        img:nth-of-type(1){
            position: relative;
            width: 100%;
        }
        /* APRENDA! */
        
    }
    a{
            width: 70%;
            display:flex;
            color: white;
            font-size: 25px;
            font-weight: 700;
            padding: 15px 0px;
            border-radius:10px;
            align-items: center;
            justify-content: center;
            background-color: #008300;
            transition: 0.3s ease-in-out;
            z-index: 1;

            &:hover{
                transform: scale(1.1);
                background-color: #016201;
            }
        }
    p{
        z-index: 1;
        font-size: 20px;
    }
}

.container1{
    padding:40px 0px;
    background: url(media/FundoContainer1_1.png);
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    h1{
        font-size: 48px;
    }
    h2{
        font-size: 48px;
        font-weight: 500;
    }
    a{
        width: 60%;
        color: white;
        font-size: 20px;
        font-weight: 600;
        padding: 15px 0px;
        border-radius:10px;
        text-align: center;
        background-color: #008300;
        transition: 0.3s ease-in-out;

        &:hover{
            transform: scale(1.1);
            background-color: #016201;
        }
    }

    .images{
        gap: 5%;
        margin:50px;
        width: 80%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }
}

.container2{
    padding:30px 0px;
    width: 100%;
    background: linear-gradient(to bottom, var(--corPrincipal),var(--corPrincipalc));
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .content{
        display: flex;
        width: 100%;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .videocontainer{
            display: flex;
            justify-content: center; /* Centraliza o vídeo */
            align-items: center;
            width: 80%; /* Ajuste a largura conforme necessário */
            max-width: 100%;
            position: relative;
    
        iframe{
            width: 100%;
            height: auto;
            aspect-ratio: 16 / 9; /* Garante a proporção correta */
            border: none;
            }
        

        }
        .images{
            width:40%;
            gap:30px;

            img{
                width: 100%;
            }
        }
        a:nth-of-type(1){
            width: 60%;
            color: white;
            font-size: 20px;
            font-weight: 600;
            padding: 15px 0px;
            border-radius:10px;
            text-align: center;
            background-color: #008300;
            transition: 0.3s ease-in-out;
            margin:20px;    

            &:hover{
                transform: scale(1.1);
                background-color: #016201;
        }
    }
        a:nth-of-type(2){
            width: 60%;
            text-shadow: 0px 0px 15px black;
            color: white;
            font-size: 20px;
            font-weight: 600;
            padding: 15px 0px;
            border-radius:10px;
            text-align: center;
            background-color: var(--corContraste);
            transition: 0.3s ease-in-out;
            margin:20px;    

            &:hover{
                transform: scale(1.1);
                background-color: #e17844;
        }
        }   
        
        h2{
            text-align: center;
            font-size:35px;
            color: var(--corContraste);
        }

        h2{
            font-size: 27px;
            width: 100%;
        }
    
        h1{
            font-weight: 400;
            text-shadow: 0px 0px 15px black;
            color: var(--corContraste);
            font-size: 35px;
            text-align: center;
        }
        .images{
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
    }
}


@media screen and (min-width:320px) and (max-width:768px){
    .container2{
        .content{
            h1{
                font-size: 25px;
            }

            a:nth-of-type(1){
                padding:15px 5px;
                width: 90%;
                font-size: 18px;
            }
            a:nth-of-type(2){
                padding:15px 5px;
                width: 90%;
                font-size: 18px;
            }
            .images{
                width: 95%;
            }
        }
    }
    .container1{
        a{
            width: 90%;
        }
        .images{
            width: 95%;
            flex-direction: column;
            gap:20px;
            img{
                width: 100%;
            }
        }
    }
    #warning{
        height: 40px;
        h1{
        text-align: center;
        font-size: 10px;
        }
    }
    
    #headline{
        padding: 2px;
        h1{
            font-size: 30px;
        }
        p{
            font-size: 15px;
            text-align: center;
        }
        a{
            width: 90%;
        }

        .images{
            width: 100%;
            left:0px;
            img:nth-of-type(1){
                width: 100%;
            }
        }
    }
}

@media screen and (min-width: 768px) and (max-width: 1024px){
    .container1{
        .images{
            width: 90%;
            img{
                width: 80%;
            }
        }
    }
    #headline{
        padding: 0px;
        h1{
            font-size: 40px;
        }
    }
}

@media screen and (min-width: 1024px) and (max-width: 1440px){
    .container2{
        .content{
            .images{
                width: 60%;
            }
        }
    }
    #headline{
        padding:50px;

        .images{
            width: 80%;
        }
    }
}

@media only screen and (max-width:992px){
    .container2{
        .content{
            .videocontainer{
                width:100%;
            }
        }
    }
}