@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 (navigation bar, social links, etc) */

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:10vh;
    text-align:center;
}

/* footer */

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

/* Psyche Inspired Intro (at the top of the page) */

#introduction{
    width:55%;
    margin:0 auto;
    height:auto;
}

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

.pi-link a{
    color:rgb(68, 0, 255);
    font-weight:bold;
}

@keyframes fadeInUp {
    from {
        transform: translate3d(0,40px,0)
    }

    to {
        transform: translate3d(0,0,0);
        opacity: 1
    }
}

@-webkit-keyframes fadeInUp {
    from {
        transform: translate3d(0,40px,0)
    }

    to {
        transform: translate3d(0,0,0);
        opacity: 1
    }
}

.animated {
    animation-duration: 1s;
    animation-fill-mode: both;
    -webkit-animation-duration: 1s;
    -webkit-animation-fill-mode: both
}

.animatedFadeInUp {
    opacity: 0
}

.fadeInUp {
    opacity: 0;
    animation-name: fadeInUp;
    -webkit-animation-name: fadeInUp;
}

/* All Nasa projects and timeline */

#nasa-projects{
    width:55%;
    margin:28vh auto;
    height:auto;
}

#nasa-projects h2{
    color:#484848;
    margin-bottom:2vh;
    font-size:calc(5px + 1.5vw);
}

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

.project-link a{
    color:rgb(68, 0, 255);
    font-weight:bold;
}

/* Project 1 - Greetings from PSYCHE */

#project-1{
    display:flex;
    flex-direction:row;
    justify-content:center;
    height:auto;
    margin-top:14vh;
}

#project-1-info{
    width:40%;
    margin:auto 0;
    align-self:center;
}

#project-1-info h2{
    color:#484848;
    margin-bottom:2vh;
    font-size:calc(5px + 1.5vw);
}

#project-1-info h3{
    color:#484848;
    margin-bottom:6vh;
    font-size:calc(5px + 1vw);
}

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

 #project-1-images{
    width:40%;
    text-align:right;
    margin:auto 0;
} 

/*.gallery {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 20px;
    grid-column-start: 1;
    grid-row-start: 1;
    grid-row-end: 3;
    align-content: start;
    max-width: 700px;
    padding-left:6vw;
    padding-top:20vh;
    transition: all 150ms ease-in-out;
    justify-content:center;
  }
  
  .gallery input[type="radio"] {
    display: none;
  }
  
  .gallery label {
    position: relative;
    display: block;
    padding-bottom: 60%;
    margin: 5px;
    cursor: pointer;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%;
  }
  
  .gallery label:before {
    border: 1px groove #e3e3e3;
    content: '';
    position: absolute;
    left: -5px;
    right: -5px;
    bottom: -5px;
    top: -5px;
  }
  
  .gallery img {
    display: none;
    grid-column-start: 1;
    grid-column-end: 5;
    grid-row-start: 1;
    grid-row-end: 2;
    width: 100%;
    transition: all 150ms linear;
  }
  
  .gallery input[name="select"]:checked + label + img {
    display: block;
  }
  
  .gallery input[name="select"]:checked + label:before {
    border: 1px groove rgb(68, 0, 255);
  } */

/* Project 1 - Greetings from PSYCHE Bonus Content */

#more-project-1{
    display:flex;
    flex-direction:row;
    justify-content:center;
    height:auto;
    margin-top:20vh;
    margin-bottom:20vh;
}

#more-1-info{
    width:35%;
    margin:auto;
    align-self:center;
}

#more-1-info h3{
    color:#484848;
    margin-bottom:6vh;
    font-size:calc(5px + 1vw);
}

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

#more-video{
    width:50%;
    text-align:right;
} 

/* Project 2 - PSYCHE for Atari 2600 */

#project-2{
    display:flex;
    flex-direction:row;
    justify-content:center;
    margin-bottom:20vh;
}

#project-2-info{
    width:40%;
    margin:auto 0;
}

#project-2-info h2{
    color:#484848;
    margin-top:8vh;
    margin-bottom:2vh;
    font-size:calc(5px + 1.5vw);
}

#project-2-info h3{
    color:#484848;
    margin-bottom:6vh;
    font-size:calc(5px + 1vw);
}

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

#project-2-images{
    width:100%;
    text-align:right;
} 

#project-2-image{
    width:40%;
    text-align:right;
}

