:root{
    --black: #211919;
    --grey: #3c3c3c;
    --white: #fff;
    --blue: #37b5fe;
    --purple: #a700ff;
}

html{
    height: 100%;
}
body{ 
    font-family: "Roboto", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    margin: 0;
    background: linear-gradient(90deg, var(--black) 50%, var(--blue));
    width: 100%;
    height: 100vh;  
    background-size: 300% 300%;
    background-image: linear-gradient(-45deg, var(--purple) 10%, var(--blue) 15%, var(--black) 30%);
    -webkit-animation: AnimateBG 20s ease infinite;
    animation: AnimateBG 20s ease infinite;
}
@media (max-width: 991px) {
  body{
    background-image: linear-gradient(209deg, var(--purple) 20%, var(--blue) 31%, var(--black) 46%);
  }
}
  
@-webkit-keyframes AnimateBG {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes AnimateBG {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

h2{
    font-size: 2.5rem;
    margin-bottom: 2rem;
}
h3{
    font-size: 2rem;
}