header {
    padding: 2%;

}

.abouthead h1 {
    color: rgb(240, 148, 248);
}

.abouthead li a:hover {
    background-color: rgb(224, 188, 228);
}

.soundhead h1 {
    color: rgb(183, 102, 223);
}

.soundhead li a:hover {
background-color: rgb(212, 181, 228);
}
.gallhead h1{
    color: rgb(95, 188, 114)
}
.gallhead li a:hover {
   background-color: rgb(95, 188, 114);
}
.resumehead h1{
    color: rgb(161, 218, 250);
}
.resumehead li a:hover {
   background-color:  rgb(161, 218, 250);
}
body {
    background-color: rgb(255, 255, 255);
    font-family: sans-serif;
    box-sizing: border-box;
    width: 100%;
    max-width: 5000px;
    margin: 0 auto;
    padding: 0;
}

.homepage {
    background-color: rgb(240, 148, 248);;
}

h1 {
    font-size: 450%;
    text-align: center;
    letter-spacing: 20px;
    font-weight: 500;
}

h2 {
    color: rgb(255, 255, 255);
    font-size: 360%;
    text-align: center;
    letter-spacing: 10px;
    font-weight: 400;


}
h3 {
    color: rgb(255, 255, 255);
    font-size: 200%;
    margin-right: 5%;
    margin-left: 5%;
    font-weight: 400;


}


h4, h5 {
    color: rgb(255, 255, 255);
    font-size: 180%;
    margin-right: 5%;
    margin-left: 5%;
    font-weight: 100;
}

.sounddesign h4 {
    text-align: center;
    color: rgb(255, 255, 255);
    font-size: 300%;
    padding: 1%;
    padding-left: 0;
}

audio {
    display: block;
    width: 50%;
    margin-left: 25%;
    margin-right: 25%;
}

video {
    display: block;
    width: 50%;
    height: 50%;
    margin-left: auto;
    margin-right: auto;
}

p {
    font-family: sans-serif;
    font-size: x-large;
    margin-right: 5%;
    margin-left: 5%;
    color: white;
    font-weight: 100;
    font-size: 200%;
}

.sounddesign p, .sounddesign h2, .sounddesign h3, .sounddesign h4, .sounddesign h5, .sounddesign ul, .sounddesign li, .sounddesign h6 {
    margin-left: 10%;
    margin-right: 10%;
}

.sounddesign p {
    font-size: 170%;
}

nav ul {
    display:flex;
    flex-direction: row;
    justify-content: center;
    list-style: none;
    padding-bottom: 6%;
    column-gap: 15%;
    color: rgb(45, 96, 82);
    background-color: rgb(255, 255, 255);
    font-size: 150%;
    font-weight: 500;
    margin: 0;
    border: 0px;
}

nav li a {
    display: flex;
    white-space: nowrap;
    color: rgb(0, 0, 0);
    font-family: sans-serif;
    text-decoration: none;
    letter-spacing: 5px;

}

nav li a:hover {
    color: white;
}

ul {

    font-family: sans-serif;
    font-size: large;
    font-size: 150%;
    color: white;
    margin-right: 5%;
    margin-left: 5%;
    font-weight: 100;

}

.homepicture {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: fit-content;
}

.about {
    margin-left: 10%;
    margin-right: 10%;
    padding: 2%;
}

.homepage {
    animation: fadeInAnimation ease 1s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;

}

.eduh2 {
    padding: 0;
    margin-bottom: 0;
}

.education {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    column-gap: 40px;

}
.education h3 {
    margin-right: 0;
    padding: 5%;
    margin-bottom: 0;
    padding-bottom: 0;

}

.education h4 {
    margin-top: 0;
    padding: 5%;
    padding-top: 0;
    margin-bottom: 0;
}

.education ul {
    margin-right: 50px;
}

.education h4, .education h3, .education ul {

    margin-left: 10%;
}

.cornell {
    display: flex;
    flex-direction: column;
    flex-grow: 5;
    margin-left: 10%;
}

.nyu {
    display: flex;
    flex-direction: column;
    flex-shrink: 15;
    margin-right: 15%;

}

