:root {
    --color-blue: #000000;
    --h-link: 250;
    --h-text: 0;
    --h-bg: 120;
    --l-text: 0%;
    --l-bg: calc(100% - var(--l-text));
    --hsl-link: var(--h-link), 100%, 65%;
    --hsl-text: var(--h-text), 100%, var(--l-text);
    --hsl-bg: var(--h-bg), 100%, calc(100% - var(--l-text));

    --hsl-img-underlay: var(--hsl-bg);
    --hsl-img-overlay: var(--hsl-text);

    --gap-side: 0.5rem;
    --gap-mini: 0.2rem;
    --gap-small: 0.4rem;
    --gap-medium: 0.8rem;
    --gap-large: 1.6rem;
    --gap-giant: 3rem;
    --height-cover-small: 10rem;
    --height-cover-big: 300px;
}


/* 
=================
GENERAL HTML TAGS 
================= */

a {color: hsl(var(--hsl-link));}
a.active {color: hsl(var(--hsl-text)); text-decoration: none; pointer-events: none;}
a.semi-active {color: hsl(var(--hsl-text));}

body {
    background-color: hsl(var(--hsl-bg));
    color: hsl(var(--hsl-text));
    height: 100svh;
    height: 100dvh;
}


/*
======
IMAGES
====== */

figure { line-height: 0; margin: 0;}
figure>img { object-fit: contain; opacity: 0;}

.cover {max-width: 100%;}

.server-item>.cover>figure>img {max-height: var(--height-cover-small);}
.server-item>.cover, .server .cover {cursor: pointer;}

.server .cover>figure>img, .create .cover>figure>img {max-height: var(--height-cover-big);}
.server .cover figure, .create figure {
    width: max-content;
    max-width: 100%;
}
.server>.cover-wrapper {max-height: var(--height-cover-big);}
.server .cover img, .create img {max-width: 100%;}

.cover figure {
  display: block; /* important */
  background-color: hsl(var(--hsl-img-overlay));

  -webkit-mask-image: var(--img);
  mask-image: var(--img);

  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;

  -webkit-mask-size: contain;
  mask-size: contain;

  -webkit-mask-position: center;
  mask-position: center;

  /* IMPORTANT for some browsers */
  -webkit-mask-mode: alpha;
  mask-mode: alpha;
}
.cover figure::before {
  content: "";
  position: absolute;

  background-color: inherit;

  -webkit-mask-image: var(--img);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-position: center;

  mask-image: var(--img);
  mask-repeat: no-repeat;
  mask-size: contain;
  mask-position: center;
}

.popover>figure {
    height: auto;
    width: fit-content;
}
.popover>figure>img {
    max-width: calc(100vw - 2 * var(--gap-large));
    max-height: calc(100dvh - 2 * var(--gap-large));
    padding: 0;
    object-fit: contain;
    object-position: center;
    cursor:auto;
}