body {
    background-color: hsla(55, 19%, 77%, 1);
    font-family: 'Libre Baskerville', serif;
}

.headroom {
    align-items: center;
    background: transparent;
    display: flex;
    justify-content: space-between;
    position: fixed;
    height: 10vh;
    width: 100%;
    will-change: transform;
    transition: transform 200ms linear;
}

.headroom svg {
    width: 10vh;
    height: 10vh;
    margin-left: 3vh;
}

.a {
    stroke-width: 1px;
    stroke: hsla(0, 0%, 100%, 1);
    width: 10px;
    height: 10px;
    fill: hsla(0, 0%, 100%, 1);
}

.headroom--pinned {
    transform: translateY(0%);
    transition-delay: 0.2s;
}

.headroom--unpinned {
    transform: translateY(-100%);
}

.headroom--top {
    transform: translateY(0%);
}

.headroom--bottom {}

#moustache {
    width: 10vh;
    height: 10vh;
}

.large-nav {
    display: none;
}

.darksvg {
    stroke-width: 1px;
    stroke: hsla(0, 0%, 0%, 1);
    fill: hsla(0, 0%, 0%, 1);
}

.small-nav {
    display: none;
    justify-content: space-between;
    width: 20vh;
    margin-left: 25vh;
}

.small-nav a {
    text-decoration: none;
    color: hsla(0, 0%, 100%, 1);
}

.small-nav-icon i {
    color: hsla(0, 0%, 100%, 1);
    margin-right: 2vh;
}

.dark a {
    color: hsla(0, 0%, 0%, 1);
}

.dark i {
    color: hsla(0, 0%, 0%, 1);
}

.view {
    width: 100%;
}

/*Home*/

.home-head {
    align-items: center;
    background: url('./../images/background.png');
    background-size: cover;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100vh;
}

.home-content {
    align-items: center;
    display: flex;
    flex-direction: column;
    height: 135vh;
    justify-content: center;
    justify-content: space-around;
    width: 80%;
    margin: 0 auto;
}

.home-content-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    margin-top: 5vh;
}

.home-content-head h1 {
    font-family: 'Playball', cursive;
    font-size: 2rem;
}

.home-content-head span {
    font-size: 2rem;
    font-family: 'Playball', cursive;
}

.home-content-about {
    font-size: 1rem;
    line-height: 1.5rem;
    margin: 0 auto;
}

.home-content-about p a {
    color: hsla(0, 0%, 0%, 1);
    font-style: oblique;
}

.home-content-about p a:hover {
    color: hsla(14, 84%, 53%, 1);
}

.profile-image {
    border-radius: 350px;
}

/*Work*/

.project-container {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    width: 95%;
    margin: 0 auto;
}

.projects-head {
    display: flex;
    flex-direction: column;
    margin-bottom: 5vh;
    margin-top: 15vh;
    text-align: center;
}

.projects-head h1 {
    font-size: 6vh;
    margin-bottom: 3vh;
}

.projects-head p {
    font-size: 3vh;
    margin-bottom: 3vh;
}

.projects {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 15vh;
}

.project {
    width: 95%;
}

.project a img {
    width: 50vh;
}

.project a img:hover {
    transform: scale(0.9);
    transition: all 0.5s ease-out;
}

/*Tech*/

.tech-container {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100vh;
    width: 100%;
}

.techs {
    height: 80vh;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    margin-top: 20vh;
    width: 60%;
}

.tech {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    width: 25vh;
}

.tech img {
    width: 20vh;
}

/*Goals*/

.goals-container {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    width: 95%;
    margin: 0 auto;
}

.goals-content-head {
    display: flex;
    flex-direction: column;
    margin-bottom: 5vh;
    margin-top: 15vh;
    text-align: center;
}

.goals-content-head h1 {
    font-size: 6vh;
    margin-bottom: 3vh;
}

.goals-content p {
    font-size: 3vh;
    margin-bottom: 3vh;
}

.goals-content ul {
    list-style: disc;
    font-size: 20px;
}

.tech-head {
    display: flex;
    flex-direction: column;
    margin-bottom: 5vh;
    margin-top: 15vh;
    text-align: center;
}

.tech-head h1 {
    font-size: 6vh;
    margin-bottom: 3vh;
}

.tech-head p {
    font-size: 3vh;
    margin-bottom: 3vh;
}

