@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,300;0,400;1,300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@900&display=swap');

@font-face {
    font-family: 'object-black-webfont';
    src: url('object-black') format('embedded-opentype'),
         url('object-black-webfont.woff2') format('woff2'),
         url('object-black-webfont.woff') format('woff');
    font-weight: bold;
    font-style: sans-serif;
}

.title {
    font-family: 'object-black-webfont';
    font-size: 85px;
    color: #FFF;
}

.button {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 22px;
    color: #FFF;
}

.loading-container {
    width: 100%;
    height: 100vh;
    background-image: url("BLIZ_HeroImage_c.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: column;
}
.loading-heading {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: calc(10px + (26 - 16) * ((100vw - 300px) / (1600 - 300)));
    color: #FFF;
    font-style: italic;
    font-weight: 300;
}
.loading-recommendation {
      position: absolute;
      bottom: 2em;
      font-family: 'Roboto Condensed', sans-serif; 
      font-size: calc(8px + (26 - 16) * ((100vw - 300px) / (1600 - 300)));
      color: #FFF;
      font-weight: lighter;
      font-style: normal;
} 
.loading-logo {
  width: 40vw;
  max-width: 600px;
  margin-bottom: 3em;
  color: #FFF;
}
.loading-svg {
    width: 3em;
    margin-bottom: 1.5em;
    animation: rotation 1s infinite linear;
    color: #FFF;
}
@keyframes rotation {
    from {
      transform: rotateZ(0deg);
    }
    to {
      transform: rotateZ(359deg);
    }
}