/* "SpagettiCode" - Spaghetti woven by master coders, made of macarons and ribbons. +30HP to all. */
:root {
  --bg-col: #222224;
  --text: #eeeef2;
  --content: #34343b;
  --contentHover: #27272a;
  --footerCol: #99999b;
  --navbar: #1a1a1c;
  --hoverLink: #fab387;
}

*:focus-visible {
  outline: 2px solid var(--hoverLink);
  outline-offset: 2px;
  border-radius: 2px;
}

body {
  margin: 0;
  background-color: var(--bg-col);
  color: var(--text);
  font-family: Arial, Helvetica, sans-serif;
}

h1,
h2 {
  font-family: "w95fa";
  font-size: 24px;
  font-weight: normal;
}

h2 {
  margin-top: 3px;
  margin-bottom: 16px;
}

a {
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}

img {
  border-radius: 10px;
  max-width: 100%;
}

li {
  line-height: 1.6;
}

footer {
  text-align: center;
  color: var(--footerCol);
  font-size: 12px;
  line-height: 1.75em;
  font-family: "SourceSerif";
  margin-top: 12px;
  margin-bottom: 12px;
}

.bCont {
  display: block;
  margin-inline: auto;
}

.bImg {
  display: block;
  margin-inline: auto;
  width: 576px;
  border-radius: 0;
  border-bottom: 3.5px solid #5f3338;
  user-drag: none;
  -webkit-user-drag: none;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

.bImg:hover {
  transition-duration: 0.2s;
  border-bottom: 3.5px solid #9f5348;
}

.profile {
  display: block;
  margin: auto;
  margin-top: -64px;
  border-radius: 10px;
  width: 120px;
  outline: 3.5px solid #496968;
}

.profile:hover {
  transition-duration: 0.2s;
  outline: 3.5px solid #71bbb5;
}

.navbar {
  background-color: var(--navbar);
  background-image: url("/img/banner-pixel.png");
  background-position: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-blend-mode: multiply;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  border-bottom: 4px solid #2f2f36;
  position: none;
  top: 0;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  padding: 10px;
  transition: top 0.3s;
  z-index: 100;
}

.socialNav {
  display: flex;
  margin-top: 6px;
  margin-left: auto;
  margin-right: 3.4%;
}

.profilePage {
  border-radius: 4px;
  outline: 3.5px solid var(--navbar);
  image-rendering: auto;
  margin-top: 4px;
  transition-duration: 0.2s;
}

.profilePage:hover {
  transition-duration: 0.2s;
  outline: 3.5px solid #648a88;
}

.profilePage:active {
  transition-duration: 0.2s;
  outline: 3.5px solid #496968;
}

.pfpMargin {
  margin-left: 3.4%;
}

.header {
  margin: 16px;
  text-align: center;
  font-family: "w95fa";
  font-weight: normal;
  font-size: 32px;
}

.headerPage {
  text-decoration: none;
  color: inherit;
  margin-left: 12px;
  font-family: "w95fa";
  font-size: 22px;
}

.header1 {
  font-size: 30px;
}

.topPage {
  margin: 24px;
}

.social {
  padding: 6px 16px 14px 16px;
  display: flex;
  justify-content: center;
}

.icon {
  color: var(--text);
  width: 32px;
  height: 32px;
  stroke-width: 1.75;
  margin-right: 6px;
}

.icon:active {
  color: #aaaab2;
}

.icon-tabler-brand-bluesky {
  margin-right: 4px;
}

.icon-tabler-brand-github {
  margin-right: 1.2px;
}

.icon-tabler-device-gamepad-3 {
  margin-left: -3px;
}

.icon-tabler-dots {
  margin-left: -2.4px;
}

.twtIcon {
  width: 32px;
  height: 32px;
  position: relative;
  transition: 0.2s opacity;
  margin-right: 4px;
}

.twtIcon::before,
.twtIcon::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: contain;
  transition: 0.2s opacity ease;
  opacity: 1;
}

