@font-face {
  font-family: Lato;
  font-style: normal;
  font-weight: 400;
  src: url("https://mdn.github.io/web-fonts/LatoReg.ttf");
}

@font-face {
  font-family: 'Abel';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url(https://fonts.gstatic.com/s/abel/v18/MwQ5bhbm2POE2V9BOw.woff) format('woff');
}

@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 200;
  src: local('Source Sans Pro ExtraLight'), local('SourceSansPro-ExtraLight'), url(http://fonts.gstatic.com/s/sourcesanspro/v9/toadOcfmlt9b38dHJxOBGEMbjGELOEJD5J8DUmxkO-A.ttf) format('truetype');
}

@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 300;
  src: local('Source Sans Pro Light'), local('SourceSansPro-Light'), url(http://fonts.gstatic.com/s/sourcesanspro/v9/toadOcfmlt9b38dHJxOBGMw1o1eFRj7wYC6JbISqOjY.ttf) format('truetype');
}

@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 400;
  src: local('Source Sans Pro'), local('SourceSansPro-Regular'), url(http://fonts.gstatic.com/s/sourcesanspro/v9/ODelI1aHBYDBqgeIAH2zlNzbP97U9sKh0jjxbPbfOKg.ttf) format('truetype');
}

@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 600;
  src: local('Source Sans Pro Semibold'), local('SourceSansPro-Semibold'), url(http://fonts.gstatic.com/s/sourcesanspro/v9/toadOcfmlt9b38dHJxOBGNNE-IuDiR70wI4zXaKqWCM.ttf) format('truetype');
}

@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 700;
  src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(http://fonts.gstatic.com/s/sourcesanspro/v9/toadOcfmlt9b38dHJxOBGLsbIrGiHa6JIepkyt5c0A0.ttf) format('truetype');
}

@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 900;
  src: local('Source Sans Pro Black'), local('SourceSansPro-Black'), url(http://fonts.gstatic.com/s/sourcesanspro/v9/toadOcfmlt9b38dHJxOBGBPPOa1q11iOmmM9mDHHHX4.ttf) format('truetype');
}

@font-face {
  font-family: 'Source Sans Pro';
  font-style: italic;
  font-weight: 200;
  src: local('Source Sans Pro ExtraLight Italic'), local('SourceSansPro-ExtraLightIt'), url(http://fonts.gstatic.com/s/sourcesanspro/v9/fpTVHK8qsXbIeTHTrnQH6BzYcsdbdSWRnnT3pSZS3xU.ttf) format('truetype');
}

@font-face {
  font-family: 'Source Sans Pro';
  font-style: italic;
  font-weight: 300;
  src: local('Source Sans Pro Light Italic'), local('SourceSansPro-LightIt'), url(http://fonts.gstatic.com/s/sourcesanspro/v9/fpTVHK8qsXbIeTHTrnQH6Iue0YgdIF4L_q7PS4yTQOQ.ttf) format('truetype');
}

@font-face {
  font-family: 'Source Sans Pro';
  font-style: italic;
  font-weight: 400;
  src: local('Source Sans Pro Italic'), local('SourceSansPro-It'), url(http://fonts.gstatic.com/s/sourcesanspro/v9/M2Jd71oPJhLKp0zdtTvoM0DauxaEVho0aInXGvhmB4k.ttf) format('truetype');
}

@font-face {
  font-family: 'Source Sans Pro';
  font-style: italic;
  font-weight: 600;
  src: local('Source Sans Pro Semibold Italic'), local('SourceSansPro-SemiboldIt'), url(http://fonts.gstatic.com/s/sourcesanspro/v9/fpTVHK8qsXbIeTHTrnQH6EfrksRSinjQUrHtm_nW72g.ttf) format('truetype');
}

@font-face {
  font-family: 'Source Sans Pro';
  font-style: italic;
  font-weight: 700;
  src: local('Source Sans Pro Bold Italic'), local('SourceSansPro-BoldIt'), url(http://fonts.gstatic.com/s/sourcesanspro/v9/fpTVHK8qsXbIeTHTrnQH6Edtd7Dq2ZflsctMEexj2lw.ttf) format('truetype');
}

@font-face {
  font-family: 'Source Sans Pro';
  font-style: italic;
  font-weight: 900;
  src: local('Source Sans Pro Black Italic'), local('SourceSansPro-BlackIt'), url(http://fonts.gstatic.com/s/sourcesanspro/v9/fpTVHK8qsXbIeTHTrnQH6DiS5Fc5Bg1xsygf01vWWOU.ttf) format('truetype');
}


@keyframes acronymExplainerSlide {
  0% {
    transform: translateX(70px);
  }

  50% {
    transform: translateX(250px);
  }

  100% {
    transform: translateX(70px);
  }
}

@keyframes SDIQLetterSpacing {
  0% {
    letter-spacing: -20px;
    padding-right: -20px;
  }

  50% {
    letter-spacing: -40px;
    padding-right: -40px;
  }

  100% {
    letter-spacing: -20px;
    padding-right: -20px;
  }
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Source Sans Pro', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  margin: 0 auto;
  text-align: center;
  background-color: #b6a3f8;
  background: linear-gradient(45deg, #b6a3f8, #a665c0);
  height: 100vh;
  width: 100vw;
}

section#main {
  margin: 0 auto;
  position: relative;
  max-width: max-content;
}

/* CSS styles for the large letters */
#sdiq_letters {
  font-family: system-ui;
  animation: SDIQLetterSpacing 24s infinite ease-in-out;
  font-size: 20em;
  font-weight: 900;
  letter-spacing: -40px;
  position: relative;
  display: inline-block;
  background-clip: text;
  color: transparent;
  background-image: linear-gradient(to right, #a7a7a7, #81d0ff);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  mix-blend-mode: lighten;
  padding-right: 40px;
  -webkit-text-stroke: 2px white;
}

#sdiq_letters span[data-letter].swell {
  transition: transform 1s ease;
}

#sdiq_letters span[data-letter].swell {
  transform: scale(1.5);
}

#sdiq_subtitle,
.inner-text {
  display: block;
  font-weight: 700;
}

#sdiq_subtitle {
  font-size: 2.4em;
  margin-top: -1.4em;
  color: #3e2c82;
}

.inner-text {
  animation: acronymExplainerSlide 12s infinite linear;
  color: #828282;
  font-size: 20px;
  left: 1em;
  margin: 0px auto;
  mix-blend-mode: color-burn;
  position: absolute;
  top: 4em;
  width: auto;
  z-index: 1;
  padding: 2em;
}

.inner-text:nth-child(2) {
  animation: acronymExplainerSlide 14s infinite linear;
  animation-direction: reverse;
  top: 6em;
  left: 2.2em;
  text-align: end;
}

.inner-text:nth-child(3) {
  animation: acronymExplainerSlide 15.5s infinite linear;
  top: 8em;
  left: -3.8em;
}

.inner-text:nth-child(4) {
  animation: acronymExplainerSlide 12.25s infinite linear;
  animation-direction: reverse;
  top: 10em;
  left: 3em;
  text-align: end;
}