* {
  margin: 0;
  padding: 0;
}

@font-face {
  font-family: "Avenir";
  font-weight: 200, 400, 600, 700;
  src: url("/assets/fonts/AvenirNextLTPro-Regular.woff") format("woff"),
      url("/assets/fonts/AvenirNextLTPro-Bold.woff") format("woff"),
      url("/assets/fonts/AvenirNextLTPro-BoldCn.woff") format("woff"),
    url("/assets/fonts/AvenirNextLTPro-Demi.woff") format("woff"),
    url("/assets/fonts/AvenirNextLTPro-DemiCn.woff") format("woff"),
    url("/assets/fonts/AvenirNextLTPro-It.woff") format("woff");
}
@font-face {
  font-family: "COCOMAT Light";
  font-style: normal;
  font-weight: normal;
  src: url("/assets/fonts/Cocomat_Light-trial.woff") format("woff");
}

/*scroolbar*/
::-webkit-scrollbar {
  width: 5px;
  background: black;
}

::-webkit-scrollbar-thumb {
  background: #494949;
  border-radius: 20px;
}

::-webkit-scrollbar-thumb:hover {
  background: #7d7d7d;
}

/* glitched button */

.discord-button {
  --primary: hsl(360, 0%, 100%, 1);
  --shadow-primary: hsl(77, 95%, 55%);
  --primary-hue: 0;
  --primary-lightness: 50;
  --color: black;
  --font-size: 26px;
  --shadow-primary-hue: 180;
  --label-size: 9px;
  --shadow-secondary-hue: 60;
  --shadow-secondary: hsl(var(--shadow-secondary-hue), 90%, 60%);
  --clip: polygon(
    0 0,
    100% 0,
    100% 100%,
    95% 100%,
    95% 90%,
    100% 90%,
    100% 100%,
    8% 100%,
    0 70%
  );
  --border: 4px;
  --shimmy-distance: 5;
  --clip-one: polygon(
    0 2%,
    100% 2%,
    100% 95%,
    95% 95%,
    95% 90%,
    85% 90%,
    85% 95%,
    8% 95%,
    0 70%
  );
  --clip-two: polygon(
    0 78%,
    100% 78%,
    100% 100%,
    95% 100%,
    95% 90%,
    100% 90%,
    100% 100%,
    8% 100%,
    0 78%
  );
  --clip-three: polygon(
    0 44%,
    100% 44%,
    100% 54%,
    95% 54%,
    95% 54%,
    85% 54%,
    85% 54%,
    8% 54%,
    0 54%
  );
  --clip-four: polygon(
    0 0,
    100% 0,
    100% 0,
    95% 0,
    95% 0,
    85% 0,
    85% 0,
    8% 0,
    0 0
  );
  --clip-five: polygon(
    0 0,
    100% 0,
    100% 0,
    95% 0,
    95% 0,
    85% 0,
    85% 0,
    8% 0,
    0 0
  );
  --clip-six: polygon(
    0 40%,
    100% 40%,
    100% 85%,
    95% 85%,
    95% 85%,
    85% 85%,
    85% 85%,
    8% 85%,
    0 70%
  );
  --clip-seven: polygon(
    0 63%,
    100% 63%,
    100% 80%,
    95% 80%,
    95% 80%,
    85% 80%,
    85% 80%,
    8% 80%,
    0 70%
  );
  color: var(--color);
  cursor: pointer;
  background: transparent;
  text-transform: uppercase;
  font-size: var(--font-size);
  outline: transparent;
  letter-spacing: 2px;
  position: relative;
  border: 0;

  transition: background 0.2s;
  padding: 10px 30px;
  font-family: "Avenir";
  font-weight: 200;
  /*border: 1px solid white;*/
  border-radius: 10px;
  text-decoration: none;
  z-index: 9999;
}

.discord-button:hover {
  --primary: hsla(358, 0%, 95%, 1);
  color: black;
}
.discord-button:active {
  --primary: hsl(249, 100%, 100%, 1);
}

.discord-button:after,
.discord-button:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  clip-path: var(--clip);
  z-index: -1;
}

