@import url('fonts.css');

body {
    font-family: 'Jersey 10', 'fusion-pixel', sans-serif;
}

.name-box .avatar {
  border: 2px solid;
}

@media (prefers-color-scheme: light) {
  body {
    color: #ccffa5;
  }

  .container {
    background-image: linear-gradient(0, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url('images/background_light.png');
    background-size: cover;
  }

  .content-box {
    background: rgba(151, 113, 47, 0.52);
    backdrop-filter: blur(24px);
  }

  .icon-button:hover {
    background-color: rgba(224, 224, 224, 0.25);
  }
}

@media (prefers-color-scheme: dark) {
  .container {
    background-image: linear-gradient(0, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url('images/background_dark.png');
    background-size: cover;
  }

  .content-box {
    background: rgba(41, 41, 54, 0.52);
    backdrop-filter: blur(24px);
  }
}

.name-box .avatar.mtf:hover {
  background-size: cover;
  background-image: url(images/transflag.svg);
}