body {
    background-color: #242E2C;
    margin: 0;
}
header {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #242E2C; 
    padding: 10px 0;
} 
nav ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}    
nav ul li {
    margin: 0 20px;
    display: flex;
    align-items: center; 
}
nav ul li h1 {
    font-weight: bold;
    margin: 0;
    font-family: "Vollkorn SC", serif;
    font-weight: 400;
    font-style: normal;
    color: #9A8762;
    font-size: 2.5em;
}
nav ul li p {
    margin: 0;
    font-family: "Vollkorn SC", serif;
    font-weight: 400;
    font-style: normal;
    color: #78A190;
    font-size: 1em;
}
 nav ul li p a:visited, nav ul li p a:link {
    text-decoration: none;
    color: #78A190;
}
nav ul li p a:hover {
    color:#d8e8cf;
 }
.hero {
    background-image: url(images/Hero.jpg);
    background-size: cover;
    height: 45em;
    width: 100%;

}
.heroname {
    background-color: #242E2C;
    position: absolute;
    top: 45%; 
    transform: translateY(-32%);
    padding: 7% 8%;
    margin: 0;
    padding-right: 15%;
    
}
.heroname h2 {
    font-family: "Vollkorn SC", serif;
    font-weight: 400;
    font-style: normal;
    color: #9A8762;
    font-size: 6em;
    padding-top: 0;
    margin-top: -1%;
}
.heroname h3 {
    font-family: "Afacad", sans-serif;
    font-weight: normal;
    font-style: normal;
    color: #DADEC2;
    font-size: 2em;
    margin-top: -12%;
}
.artwork {
    margin: 4%;
    margin-left: 2%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 5%;
    padding-bottom: 3%;
}
.learnmore1 a:link, .learnmore1 a:visited, .learnmore4 a:link, .learnmore4 a:visited, .learnmore5 a:link, .learnmore5 a:visited {
    color: #242E2C;
    text-decoration: none;
}
.learnmore1 a:hover, .learnmore4 a:hover, .learnmore5 a:hover {
    color: #4d5b58;
    text-decoration: none;
}
.learnmore2 a:link, .learnmore2 a:visited, .learnmore3 a:link, .learnmore3 a:visited, .learnmore6 a:link, .learnmore6 a:visited {
    color: #242E2C;
    text-decoration: none;
}
.learnmore2 a:hover, .learnmore3 a:hover, .learnmore6 a:hover {
    color: #4d5b58;
    text-decoration: none;
}
.artimg1 {
    position: relative;
    height: 100%;
}
.image1 {
    height: auto;
    width: 105%;
    padding: 0%;
    background-color: #242E2C;
    display: block;
}
.overlay1 {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 105%;
    opacity: 0;
    transition: .5s ease;
    background-color: #78A19098;   
}
.artimg1:hover .overlay1,
.artimg1:active .overlay1,
.artimg1:focus-within .overlay1 {
    opacity: 1;
}
.artimg1:hover .text1,
.artimg1:active .text1,
.artimg1:focus-within .text1 {
    opacity: 1;
}  
.text1 {
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    color: #242E2C; 
    padding: 0px; 
    margin: 0;
    border-radius: 5px; 
    opacity: 0; 
    transition: opacity 0.3s;
    text-align: center;
    font-family: "Vollkorn SC", serif;
    font-weight: 600;
    font-style: normal;
    font-size: 2.5em;
    text-decoration: none;
}
.text1 a:link, .text1 a:visited a:hover {
    text-decoration: none;
}
.artimg2 {
    position: relative;
    height: 100%;
}
.image2 {
    height: auto;
    width: 105%;
    padding: 0%;
    background-color: #78A190;
    display: block;
}
.overlay2 {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 105%;
    opacity: 0;
    transition: .5s ease;
    background-color: #78A19098;   
}
.artimg2:hover .overlay2,
.artimg2:active .overlay2,
.artimg2:focus-within .overlay2 {
    opacity: 1;
}