.discord-button:before {
  background: var(--shadow-primary);
  transform: translate(var(--border), 0);
}

.discord-button:after {
  background: var(--primary);
}

.discord-button__glitch {
  position: absolute;
  top: calc(var(--border) * -1);
  left: calc(var(--border) * -1);
  right: calc(var(--border) * -1);
  bottom: calc(var(--border) * -1);
  background: var(--shadow-primary);
  text-shadow: 2px 2px var(--shadow-primary), -2px -2px var(--shadow-secondary);
  clip-path: var(--clip);
  animation: glitch 2s infinite;
  display: none;
}

.discord-button:hover .discord-button__glitch {
  display: block;
}

.discord-button__glitch:before {
  content: "";
  position: absolute;
  top: calc(var(--border) * 1);
  right: calc(var(--border) * 1);
  bottom: calc(var(--border) * 1);
  left: calc(var(--border) * 1);
  clip-path: var(--clip);
  background: var(--primary);
  z-index: -1;
}

@keyframes glitch {
  0% {
    clip-path: var(--clip-one);
  }
  2%,
  8% {
    clip-path: var(--clip-two);
    transform: translate(calc(var(--shimmy-distance) * -1%), 0);
  }
  6% {
    clip-path: var(--clip-two);
    transform: translate(calc(var(--shimmy-distance) * 1%), 0);
  }
  9% {
    clip-path: var(--clip-two);
    transform: translate(0, 0);
  }
  10% {
    clip-path: var(--clip-three);
    transform: translate(calc(var(--shimmy-distance) * 1%), 0);
  }
  13% {
    clip-path: var(--clip-three);
    transform: translate(0, 0);
  }
  14%,
  21% {
    clip-path: var(--clip-four);
    transform: translate(calc(var(--shimmy-distance) * 1%), 0);
  }
  25% {
    clip-path: var(--clip-five);
    transform: translate(calc(var(--shimmy-distance) * 1%), 0);
  }
  30% {
    clip-path: var(--clip-five);
    transform: translate(calc(var(--shimmy-distance) * -1%), 0);
  }
  35%,
  45% {
    clip-path: var(--clip-six);
    transform: translate(calc(var(--shimmy-distance) * -1%));
  }
  40% {
    clip-path: var(--clip-six);
    transform: translate(calc(var(--shimmy-distance) * 1%));
  }
  50% {
    clip-path: var(--clip-six);
    transform: translate(0, 0);
  }
  55% {
    clip-path: var(--clip-seven);
    transform: translate(calc(var(--shimmy-distance) * 1%), 0);
  }
  60% {
    clip-path: var(--clip-seven);
    transform: translate(0, 0);
  }
  31%,
  61%,
  100% {
    clip-path: var(--clip-four);
  }
}

.discord-button:nth-of-type(2) {
  --primary-hue: 260;
}

/*brightness animation*/
@keyframes brightness-down {
  0% {
    filter: brightness(1);
    -webkit-filter: brightness(1);
  }
  50% {
    filter: brightness(0.8);
    -webkit-filter: brightness(0.8);
  }
  100% {
    filter: brightness(0.7);
    -webkit-filter: brightness(0.7);
  }
}
@keyframes brightness-up {
  0% {
    filter: brightness(0.7);
    -webkit-filter: brightness(0.7);
  }
  50% {
    filter: brightness(0.8);
    -webkit-filter: brightness(0.8);
  }
  100% {
    filter: brightness(1);
    -webkit-filter: brightness(1);
  }
}

/* text glitch */ 

.layers {
  position: relative;
}


.layers::before,
.layers::after {
  content: attr(data-text);
  position: absolute;
  width: 120%;
  z-index: -1;
}

.layers::before {
  top: 10px;
  left: 15px;
  color: #BBF91F;
}

.layers::after {
  top: 5px;
  left: -10px;
  color: #f91fbb;
}