.twtIcon::before {
  background-image: url("/img/svg/brand-x.svg");
}

.twtIcon::after {
  background-image: url("/img/svg/twitter.svg");
  opacity: 0;
}

.twtIcon:hover {
  filter: brightness(0.7);
}

.twtIcon:hover::after {
  opacity: 1;
}

.twtIcon:hover::before {
  opacity: 0;
}

.about {
  font-family: "SourceSerif";
  color: #d5d5da;
  text-align: center;
  font-size: 16px;
  margin: 16px 16px 10px 16px;
}

.about:hover {
  color: white;
  transition-duration: 0.2s;
}

.list {
  /* background-color: #292929; */
  font-family: "w95fa";
  padding: 8px 20px 16px 20px;
  margin-bottom: -16px;
  margin-inline: auto;
}

.content {
  font-family: "SourceSerif";
  font-size: 14px;
  background-color: var(--content);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 8px;
}

.content:hover {
  /* background-color: #484848; */
  transition-duration: 0.2s;
}

.content:active {
  background-color: var(--contentHover);
  transform: translateY(3px);
  transition-duration: 0.2s;
}

.contentLink {
  color: inherit;
  text-decoration: none;
}

.content,
.cover {
  display: block;
  height: auto;
}

.secondaryTxt {
  color: var(--footerCol);
}

.cover {
  margin-bottom: 16px;
}

.footer {
  color: inherit;
  text-decoration: underline inherit;
}

.listTitle {
  font-family: "w95fa";
  font-weight: normal;
  margin-left: 8px;
}

.titlePage {
  margin: 24px 0px -8px;
  font-size: 32px;
}

.pTitleMargin {
  margin-top: 32px;
}

.aboutPage {
  font-family: SourceSerif;
  margin: 24px 0px;
}

.coverPage {
  margin-left: auto;
}

.margin {
  margin-inline: 24px;
}

.pageContainer {
  margin: 24px 24px 0px 24px;
}

.descPage {
  font-family: SourceSerif;
  font-size: 14px;
  margin-top: 20px;
  margin-bottom: 24px;
}

.breadcrumb {
  font-size: 16px;
  background-color: var(--content);
  border-radius: 6px;
  padding: 10px 12px;
  text-decoration: none;
  font-family: "w95fa";
}

.breadcrumb:hover {
  transition-duration: 0.2s;
}

.breadcrumb:active {
  background-color: #28282d;
  transform: translateY(3px);
  transition-duration: 0.2s;
}

.downloadButton {
  display: inline-block;
  background-color: rgba(68, 68, 80, 0.65);
  background-image: url("/img/svg/obs-plain.svg");
  background-repeat: no-repeat;
  background-position: 25%;
  background-size: 170px;
  font-family: "w95fa";
  text-align: center;
  font-size: 18px;
  text-decoration: none;
  width: 100%;
  padding: 12px 0px 12px 0px;
  box-sizing: border-box;
  border-radius: 6px;
  border: 3px solid var(--bg-col);
  margin-bottom: 16px;
}

.downloadButton:hover {
  transition-duration: 0.2s;
  background-color: rgba(71, 71, 83, 1);
  border: 3px solid var(--hoverLink);
}

.downloadButton:active {
  background-color: #37373f;
  border: 3px solid #ca9d82;
  transform: translateY(3px);
  transition-duration: 0.2s;
}

.badgeStyle {
  border-radius: 0px;
  display: block;
  outline: 2px solid transparent;
}

.badgeStyle:hover,
.badgeStyle:focus,
.badgeStyle:focus-visible {
  outline: 2px solid var(--hoverLink);
  outline-offset: 4px;
  transition: outline 0.2s;
}

.missingFrame {
  position: relative;
  color: var(--footerCol);
  font-family: "w95fa";
  width: 75%;
  background-color: black;
  border: white 3px solid;
  margin: -24px auto 24px auto;
  padding: 16px 8px 16px 24px;
  font-size: 19px;
  line-height: 26px;
}

