:root {
  --red_accent: rgb(70, 0, 0);
}
*::selection {
  background: #000;
}

body {
  padding-top: 2vh;
  padding-bottom: 2vh;
  background: linear-gradient(90deg, var(--red_accent), black, var(--red_accent));
}

.bg-box {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.bg {
  background: color-mix(in oklab, gray 30%, transparent);
  width: 400px;
  border-radius: 25px;
  padding: 10px;
  gap: 12.5px;
  display: flex;
  flex-direction: column;
}

.card {
  margin: 10px;
  background: #000;
  height: 15vh;
  border-radius: 25px;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-top: 10px;
  text-decoration: none;
  img {
    flex: 1;
    height: 100px;
  }
  h1, h6 {
    margin-top: -10px;
    flex: 1;
    text-align: center;
    color: white;
}
}

.twitch-card, .insta-card, .dc-card {
  img {
    height: 200px;
    transform: scale(50%);
  }
}


/* .card {
  position: sticky;
  top: 10%;
  left: 45%;
  background: yellow;
  height: 300px;
  width: 200px;
  padding: auto;
  color: red;
  text-align: center;
  border-radius: 25px;
  &::after {
    content: "";
    position: absolute;
    background: conic-gradient(from 90deg, red, blue, green, red);
    z-index: -1;
    inset: -.5rem;
    border-radius: inherit;
    filter: blur(-.5rem);
  }
  &::before {
    content: "";
    position: absolute;
    background: yellow;
    inset: -1rem;
    z-index: -1;
    border-radius: inherit;
  }
} */