@import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Montserrat,'Courier New', Courier, monospace, sans-serif;
    /*background:#2b323c;*/
    background-color:#fff;
}

html{
    max-width:1540px;
    margin: 0 auto;
}

/* Header styles */

header{
    padding-top:4vh;
    padding-bottom:3vh;
   /* background-color:#686e76;*/
   /*background:#2b323c;*/
   background-color:#fff;
   font-weight:bolder;
}

#header-container{
    display:flex;
    flex-direction:row;
}

#name-div{
    width:20%;
}

#nav-div{
    width:80%;
    text-align:right;
}

header h2{
    color:#484848;
    font-size:calc(5px + 1.8vw);
    padding-left:2vw;
}

a{
    text-decoration:none;
}

nav li{
    display:inline;
    font-size:calc(1vw + 5px);
    margin-left:1vw;
    margin-right:1vw;
}

li:hover{
    color:rgb(68, 0, 255);
}

nav a{
    text-decoration: none;
    color:#484848;
}

.socials-icon{
    width:2.1%;
}

#page-title h1{
    font-size:calc(1px + 3vw);
    margin-top:10vh;
    margin-bottom:5vh;
    text-align:center;
}

/* footer */

footer{
    font-size:calc(5px + .5vw);
    text-align: center;
    margin:10vh auto;
}

/* Introduction */

#introduction{
    width:46%;
    margin:0 auto;
    margin-bottom:14vh;
    height:auto;
}

#introduction h2{
    text-align: center;
    margin-bottom:5vh;
    color:#484848;
    font-size:calc(5px + 1.5vw);
}

#introduction p{
    color:#484848;
    margin-top:2vh;
    margin-bottom:2vh;
    font-size:calc(5px + .7vw);
    line-height: 170%;
}

/* Introduction Questions */

#questions{
    width:45%;
    margin:0 auto;
    margin-bottom:14vh;
    text-align: center;
    height:auto;
}

#questions h3{
    color:#484848;
    margin-top:2vh;
    margin-bottom:2vh;
    font-size:calc(5px + 1.1vw);
    line-height: 170%;
    text-align: center;
}

#questions p{
    color:#484848;
    margin-top:2vh;
    margin-bottom:2vh;
    font-size:calc(5px + .7vw);
    line-height: 170%;
}

/* Question 1 */

#question-1{
    display:flex;
    flex-direction:row;
    justify-content: center;
    height:auto;
    margin:18vh 0;
}

#Q1-text{
    width:40%;
    margin:auto 0;
}

#Q1-text p{
    color:#484848;
    margin-bottom:2vh;
    font-size:calc(5px + .7vw);
    line-height: 170%;
}

#Q1-image{
    width:30%;
    margin-left:4vw;
}

/* Question 2 */

#question-2{
    display:flex;
    flex-direction:row;
    justify-content: center;
    height:auto;
    margin:18vh 0;
}

#Q2-text{
    width:40%;
    margin:auto 0;
}

#Q2-text p{
    color:#484848;
    margin-bottom:2vh;
    font-size:calc(5px + .7vw);
    line-height: 170%;
}

#Q2-image{
    width:35%;
    margin-right:4vw;
}

/* Question 2-2 */

#question-2-2{
    width:45%;
    margin:0 auto;
    margin-bottom:14vh;
    height:auto;
}

#question-2-2 p{
    color:#484848;
    margin-top:2vh;
    margin-bottom:2vh;
    font-size:calc(5px + .7vw);
    line-height: 170%;
}

/* image boxes */


#poster-boxes{
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content: center;
    margin-top:6vh;
    margin-bottom:14vh;
    text-align:center;
    height:auto;
}

.poster-box{
    width:40%;
    margin: 0 1vw;
}


/* Question 3 */

#question-3{
    display:flex;
    flex-direction:row;
    justify-content: center;
    height:auto;
    margin:18vh 0;
}

#Q3-text{
    width:40%;
    margin:auto 0;
}

#Q3-text p{
    color:#484848;
    margin-bottom:2vh;
    font-size:calc(5px + .7vw);
    line-height: 170%;
}

#Q3-image{
    width:35%;
    margin-right:4vw;
}


/*  Inspiration Section */

#inspo{
    display:flex;
    flex-direction:row;
    justify-content:center;
    height:auto;
    margin:14vh 0;
}

#inspo-text{
    width:40%;
    color:#484848;
    font-size:calc(5px + .8vw);
    line-height: 170%;
    display:grid;
    justify-content:center;
    align-items:center;
}

#inspo-text p{
    color:#484848;
    margin-bottom:2vh;
    font-size:calc(5px + .7vw);
    line-height: 170%;
}

#inspo-image{
    width:40%;
    display:flex;
    justify-content:center;
    align-items:center;
    padding-right:6vw;
}

/* Conclusion */

#conclusion{
    width:45%;
    margin:0 auto;
    margin-bottom:14vh;
    height:auto;
}

#concolusion h2{
    text-align: center;
    margin-bottom:5vh;
    color:#484848;
    font-size:calc(5px + 1.5vw);
}

