:root{
    --primary-bg:lightblue;
    --subtitle-color:rgb(14, 86, 149);
    --paragraph-color:rgb(6, 59, 81);
}

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


body{
    position:fixed;
    width: 100%;
    height:100%;
    display: flex;
    background:aliceblue;
}

main{
    width:90%;
    height:85%;
    background:var(--primary-bg);
    margin:auto;
    border-radius: 18px;
    box-shadow: 0 0 22px rgb(167, 207, 245);
    display: flex;
}

main > div{
    height:100%;
}

p, li{
    font-size: 13pt !important;
}


:is(.main-left footer, .main-right-content)::-webkit-scrollbar{
    width: 10px !important;    
    background:transparent !important;
}

:is(.main-left footer:hover, .main-right-content:hover)::-webkit-scrollbar-thumb{
    width: 4px !important;    
    background:rgb(6, 59, 81);
    border-radius: 8px;
}

.main-left{
    width: 45%;
    color:var(--paragraph-color);
    text-align: justify;
    
}

.main-left-divs{
    width: 97%;
    height: 96% !important;
    margin-top:2% !important;
    background-color:gray;
    margin:auto;
    background-image:url("../imgs/perfil-photo.jpg");
    background-size: cover;
    border-radius: 14px;
}

.main-left header{
    height:45%;
    display: flex;
}

.main-left footer{
    height: 55%;
    background-image:linear-gradient(to top, rgba(151, 202, 219, 0.881) 70%, transparent);
    display: flex;
    border-radius: 14px;
    overflow-y: auto !important;


}

.main-left-content{
    width:90%;
    margin:auto;
}

.main-left h1{
    padding-top:20px;
    color:white;
    text-align:center;
}

.main-left h2, .main-left h3, .main-left p{
    padding-left:20px;
    padding-top:30px;
}


.main-right{
    width: 55%;
    display: flex;
    
}

.main-right h2{
    padding-top:40px;
    color:var(--subtitle-color);
    text-align: center;
}

.main-right-content{
    width: 98%;
    height: 96%;
    overflow-y: auto;
    margin:auto;
    padding-left:30px;
    padding-right:10px;
    text-align: justify;
    color:var(--paragraph-color);
}

.main-right-content > ul > li{
    padding-top:10px;
}

.main-right-content > ul > li > ul{
    padding-left:30px;
}


a{
    text-decoration: none;
    color:rgb(58, 163, 255);
}

.fechamento{
    padding-top:40px;
    font-style: italic;
    color:rgb(2, 23, 57);
    text-align:center;
}


@media screen and (max-width: 768px){

    main{
        height: 97%;
        width: 97%;
        display:block;
        overflow-y: auto !important;
    }

    main > div{
        width:90% !important;
        margin: auto;
    }

    .main-left{
        height: 600px !important;
    }

    .main-left-divs{
        width: 107%;
        margin-left:-3.4%;
        background-position: 23%;
    }

    .main-right-content{
        overflow-x: none !important;
    }

  
}