.single-path {
  clip-path: polygon(
    0% 12%,
    53% 12%,
    53% 26%,
    25% 26%,
    25% 86%,
    31% 86%,
    31% 0%,
    53% 0%,
    53% 84%,
    92% 84%,
    92% 82%,
    70% 82%,
    70% 29%,
    78% 29%,
    78% 65%,
    69% 65%,
    69% 66%,
    77% 66%,
    77% 45%,
    85% 45%,
    85% 26%,
    97% 26%,
    97% 28%,
    84% 28%,
    84% 34%,
    54% 34%,
    54% 89%,
    30% 89%,
    30% 58%,
    83% 58%,
    83% 5%,
    68% 5%,
    68% 36%,
    62% 36%,
    62% 1%,
    12% 1%,
    12% 34%,
    60% 34%,
    60% 57%,
    98% 57%,
    98% 83%,
    1% 83%,
    1% 53%,
    91% 53%,
    91% 84%,
    8% 84%,
    8% 83%,
    4% 83%
  );
}

.paths {
  animation: paths 5s step-end infinite;
}

@keyframes paths {
  0% {
    clip-path: polygon(
      0% 43%,
      83% 43%,
      83% 22%,
      23% 22%,
      23% 24%,
      91% 24%,
      91% 26%,
      18% 26%,
      18% 83%,
      29% 83%,
      29% 17%,
      41% 17%,
      41% 39%,
      18% 39%,
      18% 82%,
      54% 82%,
      54% 88%,
      19% 88%,
      19% 4%,
      39% 4%,
      39% 14%,
      76% 14%,
      76% 52%,
      23% 52%,
      23% 35%,
      19% 35%,
      19% 8%,
      36% 8%,
      36% 31%,
      73% 31%,
      73% 16%,
      1% 16%,
      1% 56%,
      50% 56%,
      50% 8%
    );
  }

  5% {
    clip-path: polygon(
      0% 29%,
      44% 29%,
      44% 83%,
      94% 83%,
      94% 56%,
      11% 56%,
      11% 64%,
      94% 64%,
      94% 70%,
      88% 70%,
      88% 32%,
      18% 32%,
      18% 96%,
      10% 96%,
      10% 62%,
      9% 62%,
      9% 84%,
      68% 84%,
      68% 50%,
      52% 50%,
      52% 55%,
      35% 55%,
      35% 87%,
      25% 87%,
      25% 39%,
      15% 39%,
      15% 88%,
      52% 88%
    );
  }

  30% {
    clip-path: polygon(
      0% 53%,
      93% 53%,
      93% 62%,
      68% 62%,
      68% 37%,
      97% 37%,
      97% 89%,
      13% 89%,
      13% 45%,
      51% 45%,
      51% 88%,
      17% 88%,
      17% 54%,
      81% 54%,
      81% 75%,
      79% 75%,
      79% 76%,
      38% 76%,
      38% 28%,
      61% 28%,
      61% 12%,
      55% 12%,
      55% 62%,
      68% 62%,
      68% 51%,
      0% 51%,
      0% 92%,
      63% 92%,
      63% 4%,
      65% 4%
    );
  }

  45% {
    clip-path: polygon(
      0% 33%,
      2% 33%,
      2% 69%,
      58% 69%,
      58% 94%,
      55% 94%,
      55% 25%,
      33% 25%,
      33% 85%,
      16% 85%,
      16% 19%,
      5% 19%,
      5% 20%,
      79% 20%,
      79% 96%,
      93% 96%,
      93% 50%,
      5% 50%,
      5% 74%,
      55% 74%,
      55% 57%,
      96% 57%,
      96% 59%,
      87% 59%,
      87% 65%,
      82% 65%,
      82% 39%,
      63% 39%,
      63% 92%,
      4% 92%,
      4% 36%,
      24% 36%,
      24% 70%,
      1% 70%,
      1% 43%,
      15% 43%,
      15% 28%,
      23% 28%,
      23% 71%,
      90% 71%,
      90% 86%,
      97% 86%,
      97% 1%,
      60% 1%,
      60% 67%,
      71% 67%,
      71% 91%,
      17% 91%,
      17% 14%,
      39% 14%,
      39% 30%,
      58% 30%,
      58% 11%,
      52% 11%,
      52% 83%,
      68% 83%
    );
  }

  76% {
    clip-path: polygon(
      0% 26%,
      15% 26%,
      15% 73%,
      72% 73%,
      72% 70%,
      77% 70%,
      77% 75%,
      8% 75%,
      8% 42%,
      4% 42%,
      4% 61%,
      17% 61%,
      17% 12%,
      26% 12%,
      26% 63%,
      73% 63%,
      73% 43%,
      90% 43%,
      90% 67%,
      50% 67%,
      50% 41%,
      42% 41%,
      42% 46%,
      50% 46%,
      50% 84%,
      96% 84%,
      96% 78%,
      49% 78%,
      49% 25%,
      63% 25%,
      63% 14%
    );
  }

  90% {
    clip-path: polygon(
      0% 41%,
      13% 41%,
      13% 6%,
      87% 6%,
      87% 93%,
      10% 93%,
      10% 13%,
      89% 13%,
      89% 6%,
      3% 6%,
      3% 8%,
      16% 8%,
      16% 79%,
      0% 79%,
      0% 99%,
      92% 99%,
      92% 90%,
      5% 90%,
      5% 60%,
      0% 60%,
      0% 48%,
      89% 48%,
      89% 13%,
      80% 13%,
      80% 43%,
      95% 43%,
      95% 19%,
      80% 19%,
      80% 85%,
      38% 85%,
      38% 62%
    );
  }

  1%,
  7%,
  33%,
  47%,
  78%,
  93% {
    clip-path: none;
  }
}

