.centre {
  text-align: center;
  justify-content: center;
}

.background {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  
  background-image: url("../media/bg.png");
  background-size: cover;

  z-index: -100;
  pointer-events: none;
}

hr {
  border-style:solid;
  border-color: #131318;
  color:#131318;
}

.grain {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  
  background-image: url("../media/grain.png");
  z-index: 100;
  pointer-events: none;
}

h1 {
  font-family: 'SPACE-GROTESK';
  font-weight: 100;
  font-size: 3.5rem;

  margin: 0;
  line-height: 0;
}

h2 {
  font-family: 'SPACE-GROTESK';
  font-weight: 600;
  font-size: 1.25rem;

  margin: 0;
}

h3 {
  font-family: 'SPACE-GROTESK';
  font-weight: 600;
  font-size: 1.25rem;

  margin: 0;
  margin-bottom: .5rem;
}

p {
  line-height: 1.5rem;
  font-weight: 500;
  text-justify: inter-character;

  margin: 0;
}

a {
  text-decoration: none;
  text-decoration-line: none;
  color: inherit;
}

.half {
  max-width: 62rem;
  width: 100%;
  min-width: 443px;
  corner-shape: squircle;

  box-shadow: 0 0 1rem #00000030;
  border-radius: 2rem;

  display: flex;
  flex-direction: column;

  .avatar {
    pointer-events: none;
    max-height: 40px;
    border-radius: .5rem;
    margin-right: .5rem;

    corner-shape: squircle;
  }
}

.sect {
  display: flex;
  flex-direction: row;
  padding: .8rem;
  background-color: var(--surface3);  
  border-left: 1px var(--border0) solid;
  border-right: 1px var(--border0) solid;

  &.ud {
    padding: .5rem .8rem;
    background-color: var(--surface2);
    border-top: 0px var(--border0) solid;
    border-bottom: 1px var(--border0) solid;
  }

  &.dr {
    flex-direction: column;
  }
}

.head {
  display: flex;
  flex-direction: row;
  padding: .3rem .8rem;
  font-size: smaller;
  background: linear-gradient(to bottom, var(--surface0), var(--surface1)) padding-box;
  border-radius: 8rem 8rem 0rem 0rem;
  corner-shape: squircle;
  border: 1px var(--border0) solid;

  &.bd {
    border-radius: 0rem 0rem 8rem 8rem;
    background: linear-gradient(to bottom, var(--surface1), var(--surface0)) padding-box;
  }
}

.buttons {
  display: flex;
  align-items: center;
  gap: .5rem;

  .button {
    align-items: center;
    padding: .5rem 1rem;
    display: flex;

    max-height: 40px;

    border-radius: 1rem;
    corner-shape: squircle;
    background: linear-gradient(to bottom, var(--surface1), var(--surface4), var(--surface2)) padding-box; 
    border: 1px var(--surface1) solid;

    color: var(--textColour);

    img {
      pointer-events: none;
      width: 1.5rem;
      height: 1.5rem;
      margin: auto;
    }

    &:hover {
      background: linear-gradient(to bottom, #3f3f3f, #171717, #2e2e2e) padding-box;
    }

    &.active {
      background: linear-gradient(to bottom, #3f3f3f, #171717, #2e2e2e) padding-box;
    }

    &.round {
      cursor: pointer;

      border-radius: 5rem;
      corner-shape: unset;
  
      height: 1rem;
      width: 1rem;
      
      padding: 0;
    }
  
    &.gc {
      background: radial-gradient(circle,#199700 0%, #1dac00 50%, #ffffff 100%) padding-box;  
    }
  
    &.oc {
      background: radial-gradient(circle,#ad8100 0%, #c99700 50%, #ffffff 100%) padding-box;  
    }
  
    &.rc {
      background: radial-gradient(circle,#a20000 0%, #cf0000 50%, #ffffff 100%) padding-box;  
    }
  }

  &.right {
    margin-left: auto;
    margin-right: 0;
  }
}

.features {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  flex-direction: column;

  margin: 10rem auto;
  max-width: 60rem;
}

.fading {
  opacity: 0;
  animation-name: fadein;
  animation-duration: 1000ms;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

.popout {
  padding: 1rem;
}

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

  10% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.artists {
  display: flex;
  gap: 1rem;
}

.artistbox {
  display: flex;
  flex-direction: column;
  max-width: 10rem;
  font-size: 1rem;

  img {
    pointer-events: none;
    border-radius: 1rem;
    corner-shape: squircle;
    margin-bottom: .5rem;
  }

  p {
    user-select: text;
    cursor: text;
  }
}