.missingFrame::before {
  content: "*";
  position: absolute;
  left: 2.75%;
}

.missingLink {
  color: white;
}

.missingLink:hover {
  color: yellow;
}

.linkPage {
  font-family: "w95fa";
  font-size: 20px;
  padding: 12px;
  margin-inline: auto;
  margin-bottom: -48px;
  width: 89%;
}

.linkStyle {
  display: flex;
  margin-top: -28px;
  margin-bottom: 48px;
  align-items: center;
  padding: 24px 24px;
  background-color: var(--content);
  text-decoration: none;
  outline: none;
  border-radius: 12px;
  border-bottom: 4px solid var(--content);
  outline: 2px solid transparent;
  outline-offset: 4px;
  background-repeat: no-repeat;
  background-position: 10%;
  background-size: 140px;
}

.linkStyle:focus-visible {
  outline: 2px solid var(--hoverLink);
  transition: outline 0s;
}

.linkStyle:hover {
  transition:
    border-bottom 0.2s,
    transform 0.2s,
    background-color 0.2s,
    outline 0s;
}

.linkStyle:active {
  background-color: var(--contentHover);
  transform: translateY(3px);
}

/* other acc links */
.linkPinterest {
  background-image: url("/img/svg/brand-pinterest.svg");
}

.linkPinterest:hover {
  border-bottom: 4px solid #ff5555;
}

.linkPinterest:active {
  border-bottom: 4px solid #ff555555;
}

.linkTumblr {
  background-image: url("/img/svg/brand-tumblr.svg");
}

.linkTumblr:hover {
  border-bottom: 4px solid #35465c;
}

.linkTumblr:active {
  border-bottom: 4px solid #26313f;
}

.linkSketchfab {
  background-image: url("/img/svg/cube.svg");
}

.linkSketchfab:hover {
  border-bottom: 4px solid #1caad9;
}

.linkSketchfab:active {
  border-bottom: 4px solid #0d5670;
}

.linkReddit {
  background-image: url("/img/svg/reddit.svg");
}

.linkReddit:hover {
  border-bottom: 4px solid #ff4500;
}

.linkReddit:active {
  border-bottom: 4px solid #b12f00;
}

.linkGitea {
  background-image: url("/img/svg/gitea.svg");
}

.linkGitea:hover {
  border-bottom: 4px solid #609926;
}

.linkGitea:active {
  border-bottom: 4px solid #335313;
}

/* game links */
.linkosu {
  background-image: url("/img/svg/osu.svg");
}

.linkosu:hover {
  border-bottom: 4px solid #f26ba7;
}

.linkosu:active {
  border-bottom: 4px solid #a15376;
}

.linketterna {
  background-image: url("/img/svg/arrow.svg");
}

.linketterna:hover {
  border-bottom: 4px solid #8f60f6;
}

.linketterna:active {
  border-bottom: 4px solid #604894;
}

.linkra {
  position: relative;
  overflow: hidden;
  background-image: url("/img/svg/device-gamepad-3.svg");
}

.linkra::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:
    no-repeat 10% url("/img/svg/device-gamepad-3.svg"),
    linear-gradient(to right, var(--contentHover), var(--contentHover));
  opacity: 0;
  transition: opacity 0.2s;
  z-index: -200;
}

.linkra:hover {
  background:
    no-repeat 10% url("/img/svg/device-gamepad-3.svg"),
    linear-gradient(var(--content), var(--content)) padding-box,
    linear-gradient(
        to right,
        #89b4fa 0%,
        #89b4fa 15%,
        #c28ef1 50%,
        #f9e2af 75%,
        #f9e2af
      )
      border-box;
  border-bottom: 4px solid transparent;
}

.linkra:active {
  background:
    no-repeat 10% url("/img/svg/device-gamepad-3.svg"),
    linear-gradient(var(--content), var(--content)) padding-box,
    linear-gradient(
        to right,
        #4970af 0%,
        #4970af 15%,
        #946db9 50%,
        #bea672 75%,
        #bea672 100%
      )
      border-box;
}