@media (min-width: 700px) and (max-width: 1022px) {
    body {
        background-color: hsla(55, 19%, 77%, 1);
        ;
        font-family: 'Libre Baskerville', serif;
    }
    .headroom {
        align-items: center;
        background: transparent;
        display: flex;
        justify-content: space-between;
        position: fixed;
        height: 10vh;
        width: 100%;
        will-change: transform;
        transition: transform 200ms linear;
    }
    .headroom svg {
        width: 10vh;
        margin-left: 3vh;
    }
    .a {
        stroke-width: 1px;
        stroke: hsla(0, 0%, 100%, 1);
        width: 10px;
        height: 10px;
        fill: hsla(0, 0%, 100%, 1);
    }
    .headroom--pinned {
        transform: translateY(0%);
        transition-delay: 0.2s;
    }
    .headroom--unpinned {
        transform: translateY(-100%);
    }
    .headroom--top {
        transform: translateY(0%);
    }
    .headroom--bottom {
        transform: translateY(0%);
    }
    #moustache {
        width: 10vh;
        height: 10vh;
    }
    .large-nav {
        align-items: center;
        display: flex;
        justify-content: space-around;
        margin-right: 2vh;
        width: 30vh;
    }
    .large-nav a {
        border-bottom: 2px solid hsla(0, 0%, 0%, 0);
        color: hsla(0, 0%, 100%, 1);
        font-size: 1rem;
        margin-left: 1vh;
        margin-right: 1vh;
        padding-bottom: 1vh;
        text-decoration: none;
    }
    .large-nav a:hover {
        border-bottom: 2px solid hsla(14, 84%, 53%, 1);
    }
    .large-nav i {
        margin: 0;
        margin-bottom: 1vh;
        opacity: 0.6;
        color: hsla(0, 0%, 100%, 1);
    }
    .large-nav i:hover {
        opacity: 1;
    }
    .darksvg {
        stroke-width: 1px;
        stroke: hsla(0, 0%, 0%, 1);
        fill: hsla(0, 0%, 0%, 1);
    }
    .dark a {
        color: hsla(0, 0%, 0%, 1);
    }
    .dark i {
        color: hsla(0, 0%, 0%, 1);
    }
    .small-nav {
        display: none;
    }
    .small-nav-icon {
        display: none;
    }
    .view {
        width: 100%;
    }
    /*Home*/
    .home-head {
        align-items: center;
        background: url('./../images/background.png') center;
        background-size: cover;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        height: 100vh;
    }
    .home-content {
        align-items: center;
        display: flex;
        flex-direction: column;
        height: 200vh;
        justify-content: center;
        justify-content: space-around;
        width: 50%;
        margin: 0 auto;
    }
    .home-content-head {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        margin-top: 5vh;
    }
    .home-content-head h1 {
        font-family: 'Playball', cursive;
        font-size: 4rem;
    }
    .home-content-head span {
        font-size: 3rem;
        font-family: 'Playball', cursive;
    }
    .home-content-about {
        font-size: 1rem;
        line-height: 2rem;
        margin: 0 auto;
    }
    .home-content-about p a {
        color: hsla(0, 0%, 0%, 1);
        font-style: oblique;
    }
    .home-content-about p a:hover {
        color: hsla(14, 84%, 53%, 1);
    }
    /*Work*/
    .project-container {
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        width: 95%;
        margin: 0 auto;
    }
    .projects-head {
        display: flex;
        flex-direction: column;
        margin-bottom: 5vh;
        margin-top: 20vh;
        text-align: center;
    }
    .projects-head h1 {
        font-size: 6vh;
        margin-bottom: 3vh;
    }
    .projects-head p {
        font-size: 3vh;
        margin-bottom: 3vh;
    }
    .projects {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        align-items: center;
        margin-bottom: 25vh;
    }
    .project {
        width: 55vh;
    }
    .project a img {
        width: 55vh;
    }
    .project a img:hover {
        transform: scale(0.9);
        transition: all 0.5s ease-out;
    }
    /*Tech*/
    .tech-container {
        align-items: center;
        display: flex;
        flex-direction: column;
        height: 100vh;
        justify-content: center;
        width: 100%;
    }
    .techs {
        align-items: center;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        margin-top: 15vh;
        width: 70%;
    }
    .tech {
        align-items: center;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 25vh;
    }
    .tech img {
        width: 20vh;
    }
}

