@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');

:root {
  --foreground: #fafafa;
  --foreground-subtext: #bbaec2;
  --foreground-separator: #7c4c9c;
  --border: #201724;
  --background: #151017;
  --background-darker: #0e0a0f;
  --primary: #6b0b9e;
  --danger: #e33232;
}

* {
  margin: 0;
  padding: 0;
  font-family: 'Outfit', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

body {
  color: var(--foreground);
  background-color: var(--background-darker);
}

.subtext {
  color: var(--foreground-subtext);
}

section.profile {
  display: flex;
  position: relative;
  border-radius: 24px;
  gap: 12px;
  align-items: center;
  padding: 12px;
}

section.profile .contact {
  color: var(--foreground-subtext);
  font-size: .85rem;
}

section.profile::before {
  position: absolute;
  top: -200px;
  left: 60px;
  transform: translateX(-50%);
  content: '';
  width: 400px;
  height: 400px;
  filter: blur(90px);
  background-color: var(--primary);
  border-radius: 50%;
  z-index: -1;
  opacity: .3;
}

section.profile img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 2px solid var(--primary);
}

section.profile .username {
  font-weight: bold;
  font-size: 1.5rem;
}

section.links {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 24px;
}

div.separator {
  display: flex;
  color: var(--foreground-separator);
  gap: 12px;
  align-items: center;
  margin: 12px 0;
  letter-spacing: 3px;
  font-weight: bold;
}

div.separator hr {
  border: none;
  height: 3px;
  background-color: var(--foreground-separator);
  flex: 1;
  opacity: .2;
}

main {
  width: 800px;
  margin: 18px auto auto auto;
}

a.link {
  display: flex;
  background-color: color-mix(in srgb, var(--color, var(--background)) 20%, #0000);
  border-radius: 24px;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 2px solid var(--color, var(--border));
  color: var(--foreground-subtext);
  text-decoration: none;
  transition: .2s;

  /* 
   * fix na zepsuty font na firefoxie po rotateZ xd
   * src: https://www.useragentman.com/blog/2014/05/04/fixing-typography-inside-of-2-d-css-transforms/
   */
  filter: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><filter id="gaussian_blur"><feGaussianBlur in="SourceGraphic" stdDeviation="0" /></filter></defs></svg>#gaussian_blur');
}

a.link:hover {
  transform: rotateZ(1deg) scale(1.02);
  background-color: color-mix(in srgb, var(--color-hover, var(--primary)) 20%, #0000);
  border-color: var(--color-hover, var(--primary));
  box-shadow: 0 0 24px color-mix(in srgb, var(--color-hover, var(--primary)) 50%, #0000);
}

a.link:hover button {
  background-color: var(--color-hover, var(--primary));
}

a.link .name {
  display: flex;
  align-items: center;
  gap: 6px;

  font-size: 1.1rem;
  font-weight: bold;
  color: var(--foreground);
}

a.link>div {
  flex: 1;
}

a.link .over-18 {
  position: relative;
  top: 1px;
  border: 1px solid var(--danger);
  background-color: color-mix(in srgb, var(--danger) 30%, #000f);
  color: var(--danger);
  border-radius: 12px;
  padding: 0 8px;
  font-size: .85rem;
  font-weight: normal;
}

a.link img {
  height: 48px;
  margin: 6px;
}

button {
  border-radius: 12px;
  padding: 8px 12px;
  color: var(--foreground);
  background-color: var(--color, var(--primary));
  border: none;
  transition: .2s;
  cursor: pointer;
}

footer {
  text-align: center;
  color: var(--foreground-subtext);
  margin: 24px 0;
}

footer a {
  text-decoration: none;
  color: var(--foreground--subtext);
}

.stats-row {
  display: flex;
  width: 100%;
  gap: 6px;
}

.stat {
  display: flex;
  justify-content: space-between;
  flex: 1;
  padding: 12px 18px;
  border: 2px solid var(--border);
  border-radius: 20px;
  background-color: color-mix(in srgb, var(--color, var(--background)) 20%, #0000);
}

.stat .name {
  color: var(--foreground-subtext);
}

.stat .value {
  font-size: 1.3rem;
  font-weight: bold;
}

.stat .value-inline {
  font-weight: bold;
  color: var(--foreground);
}

.stat .icon-big {
  height: 46px;
}

@media only screen and (max-width: 825px) {
  main {
    width: 95%;
  }
}

@media only screen and (max-width: 452px) {
  a.link button {
    display: none;
  }
}