.gallery {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 20px;
    grid-column-start: 1;
    grid-row-start: 1;
    grid-row-end: 3;
    align-content: start;
    max-width: 580px;
    padding-left:10vw;
    padding-right:0;
    padding-top:9vh;
    transition: all 150ms ease-in-out;
    justify-content:right;
  }
  
  .gallery input[type="radio"] {
    display: none;
  }
  
  .gallery label {
    position: relative;
    display: block;
    padding-bottom: 60%;
    margin: 5px;
    cursor: pointer;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%;
  }
  
  .gallery label:before {
    border: 1px groove #e3e3e3;
    content: '';
    position: absolute;
    left: -5px;
    right: -5px;
    bottom: -5px;
    top: -5px;
  }
  
  .gallery img {
    display: none;
    grid-column-start: 1;
    grid-column-end: 5;
    grid-row-start: 1;
    grid-row-end: 2;
    width: 100%;
    transition: all 150ms linear;
  }
  
  .gallery input[name="select"]:checked + label + img {
    display: block;
  }
  
  .gallery input[name="select"]:checked + label:before {
    border: 1px groove rgb(68, 0, 255);
  }

/* Project 3 - Psyche Metal Pins */

#project-3{
    display:flex;
    flex-direction:row;
    justify-content:center;
    height:auto;
    margin-bottom:20vh;
}

#project-3-info{
    width:40%;
    margin:auto 0;
}

#project-3-info h2{
    color:#484848;
    margin-top:8vh;
    margin-bottom:2vh;
    font-size:calc(5px + 1.5vw);
}

#project-3-info h3{
    color:#484848;
    margin-bottom:6vh;
    font-size:calc(5px + 1vw);
}

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

#project-3-images{
    width:40%;
    text-align:left;
} 

#project-3-images img{
    margin-top:9vh;
} 

/* Project 4 - Mind and Soul */

#project-4 {
    display:flex;
    flex-direction:row;
    justify-content:center;
    height:auto;
}

#project-4-info{
    width:40%;
    margin:auto 0;
}

#project-4-info h2{
    color:#484848;
    margin-top:8vh;
    margin-bottom:2vh;
    font-size:calc(5px + 1.5vw);
}

#project-4-info h3{
    color:#484848;
    margin-bottom:6vh;
    font-size:calc(5px + 1vw);
}

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

#project-4-images{
    width:40%;
    text-align: right;
} 

/* Psyche Button (links to full projects) */

