style.css

:root {
    --gb0: "tranparent";
    --gb1: #0f0f1b;
    --gb2: #565a75;
    --gb3: #c6b7be;
    --gb4: #fafbf6;
    --gb5: #bab8dd; /*#bab8dd*/
}

/* var(--gb0) */

/* 
    For screens with a width larger than 500px:
*/


.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: none;
  }
  
  .tooltip .tooltiptext {
    visibility: hidden;
    width: 170px;
    background-color: #9d5c30;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    
    /* Position the tooltip */
    position: absolute;
    z-index: 1;
    top: 53px;
    left: -115%;
  }
  
  .tooltip:hover .tooltiptext {
    visibility: visible;
  }

#modHeader {
    background-color: transparent;
    position: relative;
    top: 0px;
    left: 0px;
    height:420px;
    width: 100%;
}

#profilePic {
    position: relative;
    top: 30px;
    left: 0px;
    height: 250px;
    width: 288px;
    border: #9d5c30;
    border-style: solid;
    border-radius: 50%;
    overflow: hidden;
    margin-left: auto;
    margin-right: auto;
}

#socialMedia {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    top: 60px;
    height: 50px;
    background-color: transparent;
    text-align: center;
    font-size: 10px;

}

#centerSmlIcons {
    position: relative;
    background-color: transparent;
    top:0%;
    left: 50%;
    height: 100%;
    width: 400px;
    height: 50px;
    transform: translate(-50% , 0% );
    /* overflow: hidden; */

}

#smlLink1 {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 50px;
    width: 50px;
    background-color: var(--gb0);
    border-block: none;
}

#smlLink2 {
    position: absolute;
    top: 0px;
    left: 70px;
    height: 50px;
    width: 50px;
    background-color: var(--gb0);
    border-block: none;
}
#smlLink3 {
    position: absolute;
    top: 8px;
    left: 140px;
    height: 50px;
    width: 50px;
    background-color: var(--gb0);
    border-block: none;
}
#smlLink4 {
    position: absolute;
    top: 0px;
    left: 210px;
    height: 50px;
    width: 50px;
    background-color: var(--gb0);
    border-block: none;
}
#smlLink5 {
    position: absolute;
    top: 0px;
    left: 280px;
    height: 50px;
    width: 50px;
    background-color: var(--gb0);
    border-block: none;
}
#smlLink6 {
    position: absolute;
    top: 0px;
    left: 350px;
    height: 50px;
    width: 50px;
    background-color: var(--gb0);
    border-block: none;
}

._1 {
	grid-column: 1;
	grid-row: 1;
}

._100 {
	grid-column: 10;
	grid-row: 10;
}

.project_1 {
    grid-column: 2 / 10; /* start at 2 end at 10 */
    grid-row: 3 / 10;
    background-color: var(--gb0);
    position: relative;
    line-height: 1.6;
}


.project_2 {
    grid-column: 2 / 10; /* start at 2 end at 10 */
    grid-row: 12 / 19;
    background-color: var(--gb0);
    position: relative;
    line-height: 1.6;
}

.project_3 {
    grid-column: 2 / 10; /* start at 2 end at 10 */
    grid-row: 21 / 28;
    background-color: var(--gb0);
    position: relative;
    line-height: 1.6;
}

.project_4 {
    grid-column: 2 / 10; /* start at 2 end at 10 */
    grid-row: 30 / 37;
    background-color: var(--gb0);
    position: relative;
    line-height: 1.6;
}

.project_5 {
    grid-column: 2 / 10; /* start at 2 end at 10 */
    grid-row: 39 / 46;
    background-color: var(--gb0);
    position: relative;
    line-height: 1.6;
}

.project_6 {
    grid-column: 2 / 10; /* start at 2 end at 10 */
    grid-row: 48 / 55;
    background-color: var(--gb0);
    position: relative;
    line-height: 1.6;
}

.project_7 {
    grid-column: 2 / 10; /* start at 2 end at 10 */
    grid-row: 57 / 64;
    background-color: var(--gb0);
    position: relative;
    line-height: 1.6;
}

/*
    inner divs for views of content
*/

.topLeft {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 30%;
    width: 30%;
    background-color: var(--gb0);
}

.bottomLeft {
    position: absolute;
    top: 31%;
    left: 0px;
    height: 69%;
    width: 30%;
    background-color: var(--gb0);
}

.fullRight {
    position: absolute;
    top: 0px;
    left: 31%;
    height: 100%;
    width: 69%;
    background-color: var(--gb0);
    overflow: hidden; 
    border-radius: 5px;
}

.logoPosition { /* center the logo HACK */
    position: relative;
    /* left: 50%;
    margin-left: -50px; */
    float: right;
}

a, a:hover, a:focus, a:active, a:visited {
    text-decoration: none;
    color: inherit;
}

.linkPosition {
    position: relative;
    float: right;
    top: 10%;
    margin-left: -50px;
    margin-top: -50px;
}

.linkPositionCustom {
    position: absolute;
    top: 85px;
    right: 0px;
}

.examine {
    position: relative;
    font-size: 10px;
    left: 0px;
    top: -20px;
    width: fit-content;
    background-color: transparent;
}
.projTitle {
    position: relative;
    top: 0px;
    font-size: 10px;
    height: fit-content;
}

.projImgPosition {
    position: relative;
    top:15px;
    

}

.projImgPositionGif {
    position: relative;
    top:15px;
}

img {
    max-width:100%;
    max-height:100%;
    border-radius: 5px;
}


.ResumeDiv {
    grid-column: 2 / 10; /* start at 2 end at 10 */
    grid-row: 65 / 67;
    background-color: transparent;
    position: relative;
    line-height: 1.6;
    text-align: center;
}