/* CSS is organized generally by order of appearance */

a {
  text-decoration: none;
}

body, html{
  background-color: black;
  display: block;
  position: fixed;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100vh;
  font-family: 'Helvetica Neue', helvetica, sans-serif;
  font-size: 16px;
  overflow: hidden;
}

@font-face {
 font-family: 'Chromosome';
 src: url('./public/fonts/ChromosomeHeavy.woff') format('woff');
}

/* If the site is being viewed on a small screen, scrolling is disabled so the arrow is hidden and the size of the about div and modal are smaller */

@media screen and (max-width: 900px) {
  #arrow {
    visibility: hidden;
  }

  #about div {
    width: 65vw;
  }

  #modal {
    width: 100vw;
    height: 90vh;
    margin-top: 20%;
  }

  #message {
    height: 25vh;
  }
}

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

  #about div {
    width: 40vw;
    max-width: 450px;
  }

  #modal {
    width: 50vw;
    height: 60vh;
    max-height: 500px;
    border-radius: 10px;
    border: 5px solid #FF879D;
  }

  #message {
    height: 13vh;
  }
}

#about {
  position: absolute;
  opacity: 0;
  background-size: 100% auto;
  background-repeat: no-repeat;
  -webkit-transition: opacity .5s ease;
  -moz-transition: opacity .5s ease;
  -ms-transition: opacity .5s ease;
  -o-transition: opacity .5s ease;
  transition: opacity .5s ease;
}

#bio{
  margin-top: 10px;
  margin-left: 1%;
  display: block;
  font-family: 'Raleway', sans-serif;
  font-size: 1.05rem;
}

#about div{
  position: absolute;
  top: 32.5%;
  left: 15%;
  height: 100vh;
}

#andrewrussell {
  text-shadow: 2px 2px #FF879D;
  font-family: 'Chromosome', cursive;
  letter-spacing: -1.5px;
  color: white;
  font-size: 2.6rem;
  font
  display: block;
}

#about span{
  color: white;
  opacity: 0;
  margin-top: 10px;
  -webkit-transition: opacity .5s ease;
  -moz-transition: opacity .5s ease;
  -ms-transition: opacity .5s ease;
  -o-transition: opacity .5s ease;
  transition: opacity .5s ease;
}

#about img{
    margin-top: 15px;
}

#insta {
  width: 20px;
  height: 20px;
}

#mail {
  padding-bottom: 2px;
  padding-left: 5px;
  width: 29px;
  height: 18px;
}

#mail:hover, #send:hover, #closemodal:hover, #send:hover{
  cursor: pointer;
}

#modal {
  padding-top: 15px;
  font-family: 'Chromosome', cursive;
  color: white;
  text-shadow: 2px 2px #FF879D;
  opacity: 0;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: black;
  -webkit-transition: opacity .5s ease;
  -moz-transition: opacity .5s ease;
  -ms-transition: opacity .5s ease;
  -o-transition: opacity .5s ease;
  transition: opacity .5s ease;
}

label, input, textarea {
  margin-left: 15px;
  margin-right: 15px;
  display: block;
}

label{
  font-size: 1.5em;
  vertical-align: middle;
  margin-bottom: 5px;
}

#message{
  vertical-align: top;
  resize: none;
}

input, textarea {
  font-family: 'Raleway', sans-serif;
  width: 90%;
  font-size: 1em;
  color: white;
  background: none;
  border: none;
  border-bottom: 2px solid #FF879D;
  outline: none;
}

input:focus, textarea:focus{
  outline: none;
}

textarea::-webkit-scrollbar {
  width: 12px;
  background-color: black; }

textarea::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #FF879D;
}

#send {
  text-align: center;
  font-size: 2em;
}

#closemodal {
  position: absolute;
  text-align: right;
  font-size: 2em;
  top: 5px;
  right: 15px;
}

#arrow {
  opacity: 0;
  z-index: 2;
  position: fixed;
  bottom: 5%;
  left: 50%;
  transform: translateX(-50%);
  transition: opacity .5s ease;
  -webkit-transition: opacity .5s ease;
  -moz-transition: opacity .5s ease;
  -ms-transition: opacity .5s ease;
  -o-transition: opacity .5s ease;
  transition: opacity .5s ease;
}

