* {
  box-sizing: border-box; }

html, body {
  color: #d9ddf2;
  margin: 0;
  padding: 0;
  height: 100%; }

body {
  font-family: 'Varela Round', sans-serif;
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #03a9f4, #3f51b5, #e74c3c);
  background-size: 100% 450%;
  animation: AnimationName 10s infinite; }
  @media all and (min-width: 960px) {
    body {
      font-size: 1.9rem;
      line-height: 2.2rem; } }
  @media all and (max-width: 959px) and (min-width: 600px) {
    body {
      font-size: 1.3rem;
      line-height: 1.5rem; } }
  @media all and (max-width: 599px) and (min-width: 320px) {
    body {
      font-size: 1rem;
      line-height: 1.2rem; } }
@keyframes AnimationName {
  0% {
    background-position: 50% 0%; }
  50% {
    background-position: 51% 100%; }
  100% {
    background-position: 50% 0%; } }
main {
  background-color: rgba(13, 17, 38, 0.1);
  border-radius: 4px;
  width: 90vw;
  max-width: 50rem;
  max-height: 20rem;
  padding: 1rem 1rem 2.2rem 1rem;
  text-align: center; }
  @media all and (min-width: 960px) {
    main {
      border-width: 5px; } }

/*# sourceMappingURL=main.css.map */