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

html{
    font-size: 63.5%;
    font-family: 'Roboto', sans-serif;
    font-size: 400  ;
}

/* 
samll font : 1.6rem
medium font : 2.4rem
large font : 3.2rem
other: multiple of 4

letter spacing: text - .18rem
                heading - .12rem


*/

/* containers */
.container{
    max-width: 80vw;
    margin: auto;
}

.hidden{
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.m-auto{
    margin: auto;
}
/* grids */

.grid{
    display: grid;
}

.grid-col-1{
    grid-template-columns: 1fr;
}
.grid-col-2{
    grid-template-columns: 1fr 1fr;
}
.grid-col-3{
    grid-template-columns: 1fr 1fr 1fr;
}

.gap-sm{
    gap: .8rem;
}

.gap-md{
    gap: 1.2rem;
}

.gap-lg{
    gap: 1.6rem;
}

/* fonts */
.i{
    font-style: italic;
}

.b{
    font-weight: bold;
}

.ib{
    font-style: italic;
    font-weight: 700;
}

/* $$$$$$$$$$$$$$$$$$$$$ UTILITIES CLASSES ENDS */

/* creating Header element */
.header{
    display: flex;
    justify-content: space-between;
    padding: 2rem;
}

#greet--heading{
    color: #404040;
}
/* ************************* LOGO styles start****************************** */
.logo{
    font-size: 2.4rem;
    letter-spacing: .12rem;
    color: #FFF;
    height: 3rem;
    width: 12rem;
    position: relative;
    
}

header a{
    text-decoration: none;
    color: #fff;
}

.logo::before,
.logo::after{
    content: '';
    position: absolute;
    height: 120%;
    border-radius: 1rem;
    width: 120%;
    transform: skew(20deg);
}

.logo::before{
    background-color: #E55969;
    z-index: -1;
    top: -.3rem;
    left: -1rem;
    
}

.logo::after{
    background-color: #4C91D8;
    z-index: -2;
    top: -1rem;
    left: -2rem;
}

.back{
    font-size: 1.6rem;
    color: #0041aa;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 600;
    padding: 0 2.4rem;
    position: relative;
}

.back::before{
    content: '\2190';
    height: 100%;
    width: 100%;
    position: absolute;
    right:  10%;
    bottom: 50%;
    font-size: 2.8rem;
}