::selection {
  background: rgba(58, 58, 58, .4)
}

::-moz-selection {
  background: rgba(58, 58, 58, .4)
}

html {
  height: 100%;
  background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
  overflow: hidden;
}

@font-face {
  font-family: 'Olympic Branding';
  src: url('https://fireworks.wtf/fonts/Olympic_Branding.ttf') format('truetype'),
    url('https://fireworks.wtf/fonts/Olympic_Branding.otf') format('opentype'),
    url('https://fireworks.wtf/fonts/Olympic_Branding.woff') format('woff'),
    url('https://fireworks.wtf/fonts/Olympic_Branding.woff2') format('woff2');
}

#title {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  color: #FFF;
  text-align: center;
  font-family: 'Olympic Branding' !important;
  font-weight: 300;
  font-size: 200px;
  margin-top: -130px;
  padding-left: 10px;
  background: -webkit-linear-gradient(white, #38495a);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;    user-select: none;
}

#links {
  position: absolute;
  top: 70%;
  left: 0;
  right: 0;
  color: #FFF;
  text-align: center;
  margin-top: -130px;
  padding-left: 10px;
}


.social-icons {
  display: flex;
  justify-content: center;
  align-items: center;
}

.social-icons a {
  margin: 0 10px;
  background: -webkit-linear-gradient(white, #38495a);
  -webkit-background-clip: text;
  color: transparent;
  font-size: 35px;
  transition: color 0.3s ease;
}

@media screen and (max-width: 768px) {
  #title {
    font-size: 160px;
    /* Adjust the font size for smaller screens */
  }

  .social-icons a {
    font-size: 30px;
    /* Adjust the font size for smaller screens */
  }
}

canvas {
	display: block;
}