.linkra:active::after {
  opacity: 1;
}

.linksteam {
  background-image: url("/img/svg/brand-steam.svg");
}

.linksteam:hover {
  border-bottom: 4px solid #35688f;
}

.linksteam:active {
  border-bottom: 4px solid #233e53;
}

.linktetrio:hover {
  border-bottom: 4px solid #15919d;
}

.linktetrio:active {
  border-bottom: 4px solid #1e686e;
}

.gamelogo {
  margin-right: 8px;
}
/* end of other acc links */

.hrCust {
  background-color: var(--content);
  padding: 2px;
  margin-top: 0px;
  margin-bottom: 48px;
  margin-inline: auto;
  width: 88.5%;
  border: none;
}

lite-youtube {
  border-radius: 6px;
  margin-bottom: 12px;
  --lite-youtube-frame-shadow-visible: no;
}

.lite-youtube-fallback {
  display: block;
  font-family: "w95fa";
  margin-bottom: 12px;
  background-color: var(--content);
  text-decoration: none;
  padding: 12px;
  border-radius: 8px;
}

@media screen and (min-width: 480px) {
  h2 {
    font-size: 24px;
  }

  .headerPCont {
    display: flex;
  }

  .bImg {
    border-radius: 0px 0px 4px 4px;
  }

  .topC {
    margin-top: -20px;
  }

  .topC {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .topPage {
    width: 440px;
  }

  .list {
    margin-top: -24px;
    padding-bottom: 16px;
    width: 440px;
  }

  .content {
    margin-inline: auto;
    margin-bottom: 12px;
    font-size: 14px;
  }

  .titlePage {
    font-size: 28px;
  }

  .pTitleMargin {
    margin-bottom: -24px;
  }

  .missingFrame {
    width: 400px;
    line-height: 26px;
  }

  .linkPage {
    width: 440px;
  }

  .hrCust {
    margin-top: -24px;
    width: 430px;
  }
}

@media screen and (min-width: 576px) {
  .pTitleMargin {
    margin-inline: 18px;
  }

  .titlePage {
    margin-inline: 3.4%;
  }

  .pfpMargin {
    margin-left: 5.85%;
  }

  .socialNav {
    margin-right: 5.85%;
  }

  .breadcrumb {
    margin-inline: 2.2%;
  }

  .content {
    width: 75%;
  }

  .aboutPage {
    margin-inline: 3.4%;
  }

  .headerPCont {
    display: flex;
    justify-content: center;
  }

  .topPage {
    width: 480px;
  }

  .header1 {
    margin-left: 10%;
  }

  .list {
    width: 576px;
    padding-left: 0;
    padding-right: 0;
  }

  .pageContainer {
    margin-inline: auto;
    width: 452px;
  }
}

@media screen and (min-width: 800px) {
  .list {
    padding: 8px 0px 16px;
  }

  .pfpMargin {
    margin-left: 7.85%;
  }

  .socialNav {
    margin-right: 7.85%;
  }

  .margin {
    margin-inline: 24.5%;
  }
}

@media screen and (min-width: 960px) {
  .bImg {
    width: 760px;
  }

  .topPage {
    width: 760px;
  }

  .titlePage {
    margin-inline: 10.85%;
  }

  .pfpMargin {
    margin-left: 10.85%;
  }

  .socialNav {
    margin-right: 10.85%;
  }

  .aboutPage {
    margin-inline: 10.85%;
  }

  .pTitleMargin {
    margin-inline: 86px;
  }

  .list {
    width: 760px;
  }

  .pageContainer {
    width: 595px;
  }

  .breadcrumb {
    margin-inline: 10.5%;
  }

  .missingFrame {
    width: 560px;
  }

  .linkPage {
    width: 590px;
  }

  .hrCust {
    width: 580px;
  }
}

#loadOverlay {
  display: none;
}