/**<--NAVIGATION-->*/
.navigation{
    width: 100%;
    margin: auto;
    display: flex;
    justify-content: center;
    position: fixed;
}
nav{
    padding: 35px;
    width: 100%;
    background-color: white;
    transition: .4s;
}
nav a{font-family: "Roboto", sans-serif;}
.navlinks{justify-content: space-between;}
.left_links, .right_links{display: none;}
.sm_links{
    overflow: hidden;
    transition: .3s;
    background-color: white;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 999;
}
.sm_links li{
    width: 60%;
    margin: auto;
    text-align: center;
}
.sm_links a{color: black;}
.navlinks .fa-bars, .navlinks .fa-earth-americas{
    cursor: pointer;
    padding: 10px;    
}
.navlinks .fa-bars{display: initial;}
.fa-earth-americas{
    color: #8B5CF6;
    border-bottom: 2px solid #8B5CF6;
}
.mode_btn img{
    border-radius: 50%;
    padding: 2px;
    width: 30px;
    height: 30px;
    object-fit: cover;
    cursor: pointer;
}

/**<--HEADER-->*/
.header_content{gap: 30px; height: 60vh;}
.header_content h1, .header_content h2{font: 700 1.8rem "Roboto", sans-serif;}
.header_content h2{color: #8B5CF6;}
.header_btns{
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.header_btns button{
    font:700 0.9rem "Roboto", sans-serif;
    width: 150px;
    border-radius: 5px;
    transition: .3s;
}
.search_box input{
    padding: 12px 30px;
    border-radius: 5px;
    border: none;
    outline: none;
}
.look_btn{background-color: #8B5CF6;}
.look_btn:hover{background-color: #704ac9;}
.search_btn{background-color: black;}
.search_btn:hover{background-color: rgb(41, 41, 41);}
.fa-magnifying-glass{
    left: 8px;
    top: 13px;
}
.fa-xmark{
    right: 8px;
    top: 13px;
    color: #0707a0;
}
.bg_main, header{background-color: #E5E7EB;}

.rand_country{
    display: flex;
    flex-direction: column;
    border-bottom: 2px solid #8B5CF6;
    cursor: pointer;
}
.rand_country_img{width: 100%;}
.rand_country_img img{
    width: 100%;
    max-height: 60vh;
    object-fit: cover;
}
.rand_country_info{
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.rand_country_info h3{
    font: 600 1.5rem "Roboto", sans-serif;
    margin-bottom: 10px;
    border-bottom: 2px solid transparent;
    transition: .4s;
}
.rand_country:hover .rand_country_info h3{border-bottom: 2px solid black;}
.rand_country_info a{
    font: 600 1rem "Roboto", sans-serif;
    color: #8B5CF6;
    text-decoration: underline;
}
.rand_country_info p{font: 400 1rem "Roboto", sans-serif;}

/**<--COUNTRIES-->*/
.countries{gap: 2%;}
.country {
    background: #f8f9fa;
    padding: 0;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    width: 100%;
    margin-bottom: 20px;
    cursor: pointer;
}
.country:hover .country_name{border-bottom: 2px solid black;}
.country_img {
    width: 100%;
    height: 200px;
}
.country_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.people_area_info{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}
.country .country_region{font: 600 1rem "Roboto", sans-serif;}
.country_name{
    border-bottom: 2px solid transparent; 
    transition: .4s;
    font: 700 1.5rem "Roboto", sans-serif;
}
.code{
    font: 400 0.9rem "Roboto", sans-serif;
    margin: 10px 0;
}
.population, .area {
    white-space: nowrap;
    font: 400 0.9rem "Roboto", sans-serif;
}
.more_btn{
    display: flex;
    justify-content: center;
}
.more_btn button{
    background-color: #fff;
    border: 1px solid #d5d9d9;
    border-radius: 10px;
    box-shadow: rgba(213, 217, 217, .5) 0 2px 5px 0;
    color: #0f1111;
    display: inline-block;
    font: 600 italic 0.9rem "Roboto", sans-serif;
    letter-spacing: 1px;
    padding: 10px 15px;
    transition: .3s;
}
.more_btn button:hover {background-color: #d6f8f8;}
.more_btn button:focus {
    border-color: #008296;
    box-shadow: rgba(213, 217, 217, .5) 0 2px 5px 0;
    outline: 0;
}

/**<--DETAILS_HTML-->*/
.detail_box{
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
.details{
    width: 90%;
    margin: auto;
    display: flex;
    flex-direction: column-reverse;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}
.country_detail_info{
    width: 100%;
    display: flex;
    flex-direction: column;
    background-color: #eee;
}
.details .country_name{border: none}
.alpha_code{font: 400 0.9rem "Roboto", sans-serif; margin: 10px 0;}
.capital, .alternative_name{font: 400 1rem "Roboto", sans-serif; margin: 5px 0;}
.alternative_name span{white-space: nowrap;}
.borders{flex-wrap: wrap;}
.border_name{
    background-color: #475569;
    font: 400 0.9rem "Roboto", sans-serif;
    cursor: pointer;
    padding: 2px 7px;
    margin-bottom: 10px;
}
.country_detail_img{
    width: 100%;
    height: 250px;
    img{
        width: 100%; 
        height: 100%;
        object-fit: cover;
    }
}

/**<--FOOTER-->*/
.footer_content img{
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 50%;
}
.social{gap: 10px;}
.social i{
    background-color: #8B5CF6;
    font-size: 20px;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    text-align: center;
    cursor: pointer;
}

@media (min-width:830px){
    .navlinks .fa-bars{display: none;}
    .mode_btn{
        position: absolute;
        right: 20px;
        top: 30px;
    }
    .navlinks{justify-content: center;}
    .left_links, .right_links{display: flex;}
    .left_links, .right_links{
        justify-content: center;   
        gap: 10px;
    }    
    .left_links a, .right_links a{
        color: black;
        border-bottom: 2px solid #e7e6e6;
        white-space: nowrap;
        transition: .3s;
    }
    .left_links a:hover, .right_links a:hover{border-bottom: 2px solid #aca9a9;}
    .navlinks .fa-earth-americas{margin: 0 20px;}
    .header_content h1{font: 700 3rem "Roboto", sans-serif;}
    .header_content h2{font: 700 2.4rem "Roboto", sans-serif;}
    .header_btns{flex-direction: row;}
    .rand_country{
        width: 80%;
        margin: auto;
        flex-direction: row;
        border-bottom: none;
        box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    }
    .rand_country_img{width: 60%;}
    .rand_country_info{width: 40%;}
    .rand_country_info h3{font-size: 2.5rem;}
    .country{width: 48%;}
    .details{
        width: 100%;
        flex-direction: row;
    }
    .country_detail_info{width: 50%;}
    .country_detail_img{
        width: 50%;
        height: 300px;
    }    
}

@media (min-width:991px){
    .country{width: 32%;}
    .left_links, .right_links{gap: 20px;}
    .country_detail_info{width: 60%;}
    .country_detail_img{
        width: 40%;
        height: 300px;
    }    
}