* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Montserrat, sans-serif;
  list-style-type: none;
  text-align: center; 

}

a {
  text-decoration: none;
  color: #FFF; 
}

html {
  font-size: 20px; 
}

body {
  font-size: 1rem;
  background-color: #001001;
  color: #00CC9C;
  color: #00ff65;
  background: rgba(70,181,148,1);
  background: -moz-radial-gradient(center, ellipse cover, #00a870 0%, rgba(0,22,8,1) 51%, rgba(0,22,8,1) 100%);
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(70,181,148,1)), color-stop(51%, rgba(0,22,8,1)), color-stop(100%, rgba(0,22,8,1)));
  background: -webkit-radial-gradient(center, ellipse cover, #00a870 0%, rgba(0,22,8,1) 51%, rgba(0,22,8,1) 100%);
  background: -o-radial-gradient(center, ellipse cover, #00a870 0%, rgba(0,22,8,1) 51%, rgba(0,22,8,1) 100%);
  background: -ms-radial-gradient(center, ellipse cover, #00a870 0%, rgba(0,22,8,1) 51%, rgba(0,22,8,1) 100%);
  background: radial-gradient(ellipse at center, #00a870 0%, rgba(0,22,8,1) 51%, rgba(0,22,8,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#46b594', endColorstr='#001608', GradientType=1 );
}

.wrapper {
 width: 100vw;
 height: 100vh;
 display: flex;
 flex-direction: column;
 justify-content: space-around;
 margin: 0;
 background-image: url("../img/backgroundBottom.svg");
 background-position-x: center;
 background-position-y: top;
 background-size: 105%;
 background-repeat: no-repeat;
 transition: all .6s ease;
 animation: float 10s forwards;
}



.logo{
  transition: all .6s ease;
  animation: 5s focus infinite;
  
}
svg{
  border: 1px solid #FFF;
  border-radius: 10px;
  margin-bottom: 10px;
}


.echo path, .echo polygon{
  fill: rgba(0, 195, 255, 0.486);

  animation: wobble 5s infinite;
  animation-delay: 2s;
}

.echo2 path, .echo2 polygon{
  fill: rgba(247, 0, 255, 0.466);

  animation: wobble 5s infinite;
  animation-delay: 1.8s;
}

@keyframes focus{
  0% {opacity: 1}
  25%{opacity: 1}
  50%{opacity: .7}
  75%{opacity: 1}
  100%{opacity: 1}
}

@keyframes float{
  0%{background-position-y: top;}
  60%{background-position-y: 10%}
  100%{background-position-y: top;}
}

@keyframes wobble{
  0% {transform: translateX(-6px) translateY(-6px)}
  2% {transform: translateX(6px) translateY(6px) }
  3% {transform: translateX(-6px) translateY(-6px) }
  5% {transform: translateX(0px) translateY(0px) }
  9% {transform: translateX(0px) translateY(0px) }
  10% {transform: translateX(-6px) translateY(-6px) }
  12% {transform: translateX(6px) translateY(6px)}
  13% {transform: translateX(-6px) translateY(-6px) }
  15% {transform: translateX(0px) translateY(0px) }
  100% {transform: translateX(0px) translateY(0px) }
}

#JVNBig{
  z-index: 15;
  transition: all .6s ease;
}
#JVNSmall{
  display: none;
  z-index: 10;
  transition: all .6s ease;
}

#rm{
  position: fixed;
  left: 20px;
  top: 20px;
  z-index: 20;
}
.middle{
  color: #FF1BDD;
  text-align: center;
  padding: 5vh 40vw;
  transition: all .6s ease;
}
.middle h1{
  letter-spacing: -2px;
  font-weight: 300
}
.middle h1 span{
  font-weight: 800;
  font-size: 2rem;
}

.lead{
  color:#00CC9C;
  margin-top: 70px;
  width: 100vw;
  letter-spacing: 10px;
  font-weight: 300;
  font-size: .7rem;
  transition: all .6s ease;
  text-shadow: 0 0 5px #00CC9C
}


@media (max-height: 400px) {
  body {
    transition: all 1s ease; 
  }
  #JVNSmall{
    text-align: center;
    display: inline-block;
  }
  #JVNBig{
    display:none;
  }
  .wrapper{
    background-position-y: 40%;
    animation: none;
  }
  .middle h1{
    letter-spacing: -2px;
    font-weight: 300;
    font-size: 1.6rem;
  }
  .middle h1 span{
    font-weight: 900;
    font-size: 2rem;
  }
}

#matrix1, #matrix2{
  margin: 0 auto;
}
#matrix2{
  opacity: .4;
}


footer {
  width: 100vw;
  position: fixed;
  bottom: 0;
  margin-top: 5px;
  background-color: #000;
  color: #555;
  grid-area: footer;
  font-size: .5rem;
  padding: 5px 20px;
  z-index: 20;
}