.btn41-43 {
    padding: 1.5vh 2.5vw;
    font-weight: 500;
    font-size:calc(5px + .8vw);
    background: transparent;
    outline: none !important;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    display: inline-block;
  }
  
  .btn-41 {
    border: 2px solid rgb(68, 0, 255);
    border-radius:10px;
    z-index: 1;
    color:rgb(68, 0, 255);
  }
  
  .btn-41:after {
    position: absolute;
    content: "";
    width: 0;
    height: 100%;
    top: 0;
    left: 0;
    direction: rtl;
    z-index: -1;
    background: rgb(68, 0, 255);
    border-radius:5px;
    transition: all 0.3s ease;
  }
  
  .btn-41:hover {
    color:#fff;
  }
  
  .btn-41:hover:after {
    left: auto;
    right: 0;
    width: 100%;
  }
  
  .btn-41:active {
    top: 2px;
  }

 /* 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);}

    /* Timeline */

    #nasa-projects{width:70%;margin:14vh auto;}
    #nasa-projects h2{font-size:calc(1px + 3vw);}
    #nasa-projects p{font-size:calc(1px + 2vw);}

    /* project 1 */

    #project-1{flex-direction: column;align-items: center;}
    #project-1-info{width:70%;}
    #project-1-info h2{font-size:calc(1px + 3vw);}
    #project-1-info h3{font-size:calc(1px + 2.5vw);}
    #project-1-info p{font-size:calc(1px + 2vw);}
    #project-1-images{width:80%;text-align:center;}

    /* button */
    .btn41-43{font-size:calc(1px + 2vw);margin:10vh 12vw;}

    /* project 1 video */

    #more-project-1{flex-direction: column-reverse;align-items: center;}
    #more-1-info{width:70%;}
    #more-1-info h3{font-size:calc(1px + 2.5vw);}
    #more-1-info p{font-size:calc(1px + 2vw);}
    #more-video{width:70%;margin:4vh auto;text-align:center;}

    /* project 2 */

    #project-2{flex-direction: column;align-items: center;}
    #project-2-info{width:70%;}
    #project-2-info h2{font-size:calc(1px + 3vw);}
    #project-2-info h3{font-size:calc(1px + 2.5vw);}
    #project-2-info p{font-size:calc(1px + 2vw);}
    #project-2-image{width:60%;}
    #project-2-images.gallery{padding:0;}

    /* project 3 */

    #project-3{flex-direction: column-reverse;align-items: center;}
    #project-3-info{width:70%;}
    #project-3-info h2{font-size:calc(1px + 3vw);}
    #project-3-info h3{font-size:calc(1px + 2.5vw);}
    #project-3-info p{font-size:calc(1px + 2vw);}
    #project-3-images{width:80%;display:flex;justify-content:center; align-items:center;}
    #project-3-images img{margin-top:2vh;}

    /* project 4 */

    #project-4{flex-direction: column;align-items: center;}
    #project-4-info{width:70%;}
    #project-4-info h2{font-size:calc(1px + 3vw);}
    #project-4-info h3{font-size:calc(1px + 2.5vw);}
    #project-4-info p{font-size:calc(1px + 2vw);}
    #project-4-images{text-align:center;width:70%;}

 }

 @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);}

    /* Timeline */

    #nasa-projects{width:70%;margin:14vh auto;}
    #nasa-projects h2{font-size:calc(1px + 4vw);}
    #nasa-projects p{font-size:calc(1px + 3vw);}

    /* project 1 */

    #project-1{flex-direction: column;align-items: center;}
    #project-1-info{width:85%;}
    #project-1-info h2{font-size:calc(1px + 4vw);}
    #project-1-info h3{font-size:calc(1px + 3.5vw);}
    #project-1-info p{font-size:calc(1px + 3vw);}
    #project-1-images{width:100%;text-align:center;}

    /* button */
    .btn41-43{font-size:calc(1px + 2.6vw);margin:6vh 12vw;}

    /* project 1 video */

    #more-project-1{flex-direction: column-reverse;align-items: center;}
    #more-1-info{width:85%;}
    #more-1-info h3{font-size:calc(1px + 3.5vw);}
    #more-1-info p{font-size:calc(1px + 3vw);}
    #more-video{width:100%;margin:4vh auto;}

    /* project 2 */

    #project-2{flex-direction: column;align-items: center;}
    #project-2-info{width:85%;}
    #project-2-info h2{font-size:calc(1px + 4vw);}
    #project-2-info h3{font-size:calc(1px + 3.5vw);}
    #project-2-info p{font-size:calc(1px + 3vw);}
    #project-2-image{width:75%;}
    #project-2-images.gallery{padding:0;}

    /* project 3 */

    #project-3{flex-direction: column-reverse;align-items: center;}
    #project-3-info{width:85%;}
    #project-3-info h2{font-size:calc(1px + 4vw);}
    #project-3-info h3{font-size:calc(1px + 3.5vw);}
    #project-3-info p{font-size:calc(1px + 3vw);}
    #project-3-images{width:90%;display:flex;justify-content:center; align-items:center;}
    #project-3-images img{margin-top:2vh;}

    /* project 4 */

    #project-4{flex-direction: column;align-items: center;}
    #project-4-info{width:85%;}
    #project-4-info h2{font-size:calc(1px + 4vw);}
    #project-4-info h3{font-size:calc(1px + 3.5vw);}
    #project-4-info p{font-size:calc(1px + 3vw);}
    #project-4-images{text-align:center;width:90%;}
 }

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

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

    /* introduction */

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

    /* Timeline */

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

    /* project 1 */

    #project-1-info h2{font-size:40px;}
    #project-1-info h3{font-size:24px;}
    #project-1-info p{font-size:20px;}

    /* button */
    .btn41-43{font-size:18px;}

    /* project 1 video */

    #more-1-info h3{font-size:24px;}
    #more-1-info p{font-size:20px;}

    /* project 2 */

    #project-2-info h2{font-size:40px;}
    #project-2-info h3{font-size:24px;}
    #project-2-info p{font-size:20px;}

    /* project 3 */

    #project-3-info h2{font-size:40px;}
    #project-3-info h3{font-size:24px;}
    #project-3-info p{font-size:20px;}

    /* project 4 */

    #project-4-info h2{font-size:40px;}
    #project-4-info h3{font-size:24px;}
    #project-4-info p{font-size:20px;}

 }