@import url('https://fonts.googleapis.com/css?family=IBM+Plex+Mono:400,700');
@font-face {
  font-family: "hkgrotesk";
  src: url("fonts/hkgrotesk-medium.woff2") format("woff2"),
       url("fonts/hkgrotesk-medium.woff") format("woff");
}

html{
  background-color: #121212;
}

body{
  margin: 0;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 14px;
  color: hsl(0,0%,87%);
  background-color: #121212;
}

.hk{
  font-family: 'hkgrotesk', sans-serif;
  font-size: 1.1em;
}

a, a:visited{
  color: hsl(0,0%,87%);
  text-decoration: none;
}

a:hover{
  color: #999;
}

/* buttons */

.holder{
  text-align: center;
  margin: 3em;
}

.btn{
  font-size: 1.2em;
  font-family: 'hkgrotesk', sans-serif;
  color: #121212;
  background-color: hsl(0,0%,87%);
  padding: 0.8em 1.1em;
  border-radius: 7px;
  border: 2px hsl(0,0%,87%) solid;
}

.btn:hover{
  background-color: #121212;
  color: hsl(0,0%,87%);
}


/* header bar */

#mobileHeader{
  display: none;
}


#desktopHeader{
  display: flex;
  justify-content: space-between;
  padding: 1.8em 1.5em;
  position: fixed;
  width: calc(100% - 3em);
  top: -6em;
  background-color: #121212;
  z-index: 99;
}

.menuItems{
  margin-top: 0.25em;
  width: 6em;
  font-size: 1.2em;
}

.right{
  text-align: right;
}

.title{
    font-weight: bold;
    font-size: 1.7em;
}

.headerLogo:hover{
  cursor: pointer;
}

.joinBtn{
  color: #fff;
  border: 1px #fff solid;
  padding: 0.5em 0.8em;
  transition: background-color 0.15s ease, color 0.15s ease;
  border-radius: 5px;
  box-shadow: 0 3px 6px rgba(0,0,0,0.56), 0 3px 6px rgba(0,0,0,0.73);
  font-size: 0.95em;
}

.joinBtn:hover{
  background-color: #fff;
  color: #121212;
}

a.googleBtn{
  color: #121212;
  background-color: #fff;
  border: 1px #fff solid;
  padding: 0.5em 0.8em;
  transition: background-color 0.15s ease, color 0.15s ease;
  border-radius: 5px;
  box-shadow: 0 3px 6px rgba(0,0,0,0.56), 0 3px 6px rgba(0,0,0,0.73);
  font-size: 0.95em;
}

.googleBtn:hover{
  background-color: #121212;
  color: #fff;
}

#contents{
  position: fixed;
  width: auto;
  top: calc(5em);
  left: 0;
  padding: 1em 3em 2em 20px;
  margin-left: -17em;
  background-color: #121212;
  height: 100vh;
  z-index: 99;
}

#contents a, #contents a:visited{
  padding: 0;
  margin: 0;
  color: hsl(0,0%,87%);
  line-height: 2em;
  font-size: 1.2em;
  border-bottom: 2px #121212 solid;
  transition: border 0.6s ease;
}

#contents a:hover{
  color: hsl(0,0%,95%);
  border-bottom: 2px hsl(0,0%,95%) solid;
}

#contents a.noBorder{
  border-bottom: 2px #121212 solid;
}

#contents .fa-twitter{
  font-size: 1.5em;
  margin-top: 0.5em;
  transition: color 0.3s ease;
}

#contents .fa-twitter:hover{
  color: #00aced;
}

.desktopBars{
  transition: color 0.3s ease;
  word-spacing: 0.9em;
}

.desktopBars:hover{
  cursor: pointer;
  color: #fff;
}



.container h2{
  font-family: 'hkgrotesk', sans-serif;
  font-weight: normal;
  color: #fff;
}

.fadeDiv{
  display: none;
  opacity: 0;
}

/* top title */

#top{
  width: 100vw;
  top: 0;
  overflow: hidden;
  height: auto;
  line-height: 8em;
  display: block;
}

#top h1{
  font-weight: 700;
  font-size: 10em;
  margin: -0.3em 0 0 -0.1em;
  white-space: nowrap;
  color: hsl(0,0%,60%);
  -webkit-text-fill-color: #121212; /* Will override color (regardless of order) */
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: hsl(0,0%,60%);
}


/* main content */

