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

:root {
  --foreground: #fafafa;
  --foreground-subtext: #ccc1af;
  --foreground-separator: #595757;
  --border: #1a1a1a;
  --background: #0d0d0d;
  --background-darker: #080808;
  --primary: #f7a100;
  --danger: #e33232;

  --g4skins: #996EE9;
  --g4skins-hover: #b295e8;
}

* {
  margin: 0;
  padding: 0;
}

body {
  color: var(--foreground);
  background-color: var(--background-darker);
  font-family: 'Outfit', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

section.profile {
  display: flex;
  background-color: color-mix(in srgb, var(--background) 80%, #0000);
  border-radius: 24px;
  gap: 12px;
  align-items: center;
  justify-content: center;
  padding: 12px;
  border: 1px solid var(--border);
}

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

section.profile::before {
  position: absolute;
  top: -200px;
  left: 50%;
  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: 80px;
  height: 80px;
  border-radius: 50%;
}

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;
}

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

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: 1px solid var(--color, var(--border));
  color: var(--foreground-subtext);
  text-decoration: none;
  transition: .2s;
}

a.link:hover {
  transform: translateY(-5px);
  background-color: color-mix(in srgb, var(--color-hover, var(--primary)) 20%, #0000);
  border-color: var(--color-hover, var(--primary));
}

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;
}

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

/* Warianty linków - współprace */

a.link.g4 {
  --color: var(--g4skins);
  --color-hover: var(--g4skins-hover);
}

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

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

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

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