.movement {
  position: absolute;
  animation: movement 8s step-end infinite;
}

@keyframes movement {
  0% {
    top: 0px;
    left: -20px;
  }

  15% {
    top: 10px;
    left: 10px;
  }

  60% {
    top: 5px;
    left: -10px;
  }

  75% {
    top: -5px;
    left: 20px;
  }

  100% {
    top: 10px;
    left: 5px;
  }
}

.opacity {
  animation: opacity 5s step-end infinite;
}

@keyframes opacity {
  0% {
    opacity: 0.1;
  }

  5% {
    opacity: 0.7;
  }

  30% {
    opacity: 0.4;
  }

  45% {
    opacity: 0.6;
  }

  76% {
    opacity: 0.4;
  }

  90% {
    opacity: 0.8;
  }

  1%,
  7%,
  33%,
  47%,
  78%,
  93% {
    opacity: 0;
  }
}

.font {
  animation: font 7s step-end infinite;
}

@keyframes font {
  0% {
    font-weight: 100;
    color: #f91fbb;
    filter: blur(3px);
  }

  20% {
    font-weight: 500;
    color: #fff;
    filter: blur(0);
  }

  50% {
    font-weight: 300;
    color: #bbf91f;
    filter: blur(2px);
  }

  60% {
    font-weight: 700;
    color: #fff;
    filter: blur(0);
  }

  90% {
    font-weight: 500;
    color: #bbf91f;
    filter: blur(6px);
  }
}

.glitch span {
  animation: paths 5s step-end infinite;
}

.glitch::before {
  animation: paths 5s step-end infinite, opacity 5s step-end infinite,
    font 8s step-end infinite, movement 10s step-end infinite;
}

.glitch::after {
  animation: paths 5s step-end infinite, opacity 5s step-end infinite,
    font 7s step-end infinite, movement 8s step-end infinite;
}

a {
  text-decoration: none;
}

h1 {
  color: white;
  font-family: "Avenir";
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.25em;
}

h2 {
  color: white;
  font-family: "COCOMAT Light";
  text-transform: uppercase;
  font-weight: normal;
  letter-spacing: 0.1em;
}

h3 {
  color: white;
  font-family: "Avenir";
  text-transform: uppercase;
  font-weight: normal;
  letter-spacing: 0.355em;
  line-height: 236%;
}

p {
  font-family: "Avenir";
  text-transform: uppercase;
  font-weight: 400;
  letter-spacing: 0.355em;
  line-height: 236%;
  color: white;
}

.image {
  position: absolute;
  top: 0;
  left: 0;
  object-fit: cover;
  object-position: 50% 50%;
  width: 100%;
  height: 100vh;
}

