:root {
    --thermometer: 0%;
}
/* Structure */

body{
    font-family: Arial, Helvetica, sans-serif;
    background-color: azure;
}

#name{
    text-align: center;
    background-color: orange;
}

#ex1-clicked{
    display: inline-block;
    text-align: right;
}

#ex1-clicked li{
    list-style-type: none;
    padding: 5px;
}

#ex1, #ex2{
    background-color: orange;
}

.flex-container{
    display: flex;
}

#compare-ages{
    background-color: peachpuff;
}

#fdr{
    padding-left: 15px;
}

/*display */
.hidden{
    display: none;
}

/*gradient*/
#gradient {
    width: 150px;
    height: 550px;
    margin: auto;
    background: linear-gradient(0deg, red var(--thermometer), white var(--thermometer) 100%);
}

/* Main-Navigation */
#main-nav ul{
    padding-left: 0%;
    list-style-type: none;
}

#main-nav li{
    text-align: center;
    padding: 10px;
    margin: 2px 0;
    
}

#main-nav a{
    text-decoration: none;
    color: red;
    border-bottom: 5px solid transparent;
}

#nav-toggle div{
    width: 40px;
    height: 5px;
    background-color: coral;
    margin: 5px;
}

/*Typography */
#main-nav-items li:hover{
    padding-bottom: 10px;
    border-bottom: 5px solid green;
}

strong{
    color: red;
}
/*Large Resolution */

@media only screen and (min-width: 900px){
    #main-nav-items{
        display: flex;
    }
    #main-nav-items li{
        flex:1;
    }
    #ex1,#ex2{
        margin: 0%, 25%;
    }
    #nav-toggle{
        display: none;
    }
}