@font-face {
  font-family: "chromateregular";
  src: url("/css/fonts/chromate-regular-webfont.woff2") format("woff2"),
    url("/css/fonts/chromate-regular-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

/* General Styles*/
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  color: #fff;
  background: linear-gradient(
    135deg,
    #9d2933 0%,
    #003171,
    #f3c13a,
    #ffddca,
    #fff 100%
  );
  background: -webkit-linear-gradient(
    to right,
    #9d2933 0%,
    #003171,
    #f3c13a,
    #ffddca,
    #fff 100%
  );
  background: -moz-linear-gradient(
    135deg,
    #9d2933 0%,
    #003171,
    #f3c13a,
    #ffddca,
    #fff 100%
  );
  background-size: 200%;
  -webkit-animation: cascade 5s ease-in-out infinite;
  -moz-animation: cascade 5s ease-in-out infinite;
  animation: cascade 5s ease-in-out infinite;
}

/* Content Styles */
.container {
  background-image: url(/img/background.jpg);
  background-size: cover;
  height: 100vh;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.85;
  filter: brightness(0.8);
}

.heading__primary {
  text-transform: uppercase;
  font-family: "chromateregular", cursive;
  letter-spacing: 1rem;
  font-size: 5rem;
  padding-top: 7.5rem;
  text-align: center;
  margin: 0;
  opacity: 0.5;
  color: #9d2933;
}

/* Animation */
@-webkit-keyframes cascade {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@-moz-keyframes cascade {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@keyframes cascade {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Responsive Styles */
@media (max-width: 1200px) {
  html {
    font-size: 16px;
  }

  .container {
    min-height: 100vh;
    height: 100%;
  }
}

@media (max-width: 900px) {
  html {
    font-size: 14px;
  }
}

@media (max-width: 767px) {
  html {
    font-size: 12px;
  }
}

@media (max-width: 500px) {
  html {
    font-size: 10px;
  }
}

@media (max-width: 450px) {
  html {
    font-size: 7.5px;
  }
}

@media (max-width: 400px) {
  html {
    font-size: 6.5px;
  }
}

@media (max-width: 350px) {
  html {
    font-size: 5.5px;
  }
}