/* global styles */
html, body{
  width: 100%;
  /*height: 100%;*/
  margin: 0;
  padding: 0;
  font-size: 100%;
  font-family: aktiv-grotesk;
  opacity: 0;
  animation-name: media;
  animation-duration: 1s;
  animation-delay: .25s;
  animation-fill-mode: forwards;
}

body{
  /*background-color: #F0F0F0;*/
  background-color: #F0F0F0;
}

h1{
  font-family: aktiv-grotesk-extended;
  font-weight: bold;
  margin-left: .25vw;
  margin-right: .25vw;
}

p{

}

a, a:visited{
  color: inherit;
}

.black{
  color: #141204;
}
.white{
  color: #F0F0F0;
}
.blue, a:hover.blue{
  color: #2828FF;
}
.yellow, a:hover.yellow{
  color: #F0A202;
}
.green, a:hover.green{
  color: #248232;
}
.red, a:hover.red{
  color: #C5283D;
}
.brown, a:hover.brown{
  color: #92817A;
}

#content{
  margin: 4em;
  color: #141204;
  min-width: 50vw;
  max-width: 75vw;
  margin-left: auto;
  margin-right: auto;
}

#content h1{
  line-height: 1.5em;
  font-size: 24pt;
  margin-bottom: 1em;
}

#content p{
  font-weight: 300;
  margin-left: .25vw;
  margin-right: .25vw;
  text-indent: 1em;
  line-height: 1.5em;
  font-size: 12pt;
  letter-spacing: .01em;
}

/* lil knicknacks */
#buffer{
  height: 7em;
}

#bottom-gradient{
  width: 100%;
  height: 15%;
  position: absolute;
  bottom: 0;
}

#credits{
  position: fixed;
  font-size: .75em;
  font-weight: lighter;
  bottom: .25em;
  left: 5em;
}

/* forms */
form{

}
form input, form textarea{
  margin-top: .5em;
  margin-bottom: .25em;
  height: 2em;
  width: 97%;
  border-radius: .5em;
  border-style: solid;
  border-width: .1em;
  border-color: gray;
}
form input:active, form textarea:active, form input:target, form textarea:target{
  border-style: double;
  border-radius: .5em;
  border-width: .1em;
  border-color: #2828FF;
}
form textarea{
  height: 4em;
  font-family: helvetica;
}
form h1, form h2, form h3{
  font-family: aktiv-grotesk-extended;
  font-weight: bold;
  display: inline;
  margin-bottom: .75em;
  margin-top: 2em;
}
form p{
  display: inline;
  color: gray;
  font-weight: lighter;
}
.send-button{
  font-family: aktiv-grotesk-extended;
  font-weight: bold;
  color: #F0F0F0;
  background-color: #2828FF;
  height: 3em;
  width: auto;
  border-radius: .5em;
}

/* navigation bar */
.navbar{
  position: absolute;
  top: 4vh;
  right: 2vw;
  padding: 0;
  width: auto;
  height: 4em;
  background-color: transparent;
  animation-name: media;
  animation-duration: 1s;
  animation-delay: .25s;
  z-index: 1;
}

.navlogo{
  width: auto;
  height: auto;
  /*margin-right: 5em;*/
  color: #F0F0F0;
  float: left;
  position: fixed;
  left: 4vw;
  top: 4vh;
  /*
  position: absolute;
  top: 500px;
  left: 0;
  padding: 1em;
  */
  font-size: 8pt;
  font-weight: normal;
}
.navlogo h1{
  height: auto;
  margin: .75em;
}

.navlink, .navlink:active, .navlink:visited{
  height: auto;
  color: #141204;
  text-decoration: none;
  float: right;
  font-size: 8pt;
  margin-left: 1em;
  margin-right: 1em;
  transition: .5s;
  font-size: auto;
}
.navlink:hover{
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: .25em;
  text-underline-offset: .25em;
}
#navlink-this{
  text-decoration: underline;
  text-decoration-thickness: .25em;
  text-underline-offset: .25em;
  color: inherit;
}

/* gallery display */
#gallery-container{
  opacity: 0;
  width: 100%;
  animation-name: media;
  animation-duration: 1s;
  animation-delay: .75s;
  animation-fill-mode: forwards;
}

#gallery-list{
  list-style-type: none;
  padding: 0;
}

.gallery-card{
  float: left;
  width: calc(50% - .5vw);
  max-width: 100%;
  height: calc(50vw / 2 - .5vw);
  /*min-height: 30em;*/
  margin: .25vw;
  padding: 0px;
  background-position: center;
  background-size: cover;
}
.gallery-card img{
  width: 100%;
}
.gallery-card-info{
  max-width: 50%;
  margin: 1em;
  padding-left: 1em;
  padding-right: 1em;
  padding-top: .5em;
  padding-bottom: .5em;
  color: #F0F0F0;
  background-color: rgba(20, 18, 4, .9);
  /*border-style: solid;
  border-width: .05em;
  border-color: #FFFFFF;*/
}

.fade-in{
  height: 100%;
  width: 100%;
  margin: 0;
  opacity: 0;
  transition: .5s;
  overflow: auto;
}
.fade-in:hover{
  opacity: 1;
}

/* layout styles for individual project pages */
.pic-grid{
  width: 100%;
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.pic-grid a{
  margin: 0;
  padding: 0;
}

.column-single{
  width: calc(100% - .5vw);
  margin: .25vw;
}

.column-double{
  width: calc(50% - .5vw);
  float: left;
  margin: .25vw;
}

.column-triple{
  width: calc(100% / 3 - .5vw);
  float: left;
  margin: .25vw;
}

/* animations */
@keyframes media {
  0%    {opacity: 0}
  100%  {opacity: 1}
}

/* responsive css */
@media (min-width: 897px) {
  #content{
    max-width: 50vw;
  }

  .navbar{
    max-width: 70vw;
  }
}

@media (max-width: 896px) {
  #content{
    max-width: 75vw;
  }

  .column-double{
    width: calc(100% - .5vw);
    margin: .25vw;
  }

  .column-triple{
    width: calc(100% - .5vw);
    margin: .25vw;
  }

  .navbar{
    max-width: 65vw;
  }

  .navlogo, .navlink{
    font-size: 6pt;
  }

  .gallery-card{
    height: calc(75vw / 2 - .5vw);
  }
}

@media (max-width: 640px) {
  #content{
    max-width: 75vw;
  }

  .column-double{
    width: calc(100% - .5vw);
    margin: .25vw;
  }

  .column-triple{
    width: calc(100% - .5vw);
    margin: .25vw;
  }

  .navbar{
    max-width: 50vw;
    position: absolute;
  }

  .navlogo, .navlink{
    font-size: 6pt;
  }
}

@media (max-aspect-ratio: 1/1) {
  #content{
    max-width: 75vw;
  }

  .column-double{
    width: calc(100% - .5vw);
    margin: .25vw;
  }

  .column-triple{
    width: calc(100% - .5vw);
    margin: .25vw;
  }

  .gallery-card{
    height: calc(75vw - .5vw);
    width: calc(75vw - .5vw);
  }
}