@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@500&display=swap');

body{
  font-family: 'Comfortaa', cursive;
}

.container{
  width: 95%;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.hex-colors{
  width: 100%;
  text-align: center;
}

.hex-colors h1{
  text-transform: uppercase;
  font-size: 2rem;
  animation: colorchange 5s infinite alternate; 
}

.hex-colors h2{
  margin-top: 15%;
  font-size: 2rem;
}

@keyframes colorchange {
      0% {
        color: indigo;
      }
      
      20% {
        color: blue;
      }
      
      40% {
        color: green;
      }
      
      60% {
        color: yellow;
      }
      
      80% {
        color: orange;
      }
      
      100% {
        color: red;
      }
      
}

@media(max-width:480px){
  .hex-colors h1{
    font-size: 1.5rem;
  }
  .hex-colors h2{
    font-size: 1.5rem;
  }
}