:root{
    /* fonts */
    --MainFont: 'Poppins', sans-serif;
    /* colors */
    --Dark: #111;
    --Light: #fff;
    --ColorAqua: #16adbd;
    --BackgroundColor:#111;
    --FontColor: #fff;
    --MainColor: brown;
}
*{
    margin: 0px;
    padding: 0px;
    font-family: var(--MainFont);
    scroll-behavior: smooth;
}
body{
    background-color: var(--BackgroundColor);
}
main{
    margin: 25px 15%;
    color: var(--FontColor);
}
p{
    word-wrap: break-word
}

.smart-link{
    text-decoration: none;
    color: var(--MainColor);
    background-image: linear-gradient(90deg, var(--FontColor),var(--FontColor));
    padding-bottom: 2px;
    background-size: 0% 1px;
    background-repeat: no-repeat;
    transition: background-size 300ms ease;
    background-position: bottom left;
}
.smart-link:hover{
    background-size: 100% 2px;
}
.menu-link{
    text-decoration: none;
    color: var(--FontColor);
    background-image: linear-gradient(90deg, var(--MainColor),var(--MainColor));
    background-size: 0% 2px;
    background-repeat: no-repeat;
    transition: background-size 300ms ease;
    background-position: bottom ;
}
.menu-link:hover{
    background-size: 100% 2px;
}
/*  =============== Nav Menu ===============*/
nav{
    margin: 25px auto;
    display: flex;
    justify-content: center;
}
nav ul{
    display: flex;
    justify-content: center;
    flex-direction: row;
    flex-wrap: wrap;
    max-width: 100%;
    
}
nav li{
    margin: auto 15px;
    list-style: none;
    font-size: 1.3em;
}
#hot-menu{
    position: absolute;
    right: 20px;
}
.nav-icon{
    width:24px;
    cursor: pointer;
}
/*  =============== hero intro ===============*/
.intro-section div{
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0em 2em;
}
.intro-section{
    display: flex;
    justify-content: center;
    margin: 80px 0px;
}
header h1{
    color: var(--FontColor);
    font-size: xxx-large;
    margin: 25px 0px;
    -ms-transform: rotate(5deg); /* IE 9 */
    transform: rotate(5deg);
}
header h1 span{
    background-color: var(--MainColor);
    padding: 5px 25px;
    color: var(--Light);
}
header h1 span::after{
    content: '👋';
    margin: -0.7em -0.2em;
    position: absolute;
    cursor: grab;
}
header h2{
    color: var(--FontColor);
    font-family: 'Raleway';
    margin-top: -1.2em;
}
header h2 span{
    color: var(--MainColor);
    font-size: xx-large;
}
/*  =============== Nav Menu ===============*/
section h2{
    margin: 0.5em -0.5em;
}
@media only screen and (max-width: 500px) {
    #hot-menu{
        right: 5px;
        top: 100px;
    }
  }