body {
  background: #000000;
  color: #ffffff;
  font-family: Nunito Sans;
  font-size: 100%;
  overflow-x: hidden;
}

/* unvisited link */
a:link {
    color: white;
    text-decoration: none;
}

/* visited link */
a:visited {
    color: white;
}

/* mouse over link */
a:hover {
    color: black;
}

/* selected link */
a:active {
    color: black;
}

.center1{
  position: absolute;
  height: 80%;
  width: 100%;
  top: 20%;
  align-items: center;
  text-align: center;
  vertical-align: middle;
}

.centertext{
  width: 30%;
  margin-left: 35%;
  margin-top: -3%;
}


#poster1{
  animation: logodelay 2s linear;
}

#poster2{
  animation: logodelay 6s linear;
}

.logo{
  position: absolute;
  width: 100%;
  align-items: center;
  text-align: center;
  top: 35%;
  animation: logodelay 3s ease;
}

.logoabout{
  position: absolute;
  width: 100%;
  text-align: center;
  align-items: center;
  top: 20%;
  animation: logodelay 3s linear;
}




@keyframes logodelay {
  0% {
       display: none;
       opacity: 0;
   }


   100% {
       display: block;
       opacity: 1;
   }
}

.links{
  position: fixed;
  width: 100%;
  background-color: inherit;
  top: 0%;
  font-kerning: auto;
  line-height: 1;
  font-size: 3vh;
  border-image: 10px;
  text-align: center;
  word-spacing: 200%;
  z-index: 1;
  padding-bottom: 1%;
}

.imglinks{
  width: 100%;
  left: 0%;
  top: 0%;
  font-kerning: auto;
  font-size: 3vh;
  text-align: center;
  background: #000000;
  padding-bottom: 1%;
  overflow-x: hidden;
}



warpabout{
  width: 100%;
  align-items: center;
  align-self: center;
  align-content: center;
}

.about{
  font-family: sans-serif;
  position: absolute;
  width: 100%;
  margin-left: 0%;
  margin-top: 35%;
  font-size: 2.5vh;
  margin-bottom: 10%;
  display: inline-grid;
  text-align: left;
}

.about2{
  font-family: sans-serif;
  position: absolute;
  width: 40%;
  margin-left: 30%;
  margin-top: 60%;
  font-size: 2.3vh;
  margin-bottom: 10%;
  display: inline-grid;
  line-height: 1.4;

}

.aboutcontact{
  font-family: sans-serif;
  position: absolute;
  float: left;
  margin-left: 0%;
  margin-top: 35%;
  margin-bottom: 5%;
  line-height: 1.5;
  width: 100%;
  text-align: center;
}


.grid-container {
  width: 90%;
  margin-left: 4.5%;
  display: grid;
  grid-template-columns: 5fr 5fr 5fr;
  grid-template-rows: auto auto auto;
  background-color: #000000;
  padding: 1%;
  padding-top: 7%;
  align-items: center;
}

.grid-item {
  background-color: rgba(0, 0, 0, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 3%;
  font-size: 2vh;
  text-align: center;
  -webkit-filter: grayscale(1);
  animation: logodelay 1s linear;
}

.grid-item:hover{
  -webkit-filter: none;
}

.bookings{
  position: absolute;
  top: 18%;
  font-size: 2vh;
  text-align: center;
  width: 100%;
}

.residents{
  position: absolute;
  top: 19%;
  width: 100%;
  text-align: center;
  font-size: 3vh;
}

.aartists{
  position: absolute;
  top: 175%;
  font-size: 3vh;
  text-align: center;
  width: 100%;
}

.biopic{
  position: absolute;
  width: 27%;
  top: 41%;
  left: 20%;
}

.bio{
  position: absolute;
  top: 39%;
  left: 50%;
  line-height: 135%;
  width: 30%;
  font-size: 2.2vh;
  border-bottom: 40px solid black;
  font-family: sans-serif;
}

.biolinks{
  position: absolute;
  width: 27%;
  top: 95%;
  left: 20%;
  text-align: right;
  line-height: 200%;
  height: 20%;
  margin-bottom: 10%;
}

#artistfont{
  font-family: Nunito+Sans;
  font-size: 4vh;
}

h2{
  font-size: 3vh;
}

h2:hover {
  font-size: 3vh;
	animation: blinker 0.1s linear infinite;
}

h3{
  font-size: 3vh;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}




/*mobile*/

@media (max-width: 600px) {
    body {
        background-color: black;
        overflow-x: hidden;
    }
    .center1{
      width: 200%;
      margin-left: -55%;
      overflow-x: hidden;
    }

    .logo{
      position: absolute;
      width: 200%;
      margin-left: -50%;
      align-items: center;
      text-align: center;
      top: 20%;
      animation: logodelay 1s linear;
    }

    .links{
      position: fixed;
      width: 95%;
      background-color: inherit;
      top: 0%;
      font-kerning: auto;
      line-height: 1;
      font-size: 2.7vh;
      border-image: 10px;
      text-align: center;
      word-spacing: 100%;
      z-index: 1;
      padding-bottom: 1%;
    }

    .imglinks{
      display: none;
    }

    .aboutcontact{
      top: 28%;
    }

    .logoabout{
      overflow-x: hidden;
      width: 200%;
      margin-left: -50%;
    }

    .about2{
      top: 60%;
      font-size: 2.5vh;
      width: 80%;
      margin-left: 10%;
    }

    .grid-container {
      grid-template-columns: auto auto;
      padding-top: 40%;
    }

    .aartists{
      top: 145%;
    }

    .biopic{
      width: 80%;
      top: 35%;
      left: 10%;
    }

    .bio{
      position: absolute;
      top: 140%;
      left: 10%;
      width: 80%;
    }

    .biolinks{
      position: absolute;
      width: 50%;
      top: 95%;
      left: 40%;
    }

}