/*  -------------------------------
    TABLE OF CONTENTS

    LAYOUT
    TYPOGRAPHY
    BACKGROUNDS
    COLORS
    MISCELLANEOUS
 -------------------------------  */

/* LAYOUT */
.contentwrapper{
    display: grid;
    margin: 3rem 0rem 3rem 0rem;
    gap: 3rem;

}

.name-profile{
    margin: 0 0 1rem 0;
    padding: 4rem 0 1rem 0;
}

.header-details h2{
    padding: 2rem 0 1rem 0;
}

.name-profile p{
    margin-bottom: 10rem;
}
   

.directory ul{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    margin-top: 42rem;
    margin-left: auto;
    margin-right: auto;
    padding: 1rem 1rem 1rem 1rem;
    text-align: center;
}
   
.directory a{
    text-decoration-line: none;
}

.introduction{
    display: grid;
    /* grid-template-columns: 1fr 2fr; */
}

.introduction h2{
    /* grid-column: span 2; */
    margin-top: 3rem;
    margin-bottom: 0;
    /* font-size: 1rem; */
    /* grid-column: -2 / 3; */
    text-align: center;
    
}

.contactme h2{
    text-align: center;
    margin-top: 0;
    padding-top: 2rem;
} 

.follow h2{
    text-align: center;
    margin-top: 0;
    padding-top: 2rem;
}

.introduction p{
    text-align: center;
    margin-top: 0;
    margin-bottom: 0;
    padding: 2rem 2rem 3rem 2rem;
}


header{
    height: 400px;
}

header h2{
    text-align: center;
    margin-top: 0;
}

header p, .contactme p{
    text-align: center;
    margin: 0;
}

.contactme h3{
    text-align: center;
}

.follow ul{
    /* display: grid; */
    grid-template-columns: repeat(4, 1fr);
    padding-bottom: 5rem;
    list-style: none;
    width: 30%;
    margin: auto;
    padding-left: 0rem;
    text-align: center;
}

.follow i{
    font-size: 30px;
    text-align: center;
}

/* .follow h2{
    margin: 0;
    padding: 1rem 0 1rem 0;
    grid-column: span 4;
} */

body{
    height: 100vh;
    grid-template-rows: auto auto 1fr auto;
    grid-template-columns: minmax(min-content , 8000px);
}

.introduction img{
    max-width: 100%;
    height: auto;
}



/* TYPOGRAPHY */
.directory ul li{
    list-style-type: none;
    text-decoration-line: none;
    color:purple;
}

.introduction{
    list-style: none;
}

.name-profile{
    font-family: 'Merienda', cursive;
    font-size: 50px;
    text-align: center;
}

.header-details h2{
    font-size: 3rem;
    text-align: center;
}

.content-wrapper p{
    /* text-align: left; */
    font-size: 22px;
}

.introduction h2 , .contactme h2, #connectwithme h2{
    font-size: 30px;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

.introduction p{
    font-size: 22px;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}

.follow ul li{
    list-style-type: none;
    scroll-behavior: smooth;
}

body{
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}

.contactme h3{
    font-size: 22px;
}

.directory a{
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-weight: bold;
    font-size: 19px;
}

.updates{
    text-align: center;
    font-size: 0.6rem;
}

/* BACKGROUNDS */

.introduction, .contactme, .follow{
    background-color: rgb(240 200 255 / 0.6)
}


header{
    background-image: url(images/Yellow\ Calm\ Personal\ LinkedIn\ Banner.png);
    background-size: 1000px;
}

/* COLORS */

header{
    color: black;
}

.directory a{
    color: black;
}

.updates{
    color: purple;
}

/* MISCELLANEOUS */