.artimg2:hover .text2,
.artimg2:active .text2,
.artimg2:focus-within .text2 {
    opacity: 1;
} 
.text2 {
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    color: #242E2C;  
    padding: 0px; 
    margin: 0;
    border-radius: 5px; 
    opacity: 0; 
    transition: opacity 0.3s;
    text-align: center;
    font-family: "Vollkorn SC", serif;
    font-weight: 600;
    font-style: normal;
    font-size: 2.5em;
}

.artimg3 {
    position: relative;
    height: 100%;
}
.image3 {
    height: auto;
    width: 105%;
    padding: 0%;
    background-color: #78A190;
    display: block;
    margin-top: -5%;
}
.overlay3 {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 106%;
    width: 105%;
    opacity: 0;
    transition: .5s ease;
    background-color: #78A19098; 
    margin-top: -5%;  
}
.artimg3:hover .overlay3,
.artimg3:active .overlay3,
.artimg3:focus-within .overlay3 {
    opacity: 1;
}
.artimg3:hover .text3,
.artimg3:active .text3,
.artimg3:focus-within .text3 {
    opacity: 1;
}  
.text3 {
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    color: #242E2C;  
    padding: 5px; 
    border-radius: 5px; 
    opacity: 0; 
    transition: opacity 0.3s;
    text-align: center;
    font-family: "Vollkorn SC", serif;
    font-weight: 600;
    font-style: normal;
    font-size: 2.5em;
}
.artimg4 {
    position: relative;
    height: 100%;
}
.image4 {
    height: 106%;
    width: 105%;
    padding: 0%;
    background-color: #242E2C;
    display: block;
    margin-top: -5%;
}
.overlay4 {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 106%;
    width: 105%;
    opacity: 0;
    transition: .5s ease;
    background-color: #78A19098;   
    margin-top: -5%; 
}
.artimg4:hover .overlay4,
.artimg4:active .overlay4,
.artimg4:focus-within .overlay4 {
    opacity: 1;
}
.artimg4:hover .text4,
.artimg4:active .text4,
.artimg4:focus-within .text4 {
    opacity: 1;
} 
.text4 {
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    color: #242E2C;   
    padding: 5px; 
    border-radius: 5px; 
    opacity: 0; 
    transition: opacity 0.3s;
    text-align: center;
    font-family: "Vollkorn SC", serif;
    font-weight: 600;
    font-style: normal;
    font-size: 2.5em;
}
.artimg5 {
    position: relative;
    height: 100%;
}
.image5 {
    height: auto;
    width: 105%;
    padding: 0%;
    background-color: #242E2C;
    display: block;
    margin-top: -5%;
    margin-bottom: 16%;
}
.overlay5 {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 87.5%;
    width: 105%;
    opacity: 0;
    transition: .5s ease;
    background-color: #78A19098; 
    margin-top: -5%;   
}
.artimg5:hover .overlay5,
.artimg5:active .overlay5,
.artimg5:focus-within .overlay5 {
    opacity: 1;
}
.artimg5:hover .text5,
.artimg5:active .text5,
.artimg5:focus-within .text5 {
    opacity: 1;
} 
.text5 {
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    color: #242E2C;   
    padding: 5px; 
    border-radius: 5px; 
    opacity: 0; 
    transition: opacity 0.3s;
    text-align: center;
    font-family: "Vollkorn SC", serif;
    font-weight: 600;
    font-style: normal;
    font-size: 2.5em;
}