.nyu ul {
    margin-top: 0;
    padding-top: 0;

}

.education img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 300px;
    min-width: 300px;

}

.hastings h3 {
    padding: 2%;
    text-align: left;
    margin: 0;
    padding-top: 4%;
    padding-bottom: 0;
    margin-left: 13.5%;
}

.hastings h4{
    margin-top: 0;
    padding-top: 0;
   text-align: left;
   margin-left: 15.5%;
}

.hastings {

    padding-bottom: 2%;
}

.contact {

    border: none;
    background-color: rgb(255, 255, 255);
    list-style: none;
    color: rgb(0, 0, 0);
    margin: 0;
    padding: 2%;
    text-align: center;
    padding-top: 3%;
}

.contact a {
    color: rgb(0, 0, 0);
}

footer {
    padding-bottom: 3%;
    background-color: rgb(255, 255, 255);
    color: black;
}

.gallery {

    background-color: rgb(95, 188, 114);
    margin-top: 0;
    padding: 1px;
    margin-top: 0;
    animation: fadeInAnimation ease 1s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

.gallery h3, .marketing h3, .sounddesign h3, .skillsheading h3 {
    text-align: center;
    padding: 0;
    margin: 0;
    margin-bottom: 2%;
    font-size: x-large;
    letter-spacing: 10px;
}

.gallery > * {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: space-evenly;
    row-gap: 40px;
    padding: 2%
}

.marketing {
    background-color: rgb(161, 218, 250);
    padding: 1px;
    color: white;
    animation: fadeInAnimation ease 1s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

.marketing h4, .marketing p, .marketing img {
    margin-right: 5%;
    margin-left: 5%;
}

.marketing h2, .gallery h2, .sounddesign h2, .skillsheading h2, .homepage {
    padding: 0;
    padding-bottom: 0;
    margin-bottom: 0;

}

.homepage {
    padding-top: 2px;
}


.sounddesign {
    background-color: rgb(183, 102, 223);

    padding: 1px;
    color: white;
    animation: fadeInAnimation ease 1s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    padding-bottom: 3%;
}
.sounddesign h4 {
    font-weight: 500;
    letter-spacing: 5px;
}
.sounddesign h5 {
    text-align: left;
    font-weight: 500;
    letter-spacing: 1px;
    font-size: 240%;
    padding-bottom: 0;
    margin-bottom: 0;

}

.sounddesign h6 {
    text-align: left;
    font-weight: 500;
    letter-spacing: 8px;
    font-size: 130%;
    padding-top: 4px;
    margin-top: 0;
}
.soundboard {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 700px;
    min-width: 600px;
    padding: 1%;

}

.skills {

    background-color: rgb(255, 206, 100);
    padding: 1px;
    color: white;
    animation: fadeInAnimation ease 1s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;

}

.skills h3 {
    padding-bottom: 2%;
}

.skillslist {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-content: center;
    padding-bottom: 10%;
    column-gap: 50px;


}
.skillslist > * {
    border: 8px solid white;
}

.skillslist h4 {
    margin-left: 40px;

}

.comm {
    flex-shrink: 5;
    margin-left: 15%;

}

.social {

    margin-right: 12%;
}

.skillss {
    text-align: center;
    font-size: 300%;
    padding-bottom: 0;
    margin-bottom: 10px;
}


cite {
    color: white;
    margin-left: 30%;
}

cite a {

    color: white;
}

.hidden {
    display: none;
}


.gallery img {
    color: black;
    background-color: black;
    z-index: 0;
    max-width: 100%;
    height: auto;
}

.photosbanner img {
    display: block;
    width: 60%;
    margin-left: auto;
    margin-right: auto;
}

.photosbanner {
    display: flex;
    flex-direction: row;
    justify-content: center;
    column-gap: 5px;
    padding-bottom: 0;
    margin-left: 5%;
    margin-right: 5%;

}

.photosbanner > * {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.wvbr, .keys, .slope, .cornellstore, .axo {
    padding: 5%;
    padding-top: 1%;
    margin-left: 10%;
    margin-right: 10%;
}

button {
    background-color: transparent;
    border-color: transparent;
    cursor: pointer;
}

button:hover {
    opacity: 40%;
}

#next-button {
    position: absolute;
    margin-left: 85%;
    top: 1000px;
    font-size: 350%;
    color: rgb(255, 255, 255);

}
#prev-button {
    position: absolute;
    margin-right: 100%;
    margin-left: 8%;
    top: 1000px;
    font-size: 350%;
    color: rgb(255, 255, 255);

}

.dots {
    text-align: center;
    padding-top: 0%;
    margin-right: 1%;
}

.dots > * {

    font-size: 300%;
    color: white;
    padding-top: 0;
    cursor:default;
}

.dotsbg {
    margin-top: 0%;
    background-color: rgba(38, 119, 159, 0.41);
}

.dots > *:hover {
    opacity: 100%;
}

.upper {
    font-size: 250%;
    font-weight: bold;
}

.cornellstore {
    padding-bottom: 17%;
}


.subhead {
    text-align: center;
    font-size: 160%;
    padding-bottom: 0%;
    letter-spacing: 10px;
}

.slideshow {
    background-color: rgb(154, 203, 234);
    padding: 5%;
    padding-top: 3%;
    animation: fadeInAnimation ease 1s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

@keyframes fadeInAnimation {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
     }
}

.slideshow p, .slideshow h3 {
    color: rgb(255, 255, 255);
}

.slideshow img {
    display: block;
    width: 20%;
    margin-left: auto;
    margin-right: auto;
}

.innerslides {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-left: 5%;
    margin-right: 5%;
}

#next-button2 {
    color: white;
    font-size: 350%;
}

