/* Box Model Hack */
* ,
*:before,
*:after {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     font-family: 'Roboto', sans-serif;

}

/* Clear fix hack */
.clearfix:after {
     content: ".";
     display: block;
     clear: both;
     visibility: hidden;
     line-height: 0;
     height: 0;
}


html{
     font-size: 62.5%;
}

/******************************************
/* BASE STYLES
/*******************************************/


.container{
     height: 100vh;
     clip: rect(0, auto, auto, 0);
     overflow: hidden;
     position: absolute;
     left: 0;
     width: 100%;

       /* safari hack */
  -webkit-mask-image: -webkit-linear-gradient(top, #ffffff 0%,#ffffff 100%);
}

.container_solid{
     background-color: white;
     top: 0;
}

.title_wrapper {
     position: fixed;
     display: block;
     margin: auto;
     width: 100%;

     top: 50%;
     -webkit-transform: translateY(-50%);
          -ms-transform: translateY(-50%);
               transform: translateY(-50%);
}

.title_wrapper h1 {
     text-align: center;
}

.container_solid .title_wrapper h1 {
     background-image: url(../img/DSC_2980.jpg);
     background-size: 100vw auto;
     background-position: center;
     -webkit-text-fill-color: transparent;
     text-fill-color: transparent;
     -webkit-background-clip: text;
     background-clip: text;
     color: black;
     font-size: 8rem;
    
}

.container_image{
     background-image: url(../img/DSC_2980.jpg);
     background-size: 100vw auto;
     background-position: center;
     background-attachment: fixed;
     background-repeat: no-repeat;
     top: 100vh;
}




.container_image .title_wrapper h1{
     color: white;
     text-shadow: 2px 2px rgba(0,0,0,0.5);
     font-size: 8rem;
}

/******************************************
/* LAYOUT
/*******************************************/

h2{
     text-shadow: 2px 2px rgba(0,0,0,0.5);
     margin-top: 550px;
     text-align: center;
     font-size: 5rem;
}

.blerb{
     top: 200vh;
     width: 100%;
     position: absolute;
     left: 0;
     background: transparent;
     
}

.blerb a{
     text-decoration: none;
     color: inherit;
}






/******************************************
/* ADDITIONAL STYLES
/*******************************************/

.imgGallery{
     top: 300vh;
     width: 50%;
     position: absolute;
     display: grid;
     grid-template-columns: repeat(3 , 33.3%);
     justify-content: center;
     align-items: center;
     margin-left: 25.4%;
     grid-column-gap: .5rem;
     padding-bottom: 6rem;
     
}

.gallery_img img{
     width: 100%;
     height: auto;
}

.gallery_img{
     transition: transform 200ms ease-in-out;
}

.gallery_img:hover {
     transform: scale(2 , 2);
     transition: transform 500ms ease-in-out;
}

.topImg{
     grid-column-start: 1;
     grid-column-end: 4;
}
.bottomImg{
     grid-column-start: 1;
     grid-column-end: 4;
}

/******************************************
/* MEDIA QUERIES
/*******************************************/

@media (max-width: 600px) {
     .imgGallery{
          width: 100%;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          margin: 200px 0 0 0 ;
          transform: none;
     }
     .gallery_img:hover {
          transform: none;
          transition: none;
     }


}


@media (max-width: 600px) {
     .container_solid .title_wrapper h1 , .container_image .title_wrapper h1{
          width: 100%;
          font-size: 5rem;
          margin: 0;  
     }

}