.container{
  display: flex;
  justify-content: space-between;
  align-content: flex-start;
  margin: 4em 2em;
}

.siteContent{
  font-size: 1.38vw;
  margin-top: -0.3vw;
}

.column > *:first-child{
  margin-top: 0;
}

.colCard > *:first-child{
  margin-top: 0;
}

.column{
  width: 25vw;
  padding: 0 2em;
}

.colCard{
  margin-bottom: 1em;
  min-height: 160px;
}

.column a, .column a:visited{
  transition: border 0.6s ease;
  border-bottom: 2px #121212 solid;
}

.column p{
  /* text-align: justify; */
  line-height: 1.35em;
}

.linkHolder{
  text-align: right;
}

.writerLink:hover{
  cursor: pointer;
}


.column a:hover{
    color: hsl(0,0%,87%);
    border-bottom: 2px hsl(0,0%,70%) solid;
}


/* special parts */

.tagline{
  font-size: 1.5em;
  text-align: justify;
  margin-bottom: 4em;
}

.tagtitle{
  font-weight: bold;
  font-size: 1.2em;
}

.contact{
  margin-bottom: 2em;
}


/* writers */

#writersDiv{
  margin: 2em 4em 6em 4em;
}

h2.sectionTitle{
  font-size: 2.2em;
}

.row{
  display: flex;
  justify-content: space-between;
}

.col{
  width: 20vw;
}

.col a{
  line-height: 1.8em;
  /* display: none; */
}


/* footer */

footer{
  border-top: 1px #666 solid;
  width: calc(100% - 6em);
  display: flex;
  justify-content: space-between;
  margin: 0 3em;
  padding: 2em 0;
  align-content: center;
  align-items: center;
  margin-top: 5em;
  font-size: 1em;
}

.footer--left a, .footer--left a:visited{
  color: #666;
  transition: color 0.5s ease;
}

.footer--left a:hover{
  /* text-decoration: underline; */
  color: hsl(0,0%,87%);
}

.footer--right .fa-twitter{
  font-size: 1.8em;
  color: #666;
  transition: color 0.5s ease;
}

.footer--right .fa-twitter:hover{
  /* color: #2aa3ef; */
  color: #00aced;
}



/* rainbow */

.rainbow{
  transition: color .3s ease-in-out;
  -moz-transition: color .3s ease-in-out;
  text-decoration: none;
}

.rainbow:hover{
  -webkit-animation: rainbow 0.7s infinite;
  animation: rainbow 0.7s infinite;
  cursor: pointer;
}