/* This attribute is toggled in JS to make sure the arrow used to continue "scrolling" only has a pointer over it when it's being displayed */
.ready {
  cursor: pointer;
}

.slide {
  width: 100vw;
  height: 100vh;
  -webkit-transition: opacity .5s ease;
  -moz-transition: opacity .5s ease;
  -ms-transition: opacity .5s ease;
  -o-transition: opacity .5s ease;
  transition: opacity .5s ease;
}

#walkincontainer {
  position: absolute;
  opacity: 0;
  background-color: black;
  background-size: 50% auto;
  background-repeat: no-repeat;
  background-position: right 30%;
}

#walkin{
  position: absolute;
  left: 15%;
  top: 20%;
}

#walkin span{
  color: white;
  font-size: 3rem;
  font-family: 'Bungee Shade', cursive;
  text-shadow: 2px 2px #DCB33E;
  opacity: 0;
  display: inline-block;
  margin-bottom: 2rem;
  padding: 10px;
  -webkit-transition: opacity .5s ease;
  -moz-transition: opacity .5s ease;
  -ms-transition: opacity .5s ease;
  -o-transition: opacity .5s ease;
  transition: opacity .5s ease;
}

#storys {
  display: table;
  position: absolute;
  opacity: 0;
  background-size: cover;
  background-repeat: no-repeat;
  color: white;
  font-size: 2.75rem;
  font-family: 'Yatra One', cursive;
  text-shadow: 4px 4px #000000;
}

#storys div{
  vertical-align: middle;
  display: table-cell;
  text-align: center;
}

#storys span{
  opacity: 0;
  display: inline-block;
  margin-bottom: 2rem;
  padding: 10px;
  -webkit-transition: opacity .5s ease;
   -moz-transition: opacity .5s ease;
    -ms-transition: opacity .5s ease;
     -o-transition: opacity .5s ease;
        transition: opacity .5s ease;
}

#iama {
  display: table;
  position: absolute;
  background-size: cover;
  background-repeat: no-repeat;
  font-size: 3rem;
  text-shadow: 2px 2px #000000;
  font-family: 'Chromosome', cursive;
  color: white;
  opacity: 0;
  background-color: #EFD409;
}

#iamadiv {
  vertical-align: middle;
  display: table-cell;
  text-align: center;
}

#iama span{
  background-color: black;
  opacity: 0;
  -webkit-transition: opacity .5s ease;
  -moz-transition: opacity .5s ease;
  -ms-transition: opacity .5s ease;
  -o-transition: opacity .5s ease;
  transition: opacity .5s ease;
}

#walkaway {
  display: table;
  position: absolute;
  color: white;
  font-family: 'Kumar One', cursive;
  text-shadow: 2px 2px #40D1FF;
  opacity: 0;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

#walkawaycontainer{
  vertical-align: middle;
  display: table-cell;
  text-align: center;
}

#walkaway span{
  font-size: 5rem;
  opacity: 0;
  -webkit-transition: opacity .5s ease;
  -moz-transition: opacity .5s ease;
  -ms-transition: opacity .5s ease;
  -o-transition: opacity .5s ease;
  transition: opacity .5s ease;
}

#stories {
  padding-left: 5%
  top: 0;
  left: 0;
}

#dreams {
  position: absolute;
  width: 100vw;
  height: 100vh;
  opacity: 0;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center 50%;
}

#dream-table {
  display: table;
  width: 100vw;
  height: 100vh;
}

#dream {
  vertical-align: middle;
  display: table-cell;
  text-align: center;
  text-shadow: 2px 2px #FF879D;
  font-family: 'Lobster Two', cursive;
  color: white;
  font-size: 3.5rem;
}

#shape {
  bottom: 0;
  left: 0;
}

#feather {
  position: absolute;
  opacity: 0;
  background-size: cover;
  background-position: center 50%;
}

.featherword {
  opacity: 0;
  -webkit-transition: opacity .5s ease;
  -moz-transition: opacity .5s ease;
  -ms-transition: opacity .5s ease;
  -o-transition: opacity .5s ease;
  transition: opacity .5s ease;
}

#feathertext{
  position: absolute;
  font-family: 'Cabin Sketch', cursive;
  color: white;
  text-shadow: 2px 2px black;
  text-align: center;
  width: 100%;
  font-size: 5rem;
  top: 50%;
  transform: translateY(-50%);
}