*{
    font-family:'Segoe UI', Tahoma, Verdana, sans-serif;
    box-sizing: border-box;
}

body {
    background-color: #191013;
}

 main {
    background-color: #243a69;
    margin: auto;
    padding: 10px;
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.47);
    color: #f4f4f2;
    font-size: 16px;
    border-radius: 20px;

}
.col-1{width: 8.33%;}
.col-2{width: 16.66%;}
.col-3{width: 25%;}
.col-4{width: 33.33%;}
.col-5{width: 41.66%;}
.col-6{width: 50%;}
.col-7{width: 58.33%;}
.col-8{width: 66.66%;}
.col-9{width: 75%;}
.col-10{width: 83.33%;}
.col-11{width: 91.66%;}
.col-12{width: 100%;}

.row::after {
    content: "";
    clear: both;
    display: table;
 }

[class*="col-"] {
    float: left;
 }

 .Cabeçalho {
    width: 100%;
    background-color:#d4cdc5;
    color: #243a69;
    border-radius: 20px;
    
 }

 .navbar {
    color: #5b88a5;
    font-size: 20px;

 }

 #foto {
    border-radius: 50%;
    width: 80%;
    padding: 10px;
 }

 h2 {
    font-size: 18px;
    color: #d4cdc5;

 }

 h1 {
    color: #d4cdc5;
    text-align: center;

 }

 #Titulo {
    color: #243a69;
    text-align: center;
    transform: translateY(50px);
 }

 a {
    color: #f4f4f2;
    text-decoration: none;
 }
 
 article {
    margin: 40px;
    margin-top: 60px;
 }

 #topicos {
    color: #243a69;
    list-style: none;
    
}

.navbar ul { 
    list-style:none;
    text-align: center;
}

.navbar ul li {
    display:inline ;
    margin: 20px;

}

.navbar ul li a{
    padding:2px 10px; 
    text-decoration: none;
    font-weight: bold;

}

.navbar ul li a:hover {
    color: #5b88a5;
    background-color: #5b88a5;
    border-radius: 20px;
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.47);
}

#link-texto {

    text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.47);
    font-weight: bold;
}
#link-texto:hover {
    text-shadow:3px 3px 5px #ffffffa4;
}

.icons ul {

    padding:0px;
    margin-left: 15px;
    margin-top:15px;
    list-style:none;
    text-align: left;
}

#retorno {
    margin-left: 100%;
    position: relative;
}

#retorno:hover {
        box-shadow:3px 3px 5px #ffffffa4;
        
}

@media only screen and (max-width: 600px) {
    .col-2 {width: 50%;}
    .col-10 {width: 50%;}

    #Titulo {
        transform: translateY(0px);
    }

    .navbar ul { 
        font-size: 16px;
    }
    
    .navbar ul li a{
        padding:2px 2px; 
    
    }

    .navbar ul li {
        margin: 5px;
    
    }
}