/* Google Font Style Options
     font-family: 'Great Vibes', cursive;
     font-family: 'Tangerine', cursive;
     font-family: 'Julius Sans One', sans-serif;
     font-family: 'Quicksand', sans-serif;
     font-family: 'Pompiere', cursive; */

body {
    display: grid;
    grid-template-areas: "topper"
                          "container"
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    background-color: #eeeeef;
    max-width: 100%;
    height: 100%;
}

/* Header Elements */
#topper {
     display: grid;
     grid-area: "topper";
     grid-template-columns: repeat(5,1fr);
     position: fixed;
     background-image: linear-gradient(#cbcbed, #eaeaef 35px, #cbcbed 100px);
     background-attachment: fixed;
     background-size: contain;
     overflow: hidden;
     width: 100%;
     height: 90px;
     top: 0;
     left: 0;
     border-bottom: 1px solid black;
     z-index: 2;
}

#container {
     margin-top: 95px;
     background-color: #eeeeef;
     max-width: 100%;
}

.name {
     font-family: 'Great Vibes', cursive;
     grid-column: 1/6;
     font-size: 40px;
     font-weight: lighter;
     margin: auto;
     margin-bottom: 0px;
}

.subject {
     /* font-family: 'Tangerine', cursive; */
     font-family: 'Julius Sans One', sans-serif;
     font-size: 18px;
     font-weight: lighter;
     text-align: right;
     margin: 0px 15px 5px auto;
     padding-right: 15px;
     grid-column: 3/6;
}
/* Navigation elements */
nav {
     max-width: 100%;
     max-height: 100%;
     min-width: 58px;
}

i {
     font-size: 28px;
     grid-column: 1/2;
     margin-left: 8px;
     margin-top: -10px;
}

#takeOut {
     grid-row: 2/3;
     grid-column: 1/2;
}
#menu {
     width: 300px;
     margin-top: 80px;
     position: fixed;
     z-index: 3;
}
#menu li {
     list-style-image: none;
     margin-left: -50px;
     padding: 8% 0%;
     display: block;
     background-color: navy;
     color: bisque;
     border: 1px solid gray;
     font-family: 'Julius Sans One', sans-serif;
     font-weight: bold;
     font-size: 22px;
     text-align: center;
     width: 120%;
     box-shadow: 10px 10px 7px black;
}

.open {
     position: absolute;
     /* This trasform moves the drawer onto canvas. */
     -webkit-transform: translate(250px, 0);
     transform: translate(0px, 0);
     /* Optionally, we animate the drawer. */
     transition: transform 0.3s ease;
}
.closed {
     position: absolute;
     /* This trasform moves the drawer off canvas. */
     -webkit-transform: translate(-400px, 0);
     transform: translate(px, 0);
     /* Optionally, we animate the drawer. */
     transition: transform 0.3s ease;
}

/* Body Elements */
#bio {
     grid-area: "container";
     display: grid;
     margin-right: 5px;
     grid-template-columns: 1fr;
     z-index: 1;
}

.profilePic {
     max-width: 40%;
     min-width: 100px;
     border: 1px solid gray;
     margin: 5px 10px;
     float: right;
}

.certificate {
     max-width: 40%;
     min-width: 100px;
     border: 1px solid gray;
     margin: 5px 10px;
     float: left;
}

.profileInfo {
     font-size: 18px;
     margin: 5px;
     text-align: justify;
}

.profileExpanded {
     font-size: 18px;
     margin: 5px;
     text-align: justify;
     display: none;
}

#projects {
     grid-area: "container";
     display: grid;
     margin-right: 5px;
     grid-template-columns: repeat(6,1fr);
     grid-auto-rows: auto;
     grid-column-gap: 5px;
     grid-row-gap: 5px;
     z-index: 1;
}

#sites {
     grid-area: "container";
     display: grid;
     margin-right: 5px;
     grid-template-columns: repeat(6,1fr);
     grid-auto-rows: auto;
     grid-column-gap: 5px;
     grid-row-gap: 5px;
     z-index: 1;
}
#skills {
     grid-area: "container";
     display: grid;
     margin-right: 5px;
     grid-template-columns: repeat(6,1fr);
     grid-auto-rows: auto;
     grid-column-gap: 5px;
     grid-row-gap: 5px;
     z-index: 1;
}

.list1 {
     font-family: 'Julius Sans One', sans-serif;
     font-size: 16px;
     font-weight: bold;
     margin: 5px;
     grid-column: 1/3;
     grid-row: 2/6;
}

.list2 {
     font-family: 'Julius Sans One', sans-serif;
     font-size: 16px;
     font-weight: bold;
     margin: 5px;
     grid-column: 4/7;
     grid-row: 2/6;
}

.list3 {
     font-family: 'Julius Sans One', sans-serif;
     font-size: 16px;
     font-weight: bold;
     margin: auto;
     margin-bottom: 10px;
     grid-column: 1/6;
     grid-row: 6/10;
}
#contact {
     grid-area: "container";
     display: grid;
     margin-right: 5px;
     grid-template-columns: 1fr;
     grid-auto-rows: auto;
     grid-row-gap: 5px;
     vertical-align: middle;
     z-index: 1;
}

#contact img {
     margin-top: 20px;
     margin-bottom: -5px;
}
.connect {
     display: block;
     margin: 20px auto 25px auto;
     font-family: 'Pompiere', cursive;
     font-size: 40px;
     text-decoration: none;
     font-weight: bold;
     text-align: center;
}

.segment {
     text-align: center;
     font-family: 'Julius Sans One', sans-serif;
     font-size: 22px;
     margin: -1px auto auto auto;
     padding-top: 10px;
     padding-bottom: 5px;
     width: 95%;
     color: bisque;
     border: 1px solid black;
     border-radius:50px;
     background-color: navy;
     grid-column: 1/7;
}

.section {
     position: relative;
     text-align: center;
     margin: 15px;
     padding: 10px;
     border-radius: 5px;
     box-shadow: 0px 5px 15px;
     background-color: #fffffc;
     grid-column: 1/7;
     /* max-width: 100%; */
}

.section h4 {
     text-decoration: underline;
     cursor: pointer;
}



.section1 {
     position: relative;
     text-align: center;
     margin: 15px;
     padding: 10px;
     border-radius: 5px;
     box-shadow: 0px 5px 15px;
     background-color: #fffffc;
     grid-column: 1/7;
     display: none;
}

.section2 {
     position: relative;
     text-align: center;
     margin: 15px;
     padding: 10px;
     border-radius: 5px;
     box-shadow: 0px 5px 15px;
     background-color: #fffffc;
     grid-column: 1/7;
     display: none;
}
.section3 {
     position: relative;
     text-align: center;
     margin: 15px;
     padding: 10px;
     border-radius: 5px;
     box-shadow: 0px 5px 15px;
     background-color: #fffffc;
     grid-column: 1/7;
     display: none;
}

.caption {
     font-family: 'Julius Sans One', sans-serif;
     font-size: 16px;
     text-align: center;
     margin: auto;
     padding: 3px;
}

.preview {
     grid-column: 3/span 3;
     grid-row: 1/4;
     max-width: 90%;
     border: 1px solid gray;
}