/* ==================================================================================================== */
/* ===== Fonts ======================================================================================== */

@font-face {
  font-family: "Bebas Neue Regular";
  src: url("../site-fonts/sit-font-bebas-neue.eot");
  src:
    url("../site-fonts/sit-font-bebas-neue.eot?#iefix") format("embedded-opentype"),
    url("../site-fonts/sit-font-bebas-neue.woff") format("woff"),
    url("../site-fonts/sit-font-bebas-neue.ttf") format("truetype");
  font-display: swap;
  font-style: normal;
  font-weight: normal;
}

/* ==================================================================================================== */
/* ===== Variables ==================================================================================== */

:root {
  --colour-backing-grey: #333333;
  --colour-global-white: #ffffff;
  --colour-pin-red: #ee3124;
  --colour-pin-red-glow: #ee3124;
  --colour-pin-black: #262324;
  --colour-shadow: #201e1e;
  --colour-subdued-grey: #ada09a;
  --colour-subdued-white: #d6d0cd;
  --font-important: "Bebas Neue Regular";
  --px-6: 0.375rem;
  --px-8: 0.5rem;
  --px-10: 0.625rem;
  --px-12: 0.75rem;
  --px-16: 1rem;
  --px-20: 1.25rem;
  --px-24: 1.5rem;
  --px-32: 2rem;
  --px-48: 3rem;
  --px-64: 4rem;
  --px-96: 6rem;
  --px-125: 7.813rem;
  --px-145: 9.063rem;
  --px-200: 12.5rem;
  --px-250: 18.125rem;
  --px-300: 18.75rem;
  --px-500: 31.25rem;
  --px-580: 36.25rem;
}

/* ==================================================================================================== */
/* ===== Element Styles — Mobile ====================================================================== */

html {
  font-size: 16px;
  margin: 0;
  padding: 0;
}

body {
  background: radial-gradient(var(--colour-backing-grey) 80%, var(--colour-pin-black) 100%);
  color: var(--colour-subdued-white);
  font-family:
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    Ubuntu,
    sans-serif;
  font-size: 12px;
  margin: var(--px-6);
}

svg use[href="#indiedb"],
svg use[href="#instagram"],
svg use[href="#kofi"],
svg use[href="#patreon"],
svg use[href="#threads"],
svg use[href="#tiktok"],
svg use[href="#twitch"],
svg use[href="#youtube"] {
  fill: var(--colour-subdued-white);
}

/* ==================================================================================================== */
/* ===== Class Styles - Mobile ======================================================================== */

/* ================================================== */
/* ===== Layout ===================================== */

.l--link-tree {
  background: linear-gradient(var(--colour-shadow) var(--px-300), var(--colour-pin-black) var(--px-500));
  margin: var(--px-6) 0 var(--px-6) 0;
  max-width: var(--px-580);
  padding: var(--px-32) 0 var(--px-32) 0;
}

/* ================================================== */
/* ===== Parts ====================================== */

.p--bio-logo {
  filter: drop-shadow(0 0 var(--px-6), var(--colour-shadow));
  height: auto;
  width: var(--px-125);
}

.p--bio-social {
  margin: 0 var(--px-8);
}

.p--bio-social svg {
  height: var(--px-24);
  width: var(--px-24);
}

.p--bio-social:hover svg {
  filter: drop-shadow(0 0 var(--px-6) var(--colour-subdued-white));
}

.p--bio-social:hover svg use[href="#instagram"],
.p--bio-social:hover svg use[href="#patreon"],
.p--bio-social:hover svg use[href="#threads"],
.p--bio-social:hover svg use[href="#tiktok"],
.p--bio-social:hover svg use[href="#twitch"],
.p--bio-social:hover svg use[href="#youtube"] {
  fill: var(--colour-global-white);
}

.p--divider {
  gap: var(--px-24);
  padding: 0 var(--px-8);
}

.p--divider hr {
  border: none;
  border-top: 1px solid var(--colour-subdued-grey);
  flex: 1;
  opacity: 25%;
}

.p--footer-image {
  height: var(--px-48);
  margin: var(--px-32) 0 var(--px-16) 0;
  width: var(--px-48);
}

.p--footer-text {
  color: var(--colour-subdued-grey);
  font-family: var(--font-important);
  font-size: var(--px-20);
}