#prev-button2 {
    color: white;
    font-size: 350%;
}

#x-button {
    color: white;
    font-size: 200%;
    padding-top: 0;

}

.course {
    text-align: center;
    letter-spacing: 5px;
    padding: 0%;
    margin-top: 0%;
}

#new {
    padding-bottom: 0;
    margin-bottom: 0;
}

.courselist {
    padding-top: 3%;
    font-size: 175%;
}

.footerp {
    text-align: center;
    font-size: 100%;
    color: black;
}

.contact h2 {
    color: rgb(240, 148, 248);
}
.resume img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 60%;
  padding-bottom: 5%;
}

.performance img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 60%;
}
.safari {
    font-style: italic;
}

#s1, #s2, #s3, #s4 {
    font-size: 85%;
    margin-top: 0;
    margin-bottom: 2%;
}



@media (max-width: 750px) {

    body {
        max-width: 750px;
    }

    nav li {
        font-size: 50%;
    }

    img {
        display:block;
        max-width: 70%;
        margin-left: auto;
        margin-right: auto;
    }

    .homepicture {
        display:block;
        margin-left: auto;
        margin-right: auto;
        max-width: 1024px;
        min-width: 350px;
    }

    .education {
        flex-wrap: wrap;
        align-items: center;
        align-content: center;
    }
    .cornell {
        margin-right: 25%;
    }

    .soundboard {
        max-width: 700px;
        min-width: 300px;
    }

    .skillslist {
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        row-gap: 50px;
    }

    .comm {
        border: none;
        margin-left: 20%;
        margin-right: 20%;
        padding: 1%;
    }


    .social {
        border: none;
        margin-left: 18%;
        margin-right: 18%;
        padding: 3%;
    }
    .innerslides {
        max-width: 750px;
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-left: 1%;
        margin-right: 1%;
    }
    #next-button2, #prev-button2, #next-button, #prev-button {

        display: none;
    }

    .photosbanner img {
        width: 70%;
    }

    .photosbanner {
        display: initial;
    }

    .photosbanner > * {
        display: flex;
        flex-direction: row;
        justify-content: center;
        row-gap: 5px;

    }

    .dots {
        display: none;

    }

    .dotsbg {
        display: none;
    }

    .subhead {
        font-size: 100%;
        letter-spacing: 2px;
    }

    .about img {
        width: 50%;
    }
    .skillslist {
        row-gap: 5px;
        margin-left: 5%;
        margin-right: 5%;

    }
    .skillslist h4 {
        text-align: center;
        margin-left: 5%;
        margin-right: 5%;

    }
}