.artimg6 {
    position: relative;
    height: 100%;
}
.image6 {
    height: auto;
    width: 105%;
    padding: 0%;
    background-color: #78A190;
    display: block;
    margin-top: -5%;
}
.overlay6 {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 87.8%;
    width: 105%;
    opacity: 0;
    transition: .5s ease;
    background-color: #78A19098;  
    margin-top: -5%; 
}
.artimg6:hover .overlay6,
.artimg6:active .overlay6,
.artimg6:focus-within .overlay6 {
    opacity: 1;
}
.artimg6:hover .text6,
.artimg6:active .text6,
.artimg6:focus-within .text6 {
    opacity: 1;
} 
.show .overlay1,
.show .overlay2,
.show .overlay3,
.show .overlay4,
.show .overlay5,
.show .overlay6,
.show .text1,
.show .text2,
.show .text3,
.show .text4,
.show .text5,
.show .text6 {
    opacity: 1;
}
.text6 {
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    color: #131a19;  
    padding: 5px; 
    border-radius: 5px; 
    opacity: 0; 
    transition: opacity 0.3s;
    text-align: center;
    font-family: "Vollkorn SC", serif;
    font-weight: 600;
    font-style: normal;
    font-size: 2.5em;
}
.aboutme {
    background-image: url(images/Hero.jpg);
    height: 50em;
    background-size: cover;
}
.bottomhero {
    background-color: #242E2C;
    top: 50%; 
    transform: translateY(16%);
    padding: 10% 2%;
    margin: 0;
    padding-left: 5%;
    margin-left: 27%;
    padding-right: 6%;
    padding-top: 0.2%;
}
.aboutmetitle {
    font-family: "Vollkorn SC", serif;
    font-weight: 400;
    font-style: normal;
    font-size: 3.4em;
    color: #9A8762;
    text-align: right;
    margin: 0;
    padding: 0;
    margin-top: -3%;
    margin-bottom: -5%;
}
.aboutmecontent {
    font-family: "Afacad", sans-serif;
    font-weight: normal;
    font-style: normal;
    color: #B7BAA0;
    text-align: right;
    line-height: 2em;
    font-size: 1.2em;
    margin: 0;
    padding-left: 20%;
    padding-top: -3%;
    margin-top: -3%;
}
.resume {
    font-family: "Vollkorn SC", serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1.5em;
    color:#9A8762;
    background-color: #2F544E;
    text-align: center;
    margin-left: 78%;
    margin-bottom: -9%;
}
.resume h5 {
    padding-top:10%;
    padding-bottom: 10%;
}
.resume a:link, .resume a:visited {
    color:#9A8762;
    text-decoration: none;
}
.resume a:hover {
    color: #beaf92;
    text-decoration: none;
}
.aboutmeimg img {
    position: absolute;
    height: auto;
    width: 21%;
    left: 20%;
    transform: translateX(60%);
    transform: translateY(-92%);
    box-shadow: 4px 4px 10px #131a19;
}
footer {
    background-color: #242E2C;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 4%;
    padding: 0;
    height: 10em;
}
.reachout {
    grid-column: 1/span 2;
    text-align: center;
    font-family: "Vollkorn SC", serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1.9em;
    color:#9A8762;
    margin: 0;
    padding: 0;
}
.email {
    grid-column: 1/span 1;
    text-align: right;
    font-family: "Afacad", sans-serif;
    font-weight: normal;
    font-style: normal;
    color: #78A190;
    padding-top: 0;
    margin-top: -5%;
    margin-bottom: -2%;
}
.email h6 {
    font-size: 1.5em;
    margin: 0;
    color:#9A8762;
    margin-bottom: -1%;
}
.email p {
    font-size: 1.2em;
    padding-top: -5%;
}
.instagram {
    grid-column: 2/span 1;
    text-align: left;
    font-family: "Afacad", sans-serif;
    font-weight: normal;
    font-style: normal;
    color: #78A190;
    margin-top: -5%;
    margin-bottom: -2%;
}
.instagram h6 {
    font-size: 1.5em;
    margin: 0;
    color:#9A8762;
    margin-bottom: -1%;
}
.instagram p {
    font-size: 1.2em;
    padding-top: -5%;
}
.copy {
    grid-column: 1/span 2;
    text-align: center;
    margin: 0;
    padding: 0;
    font-family: "Afacad", sans-serif;
    font-weight: normal;
    font-style: normal;
    color: #9A8762;
    font-size: 0.8em;
    padding-bottom: 1%;
}
.content {
    margin: 5% 8%;
    display: grid;
    grid-template-columns: 1fr 1fr;     
    grid-gap: 5%;
}
.P1mainimg img {
    width: 100%;
    height: auto;
    justify-content: center;
    margin-bottom: -8%;
    padding: 1%;
    background-color: #9A8762;
}
.description {
    font-family: "Afacad", sans-serif;
    font-weight: normal;
    font-style: normal;
    margin-bottom: 5%;
}
.p1 {
    color:#9A8762;
    font-size: 1.5em;
    grid-column: 1/span 2;
}
.p2 {
    color:#78A190;
    font-size: 1.4em;
}
.P1additionalimg {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5%;
    grid-column: 1 / span 2;
    justify-items: center; 
    align-items: center;
}
.P1subimg1 {
    height: auto;
    width: 100%;
    grid-column: 1/span 2;
    justify-content: right;
    padding: 0.5%;
    background-color: #9A8762;
    margin-bottom: -4%;
    margin-top: -2%;
}
.P1subimg2 {
    height: auto;
    width: 100%;
    justify-content: center;
    padding: 1%;
    background-color: #9A8762;
    margin-bottom: -8%;
}
.P1subimg3 {
    height: auto;
    width: 100%;
    justify-content: right;
    padding: 1%;
    background-color: #9A8762;
    margin-bottom: -8%;
}
.P1subimg4 {
    height: auto;
    width: 100%;
    justify-content: center;
    padding: 1%;
    background-color: #9A8762;
    margin-bottom: 40%;
}
.P1subimg5 {
    height: auto;
    width: 100%;
    justify-content: right;
    padding: 1%;
    background-color: #9A8762;
    margin-bottom: 40%;
}
.P2mainimg img {
    width: 100%;
    height: auto;
    padding: 1%;
    background-color: #9A8762;
    grid-column: 1/span 2;
    justify-content: center;
    margin-bottom: 5%;
}
.P2additionalimg {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5%;
    grid-column: 1 / span 2;
    justify-items: center; 
    align-items: center;
}
.P2subimg1 {
    grid-column: 1/span 1;
    background-color: #9A8762;
    padding: 1%;
    height: auto;
    width: 100%;
    justify-content: left;
    margin-bottom: -5%;
}
.P2subimg2 {
    grid-column: 2/span 1;
    background-color: #9A8762;
    padding: 1%;
    height: auto;
    width: 100%;
    justify-content: right;
    margin-bottom: -5%;
}
.P2subimg3 {
    grid-column: 1/span 1;
    background-color: #9A8762;
    padding: 1%;
    height: auto;
    width: 100%;
    justify-content: left;
    margin-bottom: -5%;
}
.P2subimg4 {
    grid-column: 2/span 1;
    background-color: #9A8762;
    padding: 1%;
    height: auto;
    width: 100%;
    justify-content: right;
    margin-bottom: -5%;
}
.P2subimg5 {
    grid-column: 1/span 1;
    background-color: #9A8762;
    padding: 1%;
    height: auto;
    width: 100%;
    justify-content: left;
    margin-bottom: 30%;
}
.P2subimg6 {
    grid-column: 2/span 1;
    background-color: #9A8762;
    padding: 1%;
    height: auto;
    width: 100%;
    justify-content: right;
    margin-bottom: 30%;
}
.P3mainimg img {
    width: 100%;
    height: auto;
    padding: 1%;
    background-color: #9A8762;
    grid-column: 1/span 2;
    justify-content: center;
    margin-bottom: 5%;
}
.P3additionalimg {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5%;
    grid-column: 1 / span 2;
    justify-items: center; 
    align-items: center;
}
.P3subimg1 {
    grid-column: 1/span 1;
    background-color: #9A8762;
    padding: 1%;
    height: auto;
    width: 100%;
    justify-content: left;
}
.P3subimg2 {
    grid-column: 2/span 1;
    background-color: #9A8762;
    padding: 1%;
    height: auto;
    width: 100%;
    justify-content: right;
}
.P3subimg3 {
    grid-column: 1/span 1;
    background-color: #9A8762;
    padding: 1%;
    height: auto;
    width: 100%;
    justify-content: left;
    margin-bottom: 5%;
}
.P3subimg4 {
    grid-column: 2/span 1;
    background-color: #9A8762;
    padding: 1%;
    height: auto;
    width: 100%;
    justify-content: right;
    margin-bottom: 5%;
}
.P3subimg5 {
    grid-column: 1/span 2;
    background-color: #9A8762;
    padding: 1%;
    height: auto;
    width: 45%;
    justify-content: center;
    align-items: center;
}
.P4mainimg img {
    width: 100%;
    height: auto;
    padding: 1%;
    background-color: #9A8762;
    grid-column: 1/span 2;
    justify-content: center;
    margin-right: 10%;
    margin-bottom: 5%;
}
.P4additionalimg {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5%;
    grid-column: 1 / span 2;
    justify-items: center; 
    align-items: center;
}
.P4subimg1 {
    grid-column: 1/span 1;
    height: auto;
    width: 100%;
    justify-content: left;
    margin-right: 5.2%;
    margin-bottom: 5%;
}
.P4subimg2 {
    grid-column: 2/span 1;
    height: auto;
    width: 100%;
    justify-content: right;
    margin-bottom: 15%;
    vertical-align: top;
}
.P5mainimg img {
    width: 100%;
    height: auto;
    padding: 1%;
    background-color: #9A8762;
    grid-column: 1/span 2;
    justify-content: center;
    margin-bottom: 5%;
}
.P5additionalimg {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5%;
    grid-column: 1 / span 2;
    justify-items: center; 
    align-items: center;
}
.P5subimg1 {
    grid-column: 1/span 2;
    background-color: #9A8762;
    padding: 0.5%;
    height: auto;
    width: 100%;
    justify-content: left;
    margin-top: -5%;
}
.P5subimg2 {
    grid-column: 1/span 1;
    background-color: #9A8762;
    padding: 1%;
    height: auto;
    width: 100%;
    justify-content: right;
    margin-top: -10%;
}
.P5subimg3 {
    grid-column: 2/span 1;
    background-color: #9A8762;
    padding: 1%;
    height: auto;
    width: 100%;
    justify-content: left;
    margin-top: -10%;
}
.P5subimg4 {
    grid-column: 1/span 1;
    background-color: #9A8762;
    padding: 1%;
    height: auto;
    width: 100%;
    justify-content: right;
    margin-top: -10%;
}
.P5subimg5 {
    grid-column: 2/span 1;
    background-color: #9A8762;
    padding: 1%;
    height: auto;
    width: 100%;
    justify-content: left;
    margin-top: -10%;
}
.P5subimg6 {
    grid-column: 1/span 1;
    background-color: #9A8762;
    padding: 1%;
    height: auto;
    width: 100%;
    justify-content: right;
    margin-top: -10%;
    margin-bottom: 70%;
}
.P5subimg7 {
    grid-column: 2/span 1;
    background-color: #9A8762;
    padding: 1%;
    height: auto;
    width: 100%;
    justify-content: right;
    margin-top: -10%;
    margin-bottom: 70%;
}
.P6mainimg {
    grid-column: 1 / 2;
    gap:5%;
    margin-right: 8%;
    margin-bottom: 5%;
}
.P6mainimg img {
    width: 110%;
    padding: 1%;
    background-color: #9A8762;
} 
.P6additionalimg {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5%;
    grid-column: 1 / span 2;
    justify-items: center; 
    align-items: center;
}
.P6subimg1 {
    grid-column: 1/span 2;
    background-color: #9A8762;
    padding: 0.5%;
    height: auto;
    width: 100%;
    justify-content: left;
    margin-bottom: 5%;
}