.video-container {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  z-index: -100;
  width: 100%;
}

.content-container {
  text-align: center;
}

.section {
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.section-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.social-container {
  display: flex;
  column-gap: 30px;
  z-index: 9999;
  align-items: center;
  justify-self: center;
}

.social-container-mobile {
  display: flex;
  column-gap: 30px;
  z-index: 9999;
  justify-content: center;
}

.policy {
  display: flex;
  flex-direction: column;
  row-gap: 10px;
}

.policy-mobile {
  display: flex;
  justify-content: space-between;
}

.footer {
  display: flex;
  justify-content: space-between;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 30px;
  max-width: 72.5rem;
  padding-left: 20px;
  padding-right: 20px;
  align-items: center;
  opacity: 0;
}

.footer-mobile {
  display: flex;
  flex-direction: column;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 5px;
  max-width: 72.5rem;
  padding-left: 20px;
  padding-right: 20px;
  row-gap: 10px;
  opacity: 0;
}

.header {
  display: flex;
  max-width: 72.5rem;
  justify-content: space-between;
  margin-top: 55px;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  position: absolute;
  padding-left: 20px;
  padding-right: 20px;
  align-items: center;
  opacity: 0;
  z-index: 99999;
}
#counter {
  padding-top: 10px;
}

#progress-bar {
  display: flex;
  flex-direction: column-reverse;
}

#logo {
  display: none;
}

#header-logo {
  opacity: 0;
  cursor: pointer;
  z-index: 9999;
}

#counter{
  color:#B6F719 ;
}

#counter-title, #counter-text{
  color:white ;
}

#canvas {
  position: absolute;
}

.footer-icon:hover > path{
  fill: #B6F719;
}

.footer-text-link:hover{
  color:#B6F719 ;
}

.small-text{
  color: #8b8b8b;
}

.main-video{
  /*display: none;*/
  z-index:-90;
}

#mouse-icon {
  display: none;
}



/* SCROLL ANIMATION */


#section10 a {
  padding-top: 80px;
}

#section10 a span {
  position: absolute;
  bottom: 50px;
  left: 50%;
  width: 30px;
  height: 60px;
  margin-left: -15px;
  background-color:#75757575;
  border-radius: 29px;
  box-sizing: border-box;
  z-index: 99999;
}

