index.css

body {
  font-family: "Playfair Display", serif;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.text {
  display:inline-block;
  overflow:hidden;
  white-space:nowrap;
}

.text:first-of-type {                    
  animation: showup 4s infinite;
}

.text:last-of-type {
  width:0px;
  animation: reveal 2s infinite;
}

h2 {
  margin: left -355px;
  animation: slidein 4s infinite;
}

@keyframes showup {
  0% {opacity:0;}
  20% {opacity:1;}
  80% {opacity:1;}
  100% {opacity:0;}
}

@keyframes slidein {
  0% { margin-left:-800px; }
  20% { margin-left:-800px; }
  35% { margin-left:0px; }
  100% { margin-left:0px; }
}

@keyframes reveal {
  0% {opacity:0;width:0px;}
  20% {opacity:1;width:0px;}
  30% {width:355px;}
  80% {opacity:1;}
  100% {opacity:0;width:355px;}
}

.img-responsive {
  position: absolute;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
}

h1, h2 {
  position: absolute;  
  margin-top: 80%;
  color: black;
  width: 100%;
  text-align: center;
  font-weight : 900;
}

h2 {
  position: absolute; 
  margin-top: 78%;
  color:black;
  font-weight : bold;
}

.nav-link {
  font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
  color: rgb(3, 45, 255);
  text-decoration: none;
}

.icons {
  position: absolute;
  padding-left: 90%;
  bottom: 5%;
}

.facebook, .instagram {
  color: rgba(2, 6, 138, 0.708);
  width: 70%;
  height: 70%;
}

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

  h1, h2 {
    font-size: 25px;
    top: 25%;
  }

  h2 {
    font-size: 20px;
    top: 33%;
  }
}

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

  h1, h2 {
    font-size: 25px;
    margin-top: 80%;
  }

  h2 {
    font-size: 18px;
    margin-top: 80%;
  }

  .icons {
    bottom: 3%;
  }
}

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

  h1, h2 {
    font-size: 28px;
    margin-top: 99%;
  }

  h2 {
    font-size: 21px;
    margin-top: 93%;
  }

  .icons {
    bottom: 5%;
  }

  .facebook, .instagram {
    width: 80%;
    height: 80%;
  }
}

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

  h1, h2 {
    font-size: 32px;
    margin-top: 50%;
  }

  h2 {
    font-size: 25px;
    top: 30%;
  }
}

@media screen and (min-width: 560px) and (max-height: 320px) {

  h1, h2 {
    font-size: 24px;
    margin-top: 18%;
  }

  h2 {
    font-size: 20px;
    top: 35%;
  }
}

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

  h1, h2 {
    margin-top: 50%;
  }

  h2 {
    top: 30%;
  }
}

@media screen and (min-width: 600px) and (max-height: 380px) {

  h1, h2 {
    font-size: 24px;
    margin-top: 18%;
  }

  h2 {
    font-size: 20px;
    top: 35%;
  }
}

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

  .nav-link {
    font-size: 20px;
  }

  h1 {
    font-size: 45px;
    top: 20%;
  }

  h2 {
    font-size: 35px;
    top: 29%;
  }
  
  .icons {
    bottom: 6%;
  }

  .facebook, .instagram {
    width: 100%;
    height: 100%;
  }
}

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

  h1 {
    margin-top: 27%;
  }

  h2 {
    margin-top: 30%;
  }
}

@media screen and (min-width: 920px) and (max-height: 430px) {

  h1, h2 {
    font-size: 24px;
    margin-top: 18%;
  }

  h2 {
    font-size: 20px;
    top: 36%;
  }
}

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

  h1 {
    font-size: 42px;
    top: 30%;
  }

  h2 {
    top: 40%;
    font-size: 30px;
  }

  .nav-link {
    font-size: 22px;
  }

  .facebook, .instagram {
    width: 100%;
    height: 100%;
  }
}

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

  h1 {
    margin-top: 15%;
  }
  
  h2 {
    top: 15%;
  }

  .icons {
    bottom: 12%;
  }
}/*# sourceMappingURL=index.css.map */