@media screen and (max-width: 480px) {
    nav ul li {
        margin: 0 10px;
    }
    nav ul li h1 {
        font-size: 2em;
    }
    nav ul li p {
        font-size: 0.7em;
    }
    .hero {
        height: 20em; 
    }
    .heroname {
        top: 27%; 
        padding-right: 10%;
        
    }
    .heroname h2 {
        font-size: 3em;
    }
    .heroname h3 {
        font-size: 1em;
    }
    .artwork {
        grid-template-columns: repeat(1, 1fr);
        grid-gap: 1%;
    }
    .image1 {
    width: 102%;
    }
    .text1 {
        font-size: 1.5em;
    } 
    .overlay1 {
    width: 102%;  
    }
    .image2 {
    width: 102%;
    margin-bottom: 5%;
    }
    .text2 {
        font-size: 1.5em;
    } 
    .overlay2 {
    width: 102%;  
    height: 93.5%;
    }
    .image3 {
    width: 102%;
    margin-bottom: 5%;
    }
    .text3 {
        font-size: 1.5em;
    }
    .overlay3 {
    width: 102%;  
    height: 100%;
    }
    .image4 {
    width: 102%;
    margin-bottom: -5%;
    }
    .text4 {
        font-size: 1.5em;
    }
    .overlay4 {
    width: 102%;  
    height: 106%;
    }
    .image5 {
    width: 102%;
    margin-bottom: 5%;
    margin-top: -2%;
    }
    .text5 {
        font-size: 1.5em;
    }
    .overlay5 {
    height: 96.5%;
    width: 102%;
    margin-top: -2%;   
    }
    .image6 {
    width: 102%;
    margin-bottom: 10%;
    }
    .text6 {
        font-size: 1.5em;
    }
    .overlay6 {
    height: 94%;
    width: 102%;   
    }
    .aboutme {
        height: 32em;
    }
    .bottomhero {
        margin-top: 15%;
    }
    .aboutmetitle {
        font-size: 1.5em;
        margin-bottom: -10%;
    }
    .aboutmecontent {
        line-height: 1.5em;
        font-size: 0.6em;
        padding-left: 20%;
    }
    .resume {
        font-size: 1.4em;
        padding: 0%;
        margin-left: 30%;
        border-radius: 0%;
    }
    .aboutmeimg img {
        left: 10%;
        height: auto;
        width: 30%;
        transform: translateX(50%);
        transform: translateY(-130%);
    }
    footer {
        height: 13em;
    }
    .reachout {
        font-size: 1.8em;
        margin-bottom: -5%;
    }
    .email h6 {
        font-size: 1.3em;
    }
    .email p {
        font-size: 0.9em;
    }
    .instagram h6 {
        font-size: 1.3em;
    }
    .instagram p {
        font-size: 0.9em;
    }
    .copy {
        margin-top: -2%;
        margin-bottom: 0%;
    }
    .content {
        grid-template-columns: repeat(1, 1fr);
    }
    .P1mainimg img {
        grid-column: 1/span 1;
        width: 100%;
        margin-bottom: -20%;
    }
    .P2mainimg {
        margin-bottom: -40%;
    }
    .description {
        grid-column: 1/span 1;
    }
    .p1 {
        font-size: 1.3em;
        margin-top: 10%;
    }
    .p2 {
        font-size: 1.1em;
    }
    .P3mainimg {
        margin-bottom:-20%;
    }
    .P2subimg1, .P3subimg1, .P4subimg1, .P5subimg1, .P6subimg1 {
        grid-column: 1/span 2;
        width: 100%;
        margin-bottom: -5%;
    }
    .P1subimg2, .P2subimg2, .P3subimg2, .P4subimg2, .P5subimg2, .P6subimg2, .P3subimg3, .P3subimg4, .P3subimg5, .P6subimg3, .P6subimg4 {
        grid-column: 1/span 2;
        width: 100%;
    }
    .P2subimg2 {
        margin-top: -25%;
    }
    .P1subimg1, .P1subimg2, .P1subimg3, .P1subimg4, .P1subimg5 {
        grid-column: 1/span 2;
        width: 100%;
    } 
    .P1subimg1 {
        margin-top: -20%;
    }
    .P2subimg1, .P2subimg3, .P2subimg4, .P2subimg5, .P2subimg6 {
        grid-column: 1/span 2;
        width: 100%;
        margin-top: -15%;
    }
    .P1subimg4 {
        margin-bottom: -10%;
    }
    .P1subimg5 {
        margin-bottom: 150%;
    }
    .P2subimg1 {
        margin-top: -30%;
    }
    .P2subimg6 {
        margin-top: -50%;
        margin-bottom: 200%;
    }
    .P3subimg3 {
        margin-bottom: -5%;
    }
    .P3subimg2 {
        margin-bottom: -5%;
    }
    .P3subimg4 {
        margin-bottom: 110%;
    }
    .P4mainimg {
        margin-bottom: -30%;
    }
    .P4subimg1 {
        margin-top: -30%;
    }
   .P4subimg2 {
        margin-bottom: 100%;
   } 
   .P5mainimg {
        margin-bottom: -40%;
   }
   .P5subimg1 {
        margin-top: -90%;
        margin-bottom: -40%;
   }
   .P5subimg2, .P5subimg3, .P5subimg4, .P5subimg5, .P5subimg6, .P5subimg7 {
        grid-column: 1/span 2;
   }
   .P5subimg2 {
        margin-top: -40%;
   }
   .P5subimg3 {
        margin-top: -30%;
   }
   .P5subimg4 {
        margin-top: -30%;
   }
   .P5subimg5 {
        margin-top: -30%;
   }
   .P5subimg6 {
        margin-top: -30%;
   }
   .P5subimg7 {
        margin-top: -100%;
        margin-bottom: 330%;
   }
   .P6mainimg {
    margin-bottom: -10%;
   }
   .P6subimg1 {
    margin-top: -10%;
    margin-bottom: 20%;
   }
}
@media only screen and (min-width: 481px) and (max-width: 768px) {
    .hero {
        height: 28em;
    }
    .heroname {
        top: 35%; 
        padding: 10% 5%;
        padding-right: 10%;   
    }
    .heroname h2 {
        font-size: 4em;
    }
    .heroname h3 {
        font-size: 1.5em;
    }
    .text1, .text2, .text3, .text4, .text5, .text6{
        font-size: 1.2em;
    }
    .aboutme {
        height: 50em;
    }
    .aboutmetitle {
        font-size: 2em;
    }
    .aboutmecontent {
        font-size: 0.7em;
    }
    .resume {
        padding: 0.5% 3%;
        margin-left: 60%;
    }
    .aboutmeimg img {
        transform: translateY(-130%);
        height: auto;
        width: 30%;
        left: 10%;
    } 
    .p1 {
        font-size: 1.4em;
    }
    .p2 {
        font-size: 1.2em;
    }
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
    .hero {
        height: 40em; 
    }
    .heroname {
        top: 45%; 
        padding-right: 10%;
        
    }
    .heroname h2 {
        font-size: 5.5em;
    }
    .heroname h3 {
        font-size: 2em;
    }
    .text1, .text2, .text3, .text4, .text5, .text6{
        font-size: 1.3em;
    }
    .aboutme {
        height: 50em;
    }
    .aboutmetitle {
        font-size: 2em;
    }
    .aboutmecontent {
        font-size: 0.8em;
    }
    .resume {
        padding: 0.5% 3%;
        margin-left: 60%;
    }
    .aboutmeimg img {
        transform: translateY(-130%);
    } 
    .p1 {
        font-size: 1.5em;
    }
    .p2 {
        font-size: 1.3em;
    }
}
@media only screen and (min-width: 1024px) and (max-width: 1300px) {
    .hero {
        height: 45em; 
    }
    .heroname {
        top: 45%; 
        padding-right: 20%;
        
    }
    .heroname h2 {
        font-size: 6.5em;
    }
    .heroname h3 {
        font-size: 2.5em;
    }
    .aboutme {
        height: 50em;
    }
    .aboutmetitle {
        font-size: 3em;
    }
    .aboutmecontent {
        font-size: 1em;
    }
    .resume {
        padding: 0.5% 3%;
        margin-left: 70%;
    }
    .aboutmeimg img {
        transform: translateY(-110%);
    } 
}