* {
  box-sizing: border-box;
  
}
body {
  overflow-x: hidden;
padding: 0 0px  !important;
margin: 0 !important;

background-color: #39c3ed;
 display: grid;

  height: 100vh;
  color: black;

}


.homecaption 
{text-align: center;
padding-top: 20px;
}

.homebutton {
  margin: 60px 0 0 0;

}


main {
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  margin-top: 50px;

}





a {color: black}

article {
  display: grid;
   width: 100%;
  grid-template-columns: repeat(auto-fit, minmax(0, 3fr));
  grid-gap: 40px;
  padding: 0 30px;
}




article a {
  opacity: 0;
}

.project-thumb {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
height: 100%;


}



.project-thumb img, .project-thumb video {
  height: 300px;
  max-height: 300px;
  max-width: 90%;
  object-fit: contain;
  -webkit-filter: drop-shadow(1px 1px 5px rgba(0, 0, 0, 0.25));

filter: drop-shadow(1px 1px 5px rgba(0, 0, 0, 0.25));}


  .text-thumb {
  border: 1.5px solid black;
  padding: 20px;
  background-color: white;
  color: black !important;
  font-size: 1.5em;
  line-height: 25px;
 
  margin: 0;
}






.page-name-nav {
    font-family: 'ABC Diatype Rounded', sans-serif;

}

header.homeheader {
 position: fixed;
  width: 100%;
  position: relative;
  top: 10px;
  left: 0;

  width: 100%;
    margin: 0px;
  padding: 0px 30px;


  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  z-index: 2000;

   box-sizing: border-box;
   text-align: left;
 
}



nav ul li {

    list-style-type:none;
    text-align: left;
  }



p {
  margin-block-start: 0em;
}




button img {
  display: inline;
  width: 22px;
  transform: translateY(3px);
}




@media screen and (max-width: 500px) {
  


.info-nav {
  transform: translateY(2px);
}




.text-thumb {
  font-size: 18px;
  line-height: 18px;
  padding: 5px;
  margin-bottom: 0px;
  width: 80% !important;
}



.homecaption 
{display: none;
}




body {
  padding: 80px 20px 100px 20px!important;
  display: block;
}





.homebutton {
  margin: 0;
  position: fixed;
  bottom: 20px;
  width: 50%;
 

}

.project-thumb {
    display: block;
    width: 100%;


}

main {

  margin-top: 0px;
  width: 100%;
   padding: 0 !important;
  height: 100%;
  align-items: center;
}


article {
   position: relative;
   width: 100%;
   height: 100% !important;
   margin: 0 !important;
   padding: 0 !important;
   grid-gap: 10px;
   display: flex;
   flex-direction: column;
   align-content: center;
   align-items: center;
}



article a {
  width: 100%;
  height: 30%;
}


article a:nth-child(1) .project-thumb {
    /*display: flex;
    align-items: flex-start;
    align-content: flex-start !important;*/
}


article a:nth-child(2) .project-thumb {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    
}

article a:nth-child(3) .project-thumb {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    position: relative;
    
}

.project-thumb img, .project-thumb video {
    /*height: 100%;
    max-height: 25vh;
    max-width: 40vw;
    object-fit: contain;
    margin-bottom: 0px;*/
    height: 100%;
    max-width: 40vw;
    object-fit: contain;
}




}