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


/******* Global CSS variable *******/

:root {
    /* font */
    --font-title : 'Roboto Condensed', sans-serif;
    --font-content : 'Montserrat', sans-serif;
    /* color*/
    --light-yellow : #f4f7dc;
    --super-dark-cyan : #003f3f;
    --dark-cyan : #008b8b;
    --middle-cyan : #00bebe;
    --middle-light-cyan : #d2ffff;
    --light-cyan : #d1ffff;
    --super-dark-grey : #18191b;
    --dark-grey : #51565d;
    --middle-grey: #757c86;
    --orange : #ffa500;
    --gold : #ffd700;
    --light-slate-gray : #778899;
    --white : #ffffff;

}

/******* Intro *******/

.intro_wrapper{
    padding : 3rem auto;
    display : flex;
    flex-direction : column;
    align-items : center;
    font-family : var(--font-title);
    background-color : var(--light-yellow);
}

.fa-globe-asia{
    font-size : 70px;
    color : var(--orange);
    padding-right : 1rem;
}

.title{
    color : var(--dark-grey);
    font-size : 35px;
    font-weight : 900;
    margin-top : 3rem;
}

.filteredResult{
    color : var(--dark-cyan);
    font-size : 20px;
    margin : 3rem auto;
}

.countCountries{
    color : var(--orange);
    font-weight: 900;
    font-size : 25px;
}


/******* Search input *******/

.search_sort_wrapper{
    display : flex;
    flex-direction: column;
    align-items: center;
    margin-bottom : 2rem;
    background-color : var(--light-slate-gray);
    padding : 2rem;
}

.search_input{
    width : 80%;
    height : 50px;
    outline : none;
    font-size : 16px;
    text-align : center;
}

[placeholder]:focus{
    background-color: var(--gold);
}

.sort_wrapper{
    display: flex;
    font-family: var(--font-title);
    font-size : 16px;
    margin-top : 2rem;
}

.sort_wrapper div input[type='radio'] {
    display: none;
}

.sort_wrapper div input[type='radio']+.labelBg{
    margin : 1rem;
    background-color: var(--light-yellow);
    padding: 1rem;
    color : var(--dark-grey);
}

.sort_wrapper div input[type='radio']:checked+.labelBg{
    margin : 1rem;
    background-color: var(--orange);
    padding: 1rem;
    color : var(--white);
}


/******* Search results *******/

.search_Results{
    display : flex;
    flex-wrap : wrap;
    justify-content: center;
}

.countryDiv{
    display : flex;
    flex-wrap: wrap;
    background-image : linear-gradient(to bottom right, var(--light-cyan), var(--middle-cyan));
    margin : 1rem;
    padding : 2rem;
    border-radius: 15px 50px;
    border : 2px var(--middle-light-cyan) solid;
}

.country_ul{
    list-style: none;
}

.country_ul li{
    margin: 1rem;
    font-family: 'Montserrat', sans-serif;
}

.key_span{
    width : 50px;
    margin : 1rem;
    color : var(--super-dark-cyan);
    font-weight : 900;
}

.country_ul li p{
    display: inline-block;
}

.name_value{
    font-size : 25px;
    font-weight: 900;
    color : var(--super-dark-grey);
}

.flagImg{
    width : 150px;
    height: 100px;
}