@font-face {
  font-family: Metropolis-Bold;
  src: url("../fonts/Metropolis-Bold.otf");
  font-display: swap;
}

@font-face {
  font-family: Metropolis-Regular;
  src: url("../fonts/Metropolis-Regular.otf");
  font-display: swap;
}

body {
  background-color: #f3f2f3;
}

.container-main {
  position: fixed;
  left: 0px;
  top: 0px;
  right: 0px;
  bottom: 0px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0px 50px;
}

.container-main .title {
  font-family: Metropolis-Bold;
  font-size: 64px;
  color: #1f1c20;
  text-align: center;
}

.container-main .subtitle {
  font-family: Metropolis-Regular;
  font-size: 24px;
  margin-top: 20px;
  color: #1f1c20;
}

section.section {
  padding: 80px 0px 0px 0px;
}

.sd-justify {
  text-align: justify;
}

.sd-white-icon {
  color: white;
  font-size: 48px;
}

.sd-blue-icon {
  color: #0088ff;
  font-size: 48px;
}

a.sd-white-link {
  color: white !important;
  font-weight: bold;
}

a.sd-play-link:hover {
  border-bottom: 0px;
}

a.sd-play-link img {
  margin-bottom: 0px;
  margin-left: -13px;
  width: 200px;
}
a.sd-play-link.sd-play-link-large img {
  margin-left: -15px;
  width: 250px;
}
.social-icons-white {
  filter: invert(1);
  display: flex;
  flex-direction: row;
  justify-content: space-between
}

@media only screen and (max-width: 830px) {
  .container-main .title {
    font-family: Metropolis-Bold;
    font-size: 36px;
    color: #1f1c20;
    text-align: center;
    margin-top: 30px;
  }

  .container-main .subtitle {
    font-family: Metropolis-Regular;
    font-size: 18px;
    margin-top: 20px;
    color: #1f1c20;
    text-align: center;
  }
}