@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
body{
  background: black;
  margin:0;
  padding:0;
  width: 100vw;
  height: 100vh;
  font-family: Roboto;
  display: flex;
  /* align-items: center; */
  justify-content: center;
}

body a {
  color: aliceblue;
  text-decoration: none;
  margin: 0 15px;
  font-weight: bold;
  transition: color 0.3s ease;
}

body a:hover {
  color: darkturquoise;
}

nav {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  background-color: #121212;
  padding: 15px;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
}

nav a {
  color: aliceblue;
  text-decoration: none;
  margin: 0 15px;
  font-weight: bold;
  transition: color 0.3s ease;
}

nav a:hover {
  color: darkturquoise;
}

.container {
  max-width: 1200px;
  margin: auto;
  padding: 80px 30px 30px;
  color: aliceblue;
  font-size: large;
}

.container a {
  color: rgb(78, 246, 229);
  margin: 0px;
  text-decoration: none;
  font-weight: bold;
  transition: color 0.3s ease;
}

h1 {
  margin-top: 20px;
}

.about{
  color: aliceblue;
  margin: 0px;
  margin-top: 0px;
  font-size: large;
}

.square{
  display: flex;
  position: relative;
  width: 240px;
  height: 240px;
  border-radius: 5%;
  border: 1px solid DarkTurquoise;
  align-self: center;
  align-items: center;
  justify-content: center;
}

.dot{
  width: 10px;
  height: 10px;
  position: absolute;
  background: DarkTurquoise;
  border-radius: 50%;
  box-shadow: 0 0 10px 10px DarkTurquoise;
  top: -5px;
  left: -5px;
  animation: breathe 14s infinite;
}

.directions{
  height: 175px;
  width: 175px;
  color: white;
  background:DarkTurquoise;
  border-radius: 5%;
  text-align: center;
  font-size: 1.5em;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: expand 14s infinite;
}

span{
  position: absolute;
  color: rgba(255, 255, 255, 0);
}
.span1{
  animation: words1 14s infinite;
}
.span2{
  animation: words2 14s infinite;
}
.span3{
  animation: words3 14s infinite;
}
.span4{
  animation: words4 14s infinite;
}

@keyframes breathe{
  0% {
    top: -5px;
    left: -5px;
  }
  25% {
    top: -5px;
    transform: translate(240px, 0px);
  }
  50% {
    transform: translate(240px, 240px);
  }
  75% {
    transform: translate(0px, 240px);
  }
  100% {
    transform: translate(0px, 0px);
  };
}

@keyframes expand{
  0% {
    height: 175px;
    width: 175px;
  }
  25% {
    height: 220px;
    width: 220px;
  }
  50% {
    height: 220px;
    width: 220px;
  }
  75% {
    height: 175px;
    width: 175px;
  }
  100% {
    height: 175px;
    width: 175px;
  };
}

@keyframes words1{
  0% {
    color: rgba(255, 255, 255, 1);
  }
  24% {
    color: rgba(255, 255, 255, 1);
  }
  26% {
    color: rgba(255, 255, 255, 0);
  }
  50% {
    color: rgba(255, 255, 255, 0);
  }
  75% {
    color: rgba(255, 255, 255, 0);
  }
  100% {
    color: rgba(255, 255, 255, 0);
  };
}

@keyframes words2{
  0% {
    color: rgba(255, 255, 255, 0);
  }
  24% {
    color: rgba(255, 255, 255, 0);
  }
  26% {
    color: rgba(255, 255, 255, 1);
  }
  49% {
    color: rgba(255, 255, 255, 1);
  }
  51% {
    color: rgba(255, 255, 255, 0);
  }
  75% {
    color: rgba(255, 255, 255, 0);
  }
  100% {
    color: rgba(255, 255, 255, 0);
  };
}

@keyframes words3{
  0% {
    color: rgba(255, 255, 255, 0);
  }
  24% {
    color: rgba(255, 255, 255, 0);
  }
  26% {
    color: rgba(255, 255, 255, 0);
  }
  49%{
    color: rgba(255, 255, 255, 0);
  }
  51% {
    color: rgba(255, 255, 255, 1);
  }
  74% {
    color: rgba(255, 255, 255, 1);
  }
  76% {
    color: rgba(255, 255, 255, 0);
  }
  100% {
    color: rgba(255, 255, 255, 0);
  };
}

@keyframes words4{
  0% {
    color: rgba(255, 255, 255, 0);
  }
  24% {
    color: rgba(255, 255, 255, 0);
  }
  26% {
    color: rgba(255, 255, 255, 0);
  }
  50% {
    color: rgba(255, 255, 255, 0);
  }
  74% {
    color: rgba(255, 255, 255, 0);
  }
  76% {
    color: rgba(255, 255, 255, 1);
  }
  99% {
    color: rgba(255, 255, 255, 1);
  }
  100% {
    color: rgba(255, 255, 255, 0);
  };
}