@media (min-width: 1023px) {
    body {
        background-color: hsla(55, 19%, 77%, 1);
        font-family: 'Libre Baskerville', serif;
    }
    .headroom {
        align-items: center;
        background: transparent;
        display: flex;
        justify-content: space-between;
        position: fixed;
        height: 10vh;
        width: 100%;
        will-change: transform;
        transition: transform 200ms linear;
    }
    .headroom svg {
        width: 10vh;
        margin-left: 3vh;
    }
    .a {
        stroke-width: 1px;
        stroke: hsla(0, 0%, 100%, 1);
        width: 10px;
        height: 10px;
        fill: hsla(0, 0%, 100%, 1);
    }
    .headroom--pinned {
        transform: translateY(0%);
        transition-delay: 0.2s;
    }
    .headroom--unpinned {
        transform: translateY(-100%);
    }
    .headroom--top {
        transform: translateY(0%);
    }

    #moustache {
        width: 10vh;
        height: 10vh;
    }
    .large-nav {
        align-items: center;
        display: flex;
        justify-content: space-around;
        margin-right: 2vh;
        width: 45vh;
    }
    .large-nav a {
        border-bottom: 2px solid hsla(0, 0%, 0%, 0);
        color: hsla(0, 0%, 100%, 1);
        font-size: 1rem;
        margin-left: 1vh;
        margin-right: 1vh;
        padding-bottom: 1vh;
        text-decoration: none;
    }
    .large-nav a:hover {
        border-bottom: 2px solid hsla(14, 84%, 53%, 1);
    }
    .large-nav i {
        margin: 0;
        margin-bottom: 1vh;
        opacity: 0.6;
        color: hsla(0, 0%, 100%, 1);
    }
    .large-nav i:hover {
        opacity: 1;
    }
    .darksvg {
        stroke-width: 1px;
        stroke: hsla(0, 0%, 0%, 1);
        fill: hsla(0, 0%, 0%, 1);
    }
    .dark a {
        color: hsla(0, 0%, 0%, 1);
    }
    .dark i {
        color: hsla(0, 0%, 0%, 1);
    }
    .small-nav {
        display: none;
    }
    .small-nav-icon {
        display: none;
    }
    .view {
        width: 100%;
    }
    /*Home*/
    .home-head {
        align-items: center;
        background: url('./../images/background.png');
        background-size: cover;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        height: 100vh;
    }
    .home-content {
        align-items: center;
        display: flex;
        flex-direction: column;
        height: 200vh;
        justify-content: center;
        justify-content: space-around;
        width: 50%;
        margin: 0 auto;
    }
    .home-content-head {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        margin-top: 5vh;
    }
    .home-content-head h1 {
        font-family: 'Playball', cursive;
        font-size: 6rem;
    }
    .home-content-head span {
        font-size: 5rem;
        font-family: 'Playball', cursive;
    }
    .home-content-about {
        font-size: 1.5rem;
        line-height: 2.5rem;
        margin: 0 auto;
    }
    .home-content-about p a {
        color: hsla(0, 0%, 0%, 1);
        font-style: oblique;
    }
    .home-content-about p a:hover {
        color: hsla(14, 84%, 53%, 1);
    }
    /*Projects*/
    .project-container {
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        width: 95%;
        margin: 0 auto;
    }
    .projects-head {
        display: flex;
        flex-direction: column;
        margin-bottom: 5vh;
        margin-top: 25vh;
        text-align: center;
    }
    .projects-head h1 {
        font-size: 6vh;
        margin-bottom: 3vh;
    }
    .projects-head p {
        font-size: 3vh;
        margin-bottom: 3vh;
    }
    .projects {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        align-items: center;
        margin-bottom: 25vh;
    }
    .project {
        width: 55vh;
    }
    .project a img {
        width: 55vh;
    }
    .project a img:hover {
        transform: scale(0.9);
        transition: all 0.5s ease-out;
    }
    /*Resume*/
    .resume-container {
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        width: 95%;
        margin: 0 auto;
    }
    .resume-head {
        display: flex;
        flex-direction: column;
        margin-bottom: 5vh;
        margin-top: 25vh;
        text-align: center;
    }
    .resume-head h1 {
        font-size: 6vh;
        margin-bottom: 3vh;
    }
    .resume-head p {
        font-size: 3vh;
        margin-bottom: 3vh;
    }
    .resume {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        align-items: center;
        margin-bottom: 25vh;
    }
    .resume {
        width: 55vh;
    }
    .resume a img {
        width: 55vh;
    }
    .resume a img:hover {
        transform: scale(0.9);
        transition: all 0.5s ease-out;
    }
    /*Tech*/
    .tech-container {
        align-items: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: 100vh;
        width: 100%;
    }
    .techs {
        height: 80vh;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        align-items: center;
        margin-top: 20vh;
        width: 60%;
    }
    .tech {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        width: 25vh;
    }
    .tech img {
        width: 25vh;
    }
}

/*Animations*/