html,
body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

#container {
  width: 100vw;
  height: 100vh;
  background-color: #0c090a;
}

.sentence {
  display: flex;
  align-items: center;
  height: 100vh;
  font-family: Verdana, sans-serif;
  font-size: 24px;
  color: #e5e4e2;
}

@media (max-width: 800px) {
  .sentence {
    margin-left: 10px;
  }
}

@media (min-width: 801px) and (max-width: 1000px) {
  .sentence {
    margin-left: 30px;
  }
}

@media (min-width: 1001px) and (max-width: 1200px) {
  .sentence {
    margin-left: 50px;
  }
}

@media (min-width: 1201px) {
  .sentence {
    margin-left: 80px;
  }
}

.sentence .text {
  opacity: 0;
  -webkit-transition: opacity 2s ease-in;
  -moz-transition: opacity 2s ease-in;
  -ms-transition: opacity 2s ease-in;
  -o-transition: opacity 2s ease-in;
  transition: opacity 2s ease-in;
  margin-left: 10px;
}

.sentence .text .emoji {
  margin-left: 10px;
}

.text.visible {
  opacity: 1;
}