:root {
  color-scheme: light dark;
  --bg-color: light-dark(
    hsl(42, 58%, 80%),
    /* #EBD5AB */ hsl(105, 11%, 11%) /* #1B211A */
  );

  --text-color: light-dark(
    hsl(105, 11%, 11%),
    /* #1B211A */ hsl(42, 58%, 80%) /* #EBD5AB */
  );

  --border-color: light-dark(
    hsl(92, 28%, 55%),
    /* #8BAE66 */ hsl(92, 22%, 45%) /* #628141 */
  );

  --hover-bg: light-dark(
    hsl(92, 22%, 45%),
    /* #628141 */ hsl(92, 28%, 55%) /* #8BAE66 */
  );
}

body {
  font-family: "Atkinson Hyperlegible Mono";
  background: var(--bg-color);
  color: var(--text-color);
  align-self: center;
}

body ::selection {
  background-color: var(--hover-bg);
  color: var(--bg-color);
}

/* atkinson-hyperlegible-mono-500 - latin */
@font-face {
  font-family: "Atkinson Hyperlegible Mono";
  font-style: normal;
  font-weight: 500;
  src: url("atkinson-hyperlegible-mono-v8-latin-500.woff2") format("woff2");
}
@font-face {
  font-family: "Atkinson Hyperlegible Mono";
  font-style: normal;
  font-weight: 800;
  src: url("atkinson-hyperlegible-mono-v8-latin-800.woff2") format("woff2");
}
h1 {
  font-size: clamp(2vw, calc(4vw + 1rem), 7vw);
  text-align: center;
  margin: 0%;
}

#clock {
  font-size: clamp(1rem, calc(1vw + 1rem), 2vw);
  color: var(--text-color);
  text-align: center;
}

h2 {
  font-size: clamp(2rem, calc(2vw + 1rem), 2vw);
  text-align: center;
  margin: 20px;
}

#button-group {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.btn {
  display: inline-block;
  padding: 12px 20px 12px 48px; /* extra left space for logo */
  margin: 10px;
  color: var(--text-color);
  text-decoration: none;
  border-radius: 6px;
  background-repeat: no-repeat;
  background-position: 12px center;
  background-size: 24px;
  transition: background-color 0.3s ease;
}

.btn:hover {
  background-color: var(--hover-bg);
  color: var(--bg-color);
}

.sonarr {
  background-image: url("/svgs/sonarr.svg");
}

.radarr {
  background-image: url("/svgs/radarr.svg");
}

.sonarr {
  background-image: url("/svgs/sonarr.svg");
}

.filebrowser {
  background-image: url("/svgs/file-browser.svg");
}

.docking {
  background-image: url("/svgs/docking-station.svg");
}

.technitium {
  background-image: url("/svgs/technitium.svg");
}

.jellyseerr {
  background-image: url("/svgs/jellyseerr.svg");
}

.jellyfin {
  background-image: url("/svgs/jellyfin.svg");
}

.watcharr {
  background-image: url("/svgs/watcharr.png");
}

.qbittorrent {
  background-image: url("/svgs/qbittorrent.svg");
}

.bazarr {
  background-image: url("/svgs/bazarr.svg");
}

.flaresolverr {
  background-image: url("/svgs/flaresolverr.svg");
}

.prowlarr {
  background-image: url("/svgs/prowlarr.svg");
}

.proxmox {
  background-image: url("/svgs/proxmox.svg");
}

.openwrt {
  background-image: url("/svgs/openwrt.svg");
}

/* External / services */

.chatgpt {
  background-image: url("/svgs/chatgpt.svg");
}
.github {
  background-image: url("/svgs/github.svg");
}
.cloudflare {
  background-image: url("/svgs/cloudflare.svg");
}
.ghar {
  background-image: url("/svgs/rk-dark.svg");
}
.blog {
  background-image: url("/svgs/rk-dark.svg");
}
.cv {
  background-image: url("/svgs/rk-dark.svg");
}
.kvalster {
  background-image: url("/svgs/kvalster.svg");
}
.meetup {
  background-image: url("/svgs/meetup.svg");
}
.smhi {
  background-image: url("/svgs/smhi.png");
}
.dmi {
  background-image: url("/svgs/dmi.svg");
}
.youtube {
  background-image: url("/svgs/youtube.svg");
}
.reddit {
  background-image: url("/svgs/reddit.svg");
}
.linkedin {
  background-image: url("/svgs/linkedin.svg");
}
.arbetsformedlingen {
  background-image: url("/svgs/arbetsformedlingen.svg");
}
.translate {
  background-image: url("/svgs/translate.svg");
}
.prisjakt {
  background-image: url("/svgs/prisjakt.svg");
}
.w3 {
  background-image: url("/svgs/w3schools.svg");
}
.mdn {
  background-image: url("/svgs/mdn.svg");
}
.discord {
  background-image: url("/svgs/discord.svg");
}
.maps {
  background-image: url("/svgs/google-maps.svg");
}
.selfhost {
  background-image: url("/svgs/selfhost.svg");
}
.community {
  background-image: url("/svgs/proxmox-scripts.svg");
}

footer {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding-top: 5%;
}