a.rainbow:hover{
  border-bottom: 0px solid #121212;
}

 @-webkit-keyframes rainbow {
   0%, 100% { color: #7ccdea; }
   16%      { color: #0074d9; }
   32%      { color: #2ecc40; }
   48%      { color: #ffdc00; }
   64%      { color: #b10dc9; }
   80%      { color: #ff4136; }
 }
 @keyframes rainbow {
   0%, 100% { color: #7ccdea; }
   16%      { color: #0074d9; }
   32%      { color: #2ecc40; }
   48%      { color: #ffdc00; }
   64%      { color: #b10dc9; }
   80%      { color: #ff4136; }
 }

.joinCont{
  display: flex;
  align-content: flex-start;
  line-height: 1.5em;
}

.joinTitle{
  font-size: 2.3em;
  text-transform: uppercase;
  margin-bottom: 1em;
}

.joinCont a{
  text-decoration: underline;
}

.joinCont a:hover{
  color: #fff;
  text-decoration: underline;
}

.joinCol{
  padding: 2em;
}

.joinCol *:first-child{
  margin-top: 0;
}

.examples{
  width: 40vw;
}

.joinBlurb{
  margin: 3em auto 4em auto;
  font-size: 1.3em;
  line-height: 1.5em;
  width: 60vw;
}

.joinCont h3{
  font-size: 1.3em;
  font-weight: normal;
  margin-top: 2em;
}

.joinBtnHolder{
  margin-top: 3em;
  display: flex;
  justify-content: center;
  font-size: 1.2em;
}

.joinBtnHolder .joinBtn, .joinBtnHolder .googleBtn{
  margin:  0 1em;
  text-decoration: none;
}

.joinBtnHolder .joinBtn:hover{
  text-decoration: none;
  color: #121212;
}

.joinBtnHolder .googleBtn:hover{
  text-decoration: none;
}






.contactContainer{
  margin: 0 3em;
}

.contactContainer h3{
  margin-top: 3em;
}

.contactContainer a, .contactContainer a:visited, .contactContainer a:hover{
  text-decoration: underline;
}


/* screenshot */

.examplePage{
  width: 50vw;
}

.examplePage img{
  max-width: 100%;
}

.browser-bar{
  position: relative;
  background-color: #e4e4e4;
  width: calc(100% - 21px);
  padding: 7px 11px;
  border-radius: 8px 8px 0 0;
  z-index: 50;
}

.close{
  background-color: #8e8e93;
  border: 1px #737277 solid;
  height: 8px;
  width: 8px;
  margin-right: 5px;
  border-radius: 50%;
  display: inline-block;
}

img#exampleImage{
  border-radius: 0 0 4px 4px;
  box-shadow: 0 3px 6px rgba(0,0,0,0.76), 0 3px 6px rgba(0,0,0,0.99);
}


@media only screen and (max-device-width: 780px) {

    }

@media only screen and (max-device-width: 480px) {

  body{
      font-size: 16px;
  }

  #desktopHeader{
    display: none;
  }

  #mobileHeader{
    display: block;
    position: fixed;
    top: -5em;
    z-index: 99;
    background-color: #121212;
    width: 100%;
  }

  #mobileNavbar{
    display: flex;
    margin: 1em 12px;
    justify-content: space-between;
    width: calc(100% - 24px);
    align-items: center;
    font-size: 1.3em;
  }

  #mobileContents{
    display: flex;
    justify-content: space-between;
    margin: 0em;
    border-bottom: #999 1px solid;
  }

  .mobileContentsWrap{
    display: none;
  }

  .mobileTitle{
    font-weight: bold;
    font-size: 1em;
  }

  .mobileItems{
    width: 3em;
  }

  .mobileContentsCol{
    padding: 12px;
    line-height: 1.5em;
    font-size: 1.2em;
  }

  #top{
    display: none;
  }

  .container{
    flex-direction: column;
    margin: 0 12px;
  }

  .siteContent{
    margin-top: 0px;
    font-size: 6vw;
  }
  .mobiletag{
    font-size: 8vw;
  }
  .tagline{
    margin-bottom: 1em;
  }

  .column{
    width: auto;
    padding: 0;
  }

  .colCard > *:first-child{
    margin-top: 1em;
  }

  .linkHolder{
    text-align: center;
    margin-top: 2em;
  }

  #writersDiv{
    margin: 0 12px 1em 12px;
  }

  .row{
    justify-content: space-between;
    flex-flow: row wrap;
    align-items: flex-start;
    align-content: flex-start;
  }

  .col{
    width: 48%;
    font-size: 0.83em;
    /* height: auto; */
  }
  .col:nth-of-type(1){order: 1;}
  .col:nth-of-type(2){order: 3;}
  .col:nth-of-type(3){order: 2;}
  .col:nth-of-type(4){order: 4;}


  footer{
    margin: 3em 12px 1em 12px;
    padding: 1em 0 0 0;
    width: calc(100% - 24px);
  }
  .footer--right .fa-twitter{
    font-size: 1.4em;
    padding-right: 3px;
  }


  /* rainbow always on */

  .rainbowMob{
    -webkit-animation: rainbow 0.7s infinite;
    animation: rainbow 0.7s infinite;
  }




  .joinBlurb{
    margin: 4em 12px 2em 12px;
    width: calc(100% - 24px);
  }

  .joinCont{
    flex-direction: column-reverse;
  }

  .joinCol{
    padding: 12px;
  }

  .joinCol *:first-child{
    margin-top: 0;
  }

  .joinBtnHolder{
    margin: 1em 0 4em 0;
  }

  .examplePage{
    width: 100%;
    margin-bottom: 2em;
  }

  .joinTitle{
    font-size: 2em;
    margin-bottom: 0;
  }

  .joinExampleFlex{
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-start;
  }

  .contactContainer{
    margin: 0 1em;
  }
  .contactContainer h3{
    margin-top: 1em;
  }



}

@media only screen and (max-device-width: 320px) {
  .mobiletag{
    font-size: 7.6vw;
  }
  .mobileTitle{
    font-size: 1em;
  }
  .mobileItems{
    width: 1em;
    font-size: 0.9em;
  }
  .col{
    width: 47%;
    font-size: 0.85em;
  }
}