@charset "UTF-8";

/* Tablets */
@media (min-width: 768px) and (max-width: 1024px) {

    /*sessão 1 ----------------------*/

    .apresentacao{
        width: 600px;
    }
    
    .apresentacao > h2{
        font-weight: 500;
        font-size: 16px;
    }
    
    .apresentacao > h1{
        padding-top: 10px;
        font-weight: 900;
        font-size: 45px;
    }
    /*sessão 2 ----------------------*/

    .educacao{
        flex-direction: row; 
        gap: 50px;
    }
    
    .curso{
        width: 320px;
    }
    
    .linhax{
        width: 320px;
    }
    
    .sessao2 > .educacao > .curso > h1{
        font-weight: 800;
        font-size: 17px;
    }
    
    .sessao2 > .educacao > .curso > h2{
        font-size: 15px;
    }

    /*sessão experiencia ----------------------*/

    .educacao{
        flex-direction: row; 
        gap: 50px;
    }
    
    .curso{
        width: 320px;
    }

    .sessao_experiencia > .educacao > .curso > h1{
        font-weight: 800;
        font-size: 17px;
    }
    
    .sessao_experiencia > .educacao > .curso > h2{
        font-size: 15px;
    }
    
    .sessao_experiencia > .educacao > .curso > h3{
        font-size: 15px;
        padding-top: 7px;
    }
    
    .sessao_experiencia > .educacao > .curso > h4{
        font-size: 13px;
        padding-bottom: 7px;
    }
    
    .sessao_experiencia > .educacao > .curso > p{
        font-size: 14px;
        padding-bottom: 7px;
    }

    /*sessão 3 ----------------------*/

    .container{
        gap: 20px;
        padding-top: 20px;
    }

    .linguagem{
        width: 210px;
        height: 33px;
        border-radius: 15px;
        gap: 10px;
    }
    
    .logo-icon{
        width: 20px;
    }
    
    #codigo:hover{
        border-radius: 25px;
        transform: translateY(-7px)
    }
    
    #programa{
        color: var(--quarta-cor);
        transition: .3s;
    }
    #programa:hover{
        transform: translateY(-7px)
    }

    /*sessão 4 ----------------------*/

    .prontos{
        flex-direction: row; 
        gap: 50px;
    }

    .projetos{
        padding-top: 20px;
    }

    .imagemprojeto{
        width: 300px;
    }

    .imagemilustracao{
        width: 150px;
    }

    /*sessão 5 ----------------------*/

    .finalizacao{
        width: 600px;
    }
    
    .final{
        padding-top: 10px;
        font-weight: 800;
        font-size: 25px;
    }
    .textofinal{
        padding-top: 10px;
    }
}

@media (min-width: 1024px){
    /*sessão 1 ----------------------*/

    .apresentacao{
        width: 600px;
    }
    
    .apresentacao > h2{
        font-weight: 500;
        font-size: 16px;
    }
    
    .apresentacao > h1{
        padding-top: 10px;
        font-weight: 900;
        font-size: 45px;
    }

    /*sessão 2 ----------------------*/

    .educacao{
        flex-direction: row; 
        gap: 50px;
    }
    
    .curso{
        width: 430px;
    }
    
    .linhax{
        width: 430px;
    }
    
    .sessao2 > .educacao > .curso > h1{
        font-weight: 800;
        font-size: 20px;
    }
    
    .sessao2 > .educacao > .curso > h2{
        font-size: 16px;
    }

    /*sessão experiencia ----------------------*/

    .educacao{
        flex-direction: row; 
        gap: 50px;
    }
    
    .curso{
        width: 430px;
    }

    .sessao_experiencia > .educacao > .curso > h1{
        font-weight: 800;
        font-size: 20px;
    }
    
    .sessao_experiencia > .educacao > .curso > h2{
        font-size: 16px;
    }
    
    .sessao_experiencia > .educacao > .curso > h3{
        font-size: 15px;
        padding-top: 7px;
    }
    
    .sessao_experiencia > .educacao > .curso > h4{
        font-size: 13px;
        padding-bottom: 7px;
    }
    
    .sessao_experiencia > .educacao > .curso > p{
        font-size: 14px;
        padding-bottom: 7px;
    }
    
    /*sessão 3 ----------------------*/

    .container{
        gap: 20px;
        padding-top: 20px;
    }

    .linguagem{
        width: 230px;
        height: 33px;
        border-radius: 15px;
        gap: 10px;
    }
    
    .logo-icon{
        width: 25px;
    }
    
    #codigo:hover{
        border-radius: 25px;
        transform: translateY(-7px)
    }
    
    #programa{
        color: var(--quarta-cor);
        transition: .3s;
    }
    #programa:hover{
        transform: translateY(-7px)
    }

    /*sessão 4 ----------------------*/

    .prontos{
        flex-direction: row; 
        gap: 50px;
    }

    .projetos{
        padding-top: 30px;
    }

    .imagemprojeto{
        width: 330px;
    }

    .imagemilustracao{
        width: 180px;
    }

    /*sessão 5 ----------------------*/

    .finalizacao{
        width: 600px;
    }
    
    .final{
        padding-top: 10px;
        font-weight: 800;
        font-size: 25px;
    }
    .textofinal{
        padding-top: 10px;
    }
}