@media only screen and (min-width:1281px){
    
    /* @font-face {
        font-family: 'Proxima Nova';
        src: url('Resources/Proxima Nova Regular.ttf');
    }

    @font-face {
        font-family: 'Proxima Nova';
        src: url('Resources/Proxima Nova Semibold.ttf');
        font-weight: bold;
    } */

    /* @font-face {
        font-family: 'Proxima Nova';
        src: url('Resources/Proxima Nova Extrabold.ttf');
        font-weight: bolder;
    } */

    body{
        margin: 0 10%;
        padding: 0;
    }

    nav{
        position: sticky;
        top: 0;
        display: flex;
        width: 100%;
        max-width: 100%;    
    }

    header{
        display: flex;
        justify-content: center;
    }


    /* ul{
        list-style-type: none;
        display: flex;
        width: 100%;
        max-width: 100%;
        justify-content: space-evenly;
        align-items: center;
    }

    li{
        padding: 5px;
    } */

    li:hover {
        color: #000000;
    }

    a{
        font-family: "Proxima Nova Regular", sans-serif;
        font-size: 0.875rem;
        text-decoration: none;
        color: #AAAAAA;
    }

    h1{
        display: flex;
        width: 100%;
        color: #232323;
        font-family: "Proxima Nova Semi Bold", sans-serif;
        font-size: 1.375rem;
    }

    h2{
        font-family: "Adelle", sans-serif;
        font-size: 3.5rem;
        margin: 25px;
    }

    h3{
        font-family: "Adelle Bold", sans-serif;
        font-size: 1.625rem;
    }

    h4{
        display: flex;
        justify-content: center;
        font-family: "Roboto", sans-serif;
        font-weight: 300;
        font-size: 2.5rem;
        text-align: center;
        margin: 4% 0;
    }

    p{
        font-family: "Proxima Nova Semi Bold", sans-serif;
        font-size: 1.25rem;
        line-height: 1.75rem;
    }

    ul{
        margin: 0;
    }

    li{
        font-family: "Proxima Nova Semi Bold", sans-serif;
    }


    figcaption{
        display: flex;
        justify-content: center;
        margin: 2%;
        font-family: 'Roboto', sans-serif;
        font-size: 1rem;
    }

    iframe{
        border: 1px solid rgba(0, 0, 0, 0.1);
        width: 800px;
        height: 450px;
        /* flex-wrap: wrap; */
    }

    button{
        border: 3px;
        border-style: solid;
        border-radius: 10px;
        color: #000000;
        background-color: #FFFFFF;
        text-transform: uppercase;
        padding: 15px 15px;
        font-family: 'Proxima Nova', sans-serif;
        font-weight: bolder;
        font-size: 1.25rem;
        transition-duration: 300ms;
    }

    button:hover{
        color: white;
        cursor: pointer;
    }

    nav > a {
        display: flex;
        justify-content: center;
        width: 100%;
    }

    #testIDK{
        position: sticky;
        top: 0;
        display: flex;
        justify-content: center;
    }

    #testIDK > nav{
        max-width: 1300px;
    }

    #testIDK > nav > ul{
        list-style-type: none;
        display: flex;
        width: 100%;
        max-width: 100%;
        justify-content: space-evenly;
        align-items: center;
    }

    #testIDK > nav > ul > li{
        padding: 5px;
    }

    -----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

    /* Home Screen */

    /* header > p{
        font-family: "Roboto", sans-serif;
        font-weight: 300;
        font-size: 2.5rem;
        text-align: center;
    } */

     /* .projectSection{
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 100%;
        max-width: 1300px;
        margin: 0;
    }

    .projectSection > img{
        display: flex;
        object-fit: cover;
        max-height: 400px;
        width: 100%;
        max-width: 1300px;
    } */




    .projectOverlay{
        position: absolute;
        display: flex;
        height: 100%;
        max-height: 400px;
        width: 100%;
        max-width: 1300px;
        transition-duration: 300ms;
        opacity: 0;
    }

    .projectOverlay > p{
        display: flex;
        justify-content: flex-start;
        align-items: center;
        width: 100%;
        margin-left: 5%;
        font-family: "Proxima Nova Bold", sans-serif;
        font-size: 2.5rem;
        text-transform: uppercase;
        color: #FFFFFF;
    }


    .projectOverlay:hover{
        background-color: rgba(0, 0, 0, 0.25);
        opacity: 1;
    }

    #homePageCover{
        max-height: 400px;
        margin-bottom: 3%;
        filter: grayscale(100%);
        transition-duration: 300ms;
    }

    a:hover #homePageCover{
        filter: grayscale(0);
    }

    #headerWrap{
        width: 100%;
        max-width: 1300px;
    }

    -----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

    /* 'Shire Street */
    

    .pageTitle{
        display: flex;
        justify-content: center;
    }


    /* By wrapping existing containers with an additional one, I am preventing max-width to interfere with flexbox
       this keeps the main content of the page on the its center, only expanding the white space.
       Atm I am not sure this is best practice, or even valid whatsoever. To avoid adding extra containers to each new element,
       I could just wrap 'main' under one. However I would have to do same for nav either way. And I can't add an extra wrap to the
       body element. Adding a wrap between body and main did not work, could not figure out the reason why.*/


       
    .testContainer{
        display: flex;
        justify-content: center;
    }
    
    .coverImageContainer{
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 100%;
        max-width: 1300px;
        margin: 0;
    }

    .coverImage{
        display: flex;
        object-fit: cover;
        max-height: 400px;
        width: 100%;
        max-width: 1300px;
    }

    .projectDescription{
        display: flex;
        justify-content: center;
        margin-top: 1%;
        margin-bottom: 3%;
        margin-left: 0;
        margin-right: 0;
        width: 100%;
        max-width: 1300px;
    }

    .projectDescription > h3{
        width: 30%;
        margin-left: 5%;
        margin-right: 5%;
    }

    
    .descriptionParag{
        /* margin-left: 20%;
        margin-right: 20%; */
        width: 70%;
    }

    .prototypeEmbed{
        width: 70%;
    }

    .openPrototypeSection{
        display: flex;
        flex-direction: column;
        align-items: start;
        width: 70%;
    }

    .openPrototypeSection > p{
        width: 100%;
    }

    .openPrototypeSection > a{
        margin: 2% 0;
    }

    .openPrototypeSection > button{
        width: 30%;
        min-width: 240px;
    }

    #shireStreetButton{
        border-color: #F69F46;
    }

    #shireStreetButton:hover {
        background-color: #F69F46;
    }

    

      -----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

    /* Hit the Spot */


    .openPrototypeSection > ul{
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0;
    }


    .openPrototypeSection > ul > li{
        font-size: 1.25rem;
        line-height: 1.75rem;
    }

    #hitTheSpotButton{
        border-color: #53BA6A;
    }

    #hitTheSpotButton:hover{
        background-color: #53BA6A;
    }

}