.p--link-block {
  background: linear-gradient(var(--colour-subdued-white) 0%, var(--colour-subdued-grey) 100%);
  border-radius: var(--px-8);
  box-shadow: 0 0 var(--px-10) var(--colour-shadow);
  height: 100%;
  left: 0;
  opacity: 6%;
  position: absolute;
  top: 0;
  width: 100%;
}

.p--link-graphic-cover {
  height: var(--px-32);
  width: var(--px-32);
}

.p--link-graphic-icon {
  height: var(--px-24);
  width: var(--px-24);
}

.p--link-graphic-wrapper {
  align-items: center;
  aspect-ratio: 1 / 1;
  display: flex;
  height: 100%;
  justify-content: center;
  left: 0;
  position: absolute;
  top: 0;
}

.p--link-interact {
  align-items: center;
  display: flex;
  font-weight: 700;
  height: 100%;
  justify-content: center;
  left: 0;
  position: absolute;
  text-align: center;
  top: 0;
  vertical-align: middle;
  width: 100%;
}

.p--link-wrapper-in {
  margin: var(--px-8) 0;
  min-height: var(--px-48);
  position: relative;
  width: auto;
}

.p--link-wrapper-in a {
  color: var(--colour-subdued-grey);
}

.p--link-wrapper-in:hover a {
  color: var(--colour-global-white);
}

.p--link-wrapper-in:hover svg use[href="#indiedb"],
.p--link-wrapper-in:hover svg use[href="#kofi"],
.p--link-wrapper-in:hover svg use[href="#patreon"],
.p--link-wrapper-in:hover svg use[href="#twitch"],
.p--link-wrapper-in:hover svg use[href="#youtube"] {
  fill: var(--colour-global-white);
}

.p--link-wrapper-in:hover .p--link-block {
  box-shadow: 0 0 var(--px-10) var(--colour-subdued-grey);
  opacity: 20%;
}

.p--link-wrapper-out {
  padding: 0 var(--px-8) 0 var(--px-8);
}

/* ==================================================================================================== */
/* ===== Media Rules ================================================================================== */

/* ================================================== */
/* ===== Mobile ===================================== */

@media (max-width: 390px) {
}

/* ================================================== */
/* ===== Phablet 390px upwards ====================== */

@media (min-width: 390px) {
  .p--bio-logo {
    width: var(--px-145);
  }
}

/* ================================================== */
/* ===== Phablet 450px upwards ====================== */

@media (min-width: 450px) {
  body {
    font-size: 14px;
  }

  .p--bio-social svg {
    height: var(--px-32);
    width: var(--px-32);
  }

  .p--link-graphic-cover {
    height: var(--px-48);
    width: var(--px-48);
  }

  .p--link-graphic-icon {
    height: var(--px-32);
    width: var(--px-32);
  }

  .p--link-wrapper-in {
    min-height: var(--px-64);
  }
}

/* ================================================== */
/* ===== Phablet 550px upwards ====================== */

@media (min-width: 550px) {
  body {
    background: radial-gradient(var(--colour-backing-grey) 70%, var(--colour-pin-black) 100%);
    font-size: 16px;
    margin: var(--px-16);
  }

  .l--link-tree {
    padding-top: var(--px-64);
  }

  .p--bio-logo {
    width: var(--px-200);
  }

  .p--divider {
    gap: var(--px-32);
    padding: 0 var(--px-24);
  }

  .p--footer-image {
    height: var(--px-64);
    margin-top: var(--px-48);
    width: var(--px-64);
  }

  .p--footer-text {
    font-size: var(--px-24);
  }

  .p--link-wrapper-out {
    padding: 0 var(--px-24) 0 var(--px-24);
  }
}

/* ================================================== */
/* ===== Desktop Small 810px upwards ================ */

@media (min-width: 810px) {
  body {
    background: radial-gradient(var(--colour-backing-grey) 50%, var(--colour-pin-black) 90%);
  }

  .l--link-tree {
    margin-top: var(--px-32);
    padding-top: var(--px-64);
  }

  .p--bio-logo {
    width: var(--px-250);
  }
}

/* ================================================== */
/* ===== Desktop Large 1366px upwards =============== */

@media (min-width: 1366px) {
  body {
    background: radial-gradient(var(--colour-backing-grey) 20%, var(--colour-pin-black) 90%);
  }

  .p--footer-image {
    height: var(--px-96);
    width: var(--px-96);
  }
}