#section10 a span::before {
  position: absolute;
  top: 10px;
  left:6px;
  content: "";
  width: 23px;
  height: 23px;
  margin-left: -3px;
  background-color: #fff;
  border-radius: 100%;
  -webkit-animation: sdb10 2s infinite;
  animation: sdb10 2s infinite;
  box-sizing: border-box;
}
@-webkit-keyframes sdb10 {
  0% {
    -webkit-transform: translate(0, 20px);
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  80% {
    -webkit-transform: translate(0, 0px);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes sdb10 {
  0% {
    transform: translate(0, 20px);
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  80% {
    transform: translate(0, 0px);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width: 320px) and (max-device-width: 375px) {

  h1 {
    font-size: 34px;
  }
  h2 {
    font-size: 20px;
  }
  h3 {
    font-size: 20px;
  }
  p {
    font-size: 14px;
    line-height: 210%;
  }
  .small-text{
    font-size: 11px;
  }
  .footer-text {
    line-height: 30px;
    letter-spacing: normal;
    font-size: 11px;
  }

  .section {
    padding: 20px;
    
  }

  .mobile{
    padding-top: 23%;
    align-items: flex-start;
  }

  .section-container {
    row-gap: 0.5em;
  }
  .discord-button {
    font-size: 11px;
  }
  .social-container {
    top: 25px;
    right: 20px;
  }
  .header {
    margin-top: 20px;
  }
  #progress-bar {
    width: 90%;
  }
  #section10 a span {
    margin-bottom: 50px;
  }



}


/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width: 376px) and (max-device-width: 480px) {
  h1 {
    font-size: 34px;
  }
  h2 {
    font-size: 20px;
  }
  h3 {
    font-size: 20px;
  }
  p {
    font-size: 14px;
    line-height: 210%;
  }
  .small-text{
    font-size: 11px;
  }
  .footer-text {
    line-height: 30px;
    letter-spacing: normal;
    font-size: 11px;
  }

  .section {
    padding: 20px;
  }
  .mobile{
    padding-top: 27%;
    align-items: flex-start;
  }
  .section-container {
    row-gap: 0.6em;
  }
  .discord-button {
    font-size: 11px;
  }
  .social-container {
    top: 25px;
    right: 20px;
  }
  .header {
    margin-top: 20px;
  }
  #progress-bar {
    width: 90%;
  }
  #section10 a span {
    margin-bottom: 50px;
  }

}
@media only screen and (min-width: 481px) {
  h1 {
    font-size: 38px;
  }
  h2 {
    font-size: 26px;
  }
  h3 {
    font-size: 22px;
  }
  p {
    font-size: 14px;
  }
  .small-text{
    font-size: 11px;
  }
  .footer-text {
    line-height: normal;
    letter-spacing: normal;
    font-size: 12px;
  }

  .section {
    padding: 20px;
  }
  .section-container {
    row-gap: 2em;
  }
  .discord-button {
    font-size: 16px;
  }
  .social-container {
    top: 25px;
    right: 20px;
  }
  #progress-bar {
    width: 80%;
  }
}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
  h1 {
    font-size: 54px;
  }
  h2 {
    font-size: 26px;
  }
  h3 {
    font-size: 26px;
  }
  p {
    font-size: 18px;
  }
  .small-text{
    font-size: 14px;
  }
  .footer-text {
    line-height: normal;
    letter-spacing: normal;
    font-size: 14px;
  }
  .section {
    padding: 20px;
  }
  .section-container {
    row-gap: 2em;
  }

  .discord-button {
    font-size: 18px;
  }
  .social-container {
    top: 25px;
    right: 20px;
  }
  .header {
    margin-top: 30px;
    padding-right: 30px;
    padding-left: 30px;
  }
  .footer {
    padding-right: 30px;
    padding-left: 30px;
  }
   #progress-bar {
    width: 70%;
  }

}

@media only screen and (min-width: 1025px) {
  h1 {
    font-size: 54px;
  }
  h2 {
    font-size: 26px;
  }
  h3 {
    font-size: 26px;
  }
  p {
    font-size: 18px;
  }
  .small-text{
    font-size: 14px;
  }
  .footer-text {
    line-height: normal;
    letter-spacing: normal;
    font-size: 14px;
  }
  .section {
    padding: 20px;
  }
  .section-container {
    row-gap: 2em;
  }

  .discord-button {
    font-size: 20px;
  }
   #progress-bar {
    width: 80%;
  }

}

/* Desktops and laptops ----------- */
@media only screen and (min-width: 1224px) {
  h1 {
    font-size: 54px;
  }
  h2 {
    font-size: 26px;
  }
  h3 {
    font-size: 26px;
  }
  p {
    font-size: 18px;
  }
  .small-text{
    font-size: 14px;
  }
  .footer-text {
    line-height: normal;
    letter-spacing: normal;
    font-size: 12px;
  }
  .section {
    padding: 20px;
  }
  .section-container {
    row-gap: 2em;
  }

  .discord-button {
    font-size: 16px;
  }
  .social-container {
    top: 30px;
    right: 50px;
  }
   #progress-bar {
    width: 70%;
  }

}

/* Large screens ----------- */
@media only screen and (min-width: 1824px) {
  h1 {
    font-size: 64px;
  }
  h2 {
    font-size: 26px;
  }
  h3 {
    font-size: 26px;
  }
  p {
    font-size: 18px;
  }
  .small-text{
    font-size: 14px;
  }
  .footer-text {
    line-height: normal;
    letter-spacing: normal;
    font-size: 12px;
  }
  .section {
    padding: 20px;
  }
  .section-container {
    row-gap: 4em;
  }

  .discord-button {
    font-size: 18px;
  }

  .social-container {
    top: 30px;
    right: 50px;
  }
   #progress-bar {
    width: 70%;
  }

}