body {
    margin: 0px;
    padding: 0px;
}

body {
    background-color: rgb(34, 28, 13);
}

h1, h3 {
    color: rgb(233, 232, 229);
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
}

h1 {
    font-size: 80px;
}

p {
    color: rgb(233, 232, 229);
    font-family: Arial, Helvetica, sans-serif;
}

p a {
    color: rgb(233, 232, 229);
    font-family: Arial, Helvetica, sans-serif;
}

img {
    border-radius: 2px;
}

.component-title {
    color: rgb(233, 232, 229);
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
    font-size: 20px;
}

.landing {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
}

/* INTRO */
.intro-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 3vw;
    padding: 0vh 3vw 3vh 8vw;
    width: 30vw;
    height: 85vh;
}

/* ABOUT */
.about-container {
    border: 1px solid rgb(233, 232, 229);
    margin: 1vw 5vw 1vw 3vw;
    padding: 1vh 3vw;
    width: 35vw;
    height: 100%;
}

/* EXPERIENCE */
.experience-container {
    border: 1px solid rgb(233, 232, 229);
    margin: 0vw 5vw 1vw 3vw;
    padding: 1vh 3vw;
    width: 35vw;
    height: 100%;
}

/* SKILLS */
.skills-container {
    border: 1px solid rgb(233, 232, 229);
    margin: 0vw 10vw 1vw 3vw;
    padding: 1vh 3vw;
    width: 35vw;
    height: 100%;
}

.skills-list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding-left:0
}

.skills-list-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    list-style: none;
    font-family: Arial, Helvetica, sans-serif;
    color: rgb(233, 232, 229);
    padding-left:0
}

.icon-name {
    font-size: 9px;
}

/* PROJECTS */
.projects-container {
    display: flex;
    justify-content: center;
}

.projects-container-content {
    border: 1px solid rgb(233, 232, 229);
    margin: 2vw;
    padding: 1vh 3vw;
    width: 79.75vw;

    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.projects-list {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    list-style: none;
    color: rgb(233, 232, 229);
    font-family: Arial, Helvetica, sans-serif;
    padding-left:0
}

.projects-list-item {
    padding: 1vw 0vw;
}

.projects-list-item a {
    color:rgb(233, 232, 229);
}

.projects-title {
    font-size: 80px;
    color: rgb(233, 232, 229);
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
}

.project-container {
    position: relative;
    width: 50%;
}
  
.proj-img {
    opacity: 1;
    display: block;
    width: 75vw;
    height: auto;
    transition: .5s ease;
    backface-visibility: hidden;
}

.proj-img:hover {
    cursor: pointer;
}

.proj-desc {
    background-color: white;
    color: rgb(34, 28, 13);
    font-size: 16px;
    padding: 16px 32px;
}

.middle {
    transition: .5s ease;
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
}
  
.project-container:hover .image {
    opacity: 0.3;
}
  
.project-container:hover .middle {
    opacity: 1;
}

/* WORMS EYE VIEW */

.wormseye-container {
    display: flex;
    justify-content: center;
}

.wormseye-container-content {
    margin: 2vw;
    padding: 1vh 3vw;
    width: 79.75vw;
}

.WormsEye-Role-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.WormsEye-Role {
    width: 60vw;
    border: 1px solid white;
    padding: 3vh 3vw 3vh 3vw;
    margin: 3vh 3vw 3vh 3vw;
}

.Project-Page-Img {
    width: 66vw;
    padding: 3vw;
}

.Project-Images {
    margin: 0vh 0vw 10vh 0vw;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.projects-top-content-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0vh 0vw 3vh 0vw;
}

.projects-about {
    margin: 3vw 3vw 3vw 3vw;
    padding: 3vh 3vw 3vh 3vw;
    width: 60vw;
    border: white solid 1px;
}

/* CHALLANGE COMPONENT */

.challenge-cards {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    flex-wrap: wrap;
}

.challenge-card {
    padding: 10px;
}

.challenge-styling {
    height: 300px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid;
    margin: 1em 0;
    padding: 1em
}

.location-map {
    width: 60vw;
    height: 60vh;
}

@media only screen and (min-width: 841px) and (max-width: 1060px) {

h1 {
    font-size: 60px;
}

.projects-title {
    color: rgb(233, 232, 229);
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
    font-size: 50px;
}


}

@media only screen and (max-width: 840px) {
    /* body {
      background-color: lightblue;
    } */

    .landing {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
    }

    /* INTRO */
    .intro-container {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin: 3vw;
        padding: 0vh 3vw;
        width: 90vw;
        height: 85vh;
    }

    /* ABOUT */
    .about-container {
        border: 1px solid rgb(233, 232, 229);
        margin: 3vh 1vw;
        padding: 1vh 3vw;
        width: 88vw;
        height: 100%;
    }

    /* EXPERIENCE */
    .experience-container {
        border: 1px solid rgb(233, 232, 229);
        margin: 3vh 1vw;
        padding: 1vh 3vw;
        width: 88vw;
        height: 100%;
    }

    /* SKILLS */
    .skills-container {
        border: 1px solid rgb(233, 232, 229);
        margin: 3vh 1vw;
        padding: 1vh 3vw;
        width: 88vw;
        height: 100%;
    }

    .projects-container-content {
        border: 1px solid rgb(233, 232, 229);
        margin: 0vh 1vw 2vh 1vw;
        padding: 1vh 3vw 0vh 3vw;
        width: 88vw;
        height: 100%;
    
        display: flex;
        flex-direction: column;
        justify-content: space-around;
    }

    .projects-title {
        color: rgb(233, 232, 229);
        font-family: 'Poppins', sans-serif;
        font-weight: 800;
        font-size: 20px;
    }

    .projects-list {
        display: grid;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        list-style: none;
        color: rgb(233, 232, 229);
        font-family: Arial, Helvetica, sans-serif;
        padding-left:0
    }

    .projects-top-content-container {
        display: flex;
        flex-direction: column;
    }

    .projects-about {
        margin: 0vh 1vw 2vh 1vw;
        padding: 1vh 3vw 0vh 3vw;
        width: 100%;
        border: white solid 1px;
    }

    .WormsEye-Role {
        margin: 1vh 1vw;
        padding: 1vh 3vw;
        width: 100%;
        border: white solid 1px;
    }

    .Project-Images {
        width: 99vw;
        margin: 3vh 0vw;
        padding: 0;
    }
  }