#conclusion p{
    color:#484848;
    margin-top:2vh;
    margin-bottom:2vh;
    font-size:calc(5px + .7vw);
    line-height: 170%;
}

 /* Hide Hamburger Icon*/
 #hamnav label, #hamburger{display:none;}
 /* Small Screens */
 @media screen and (max-width:786px){
 /* Break into vertical menu */
 #ham-items{display:block;font-size: calc(2vw + 5px);}
 #ham-items a{
     display:block;
     width:100%;
     box-sizing:border-box;
     border-top:1px solid #fff;
     font-weight:bold;
 }
 /* Show Hamburger Icon */
 #hamnav label{
     display:inline-block;
     color:rgb(68, 0, 255);
     background:#fff;
     font-size:1.6em;
     padding:0 1vw;
 }
 /* Hide/collapse menu items for the default look */
 #ham-items{display:none;}
 #hamnav input:checked ~ #ham-items{display:block;}
 }

 @media only screen and (max-width:786px){
   /* html, body{width:90%;}*/
    header h2{padding-left:0;display:flex;justify-content: center;}
    #name-div{width:40%;}
    #name-div h2{font-size:calc(4px + 3.5vw);align-items: flex-end;}
    #nav-div{width:55%;}
    nav li{font-size: calc(3vw + 10px);}
    ul#ham-items{margin:4vh 0;}
    a{margin:6vh 0;}
    .socials-icon{width:10%;}
    #page-title h1{font-size:calc(1px + 3.5vw);}

    /* introduction */

    #introduction{width:70%;}
    #introduction h2{font-size:calc(1px + 3vw);}
    #introduction p{font-size:calc(1px + 2vw);}

    /* questions */

    #questions{width:70%;margin-bottom:0;}
    #questions h3{font-size:calc(1px + 2.5vw);}
    #questions p{font-size:calc(1px + 2vw);}

    /* Question 1 */

    #question-1{flex-direction:column;align-items: center;margin:10vh 0;}
    #Q1-text{width:70%;margin:4vh 0;}
    #Q1-text p{font-size:calc(1px + 2vw);}
    #Q1-image{width:50%;margin-left:0;}

    /* Question 2 */

    #question-2{flex-direction:column-reverse;align-items: center;margin:0;}
    #Q2-text{width:70%;margin:4vh 0;}
    #Q2-text p{font-size:calc(1px + 2vw);}
    #Q2-image{width:70%;margin-right:0;}

    /* Question 2-2 */

    #question-2-2{width:70%;margin:10vh auto;}
    #question-2-2 p{font-size:calc(1px + 2vw);}

    /* Question 3 */

    #question-3{flex-direction:column;align-items: center;margin:0 auto;}
    #Q3-text{width:70%;margin:6vh 0;}
    #Q3-text p{font-size:calc(1px + 2vw);}
    #Q3-image{width:70%;margin-right:0;}

    /* Inspiration section */

    #inspo{flex-direction:column-reverse;align-items: center;margin:10vh 0;}
    #inspo-text{width:70%;}
    #inspo-text p{font-size:calc(1px + 2vw);}
    #inspo-image{width:70%;margin:6vh 0;}

    /* Conclusion */

    #conclusion{width:70%;}
    #conclusion p{font-size:calc(1px + 2vw);}

 }

 @media only screen and (max-width:600px){
    /* html, body{width:100%;}*/
     header{margin-top:0;}
     header h2{margin-top:1vh;}
     #page-title h1{font-size:calc(1px + 4.5vw);}

     /* introduction */

    #introduction{width:85%;}
    #introduction h2{font-size:calc(1px + 4vw);}
    #introduction p{font-size:calc(1px + 3vw);}

    /* questions */

    #questions{width:85%;margin-bottom:0;}
    #questions h3{font-size:calc(1px + 3.5vw);}
    #questions p{font-size:calc(1px + 3vw);}

    /* Question 1 */

    #question-1{flex-direction:column;align-items: center;margin:10vh 0;}
    #Q1-text{width:85%;margin:4vh 0;}
    #Q1-text p{font-size:calc(1px + 3vw);}
    #Q1-image{width:80%;margin-left:0;}

    /* Question 2 */

    #question-2{flex-direction:column-reverse;align-items: center;margin:0;}
    #Q2-text{width:85%;margin:4vh 0;}
    #Q2-text p{font-size:calc(1px + 3vw);}
    #Q2-image{width:85%;margin-right:0;}

    /* Question 2-2 */

    #question-2-2{width:85%;margin:10vh auto;}
    #question-2-2 p{font-size:calc(1px + 3vw);}

    /* images */

    #poster-boxes{flex-direction:column;align-items: center;}
    .poster-box{width:90%;margin:1vh 0;}

    /* Question 3 */

    #question-3{flex-direction:column;align-items: center;margin:0 auto;}
    #Q3-text{width:85%;margin:6vh 0;}
    #Q3-text p{font-size:calc(1px + 3vw);}
    #Q3-image{width:90%;margin-right:0;}

    /* Inspiration section */

    #inspo{flex-direction:column-reverse;align-items: center;margin:10vh 0;}
    #inspo-text{width:85%;}
    #inspo-text p{font-size:calc(1px + 3vw);}
    #inspo-image{width:90%;margin:6vh 0;}

    /* Conclusion */

    #conclusion{width:85%;}
    #conclusion p{font-size:calc(1px + 3vw);}
 }

 @media only screen and (min-width:1540px){

    header h2{font-size:40px;}
    nav li{font-size:25px;}
    #page-title h1{font-size:60px;}

    /* introduction */

    #introduction h2{font-size:40px;}
    #introduction p{font-size:20px;}

    /* questions */

    #questions h3{font-size:24px;}
    #questions p{font-size:20px;}

    /* Question 1 */

    #Q1-text p{font-size:20px;}

    /* Question 2 */

    #Q2-text p{font-size:20px;}

    /* Question 2-2 */

    #question-2-2 p{font-size:20px;}

    /* images 

    #poster-boxes{flex-direction:column;align-items: center;}
    .poster-box{width:90%;margin:1vh 0;}

    */

    /* Question 3 */

    #Q3-text p{font-size:20px;}

    /* Inspiration section */

    #inspo-text p{font-size:20px;}

    /* Conclusion */

    #conclusion p{font-size:20px;}

 }