/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

@import "https://www.nerdfonts.com/assets/css/webfont.css";

.nf {
  color: inherit;
  font-family: 'NerdFontsSymbols Nerd Font' !important;
}

@font-face {
  font-family: nihonium;
  src: url(/fonts/nihonium113.ttf), local('MS UI Gothic');
}

/* @font-face {
  font-family: AgaveNerdFontPropo;
  src: url(/fonts/AgaveNerdFontPropo-Regular.ttf);
} */

@font-face {
  font-family: AgaveRegular;
  src: url(/fonts/Agave-Regular-slashed.ttf);
}

@keyframes bgScroll {
  0% {
    transform: translate(-100px, -100px);
    /* background-position: 0% 0%; */
  }
  100% {
    transform: translate(0px, 0px);
    /* background-position: 100% 100%; */
  }
}

/* i just wanted to say that i hate that this works and this is an awful hack
   the things that i do for a scrolling checkerboard background (and i didn't even need
   an image for this! but i want old browser support, even though im using stuff that isn't
   supported anyway) ;w;
 https://stackoverflow.com/questions/712689/css-div-stretch-100-page-height */
html {
  min-height: 100%;
  position: relative;
}

body {
  /* background-color: white; */
  background: black;
  color: black;
  /* font-family: Verdana; */
  height: 100%;
}

p, li, a, h1, h2, h3 {
  font-family: 'Segoe UI', SegoeUI, Noto Sans, Tahoma, Geneva, Verdana, sans-serif;
}

code, .code, #defragEntries time {
  font-family: 'Ubuntu Mono', Consolas, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New;
}

a:link, a:visited {
  color: #b46bff
}

#scrollingBg {
  content: '';
  z-index: -1;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 250%;
  height: 250%;
  /* display: block; */
  /* overflow: hidden; */
  background-repeat: repeat;
  background-image: url(/img/checkerboard.png);
  background-attachment: fixed;
  animation: bgScroll 10s linear infinite;
  /* filter: blur(); */
}

#bgWrapper {
  /* content: ''; */
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  /* position: fixed; */
  width: 100%;
  /* height: 100%; */
  min-height: 100vh;
  display: block;
  overflow: hidden;
}

body {
  /* background: #000000;
  background: linear-gradient(
    151deg,
    rgba(0, 0, 0, 1) 0%,
    rgba(9, 9, 121, 1) 35%,
    rgba(180, 107, 255, 1) 100%
  );
  background-size: 250% 250%;
  animation: gradient 15s ease infinite;
  background-attachment: fixed; */
  margin: 0;
}

@keyframes gradient {
  0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

#container {
  margin: 0 auto;
  max-width: 1000px;
  /* animation: 2s ease 0s 1 widthThingy; */
  position: relative;
  padding: 10px;
  /* background: rgba(0, 0, 0, 0.25); */
  /* background: linear-gradient(to bottom, rgba(0, 0, 0, 1) 10%, 30%, rgba(0, 0, 0, 0.25)); */
  background: linear-gradient(to bottom, rgba(0, 0, 0, 1) 10%, 30%, rgba(0, 0, 0, 0.45));
  backdrop-filter: blur(5px);
  border: solid black 5px;
  min-height: 100vh;
}

/* https://stackoverflow.com/questions/5159594/placing-a-div-sidebar-next-to-a-centered-div
   i may rethink this at some point, but i don't feel like dealing with responsiveness for this right now lol
   besides, i like the old internet center-only feel and i have a bunch of space with the flexbox */
/* div.leftBar {
  border: solid black 5px;
  height: 100%;
  margin-bottom: -10px;
  position: absolute;
  top: -5px;
  right: 100%;
} */

/* @keyframes widthThingy {
  from {
    max-width: 1000px;
    opacity: 0;
  }

  to {
    max-width: 1200px;
  }
} */

.minFullscreenContainer {
  width: 100%;
  min-height: 100vh;
  align-content: center;
}

#shrineContainer {
  width: fit-content;
  max-width: 500px;
  margin: auto;
  /* position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%); */
  padding: 10px;
  /* background: rgba(0, 0, 0, 0.25); */
  /* background: linear-gradient(to bottom, rgba(0, 0, 0, 1) 10%, 30%, rgba(0, 0, 0, 0.25)); */
  background: linear-gradient(to bottom, rgba(0, 0, 0, 1) 10%, 30%, rgba(0, 0, 0, 0.45));
  backdrop-filter: blur(5px);
  border: solid black 5px;
  /* min-height: 100vh; */
}

.shrineList {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  width: min-content;
  margin: 1em auto;
  gap: 5px;
}

.shrineList > * {
  font-size: 0;
}

#defragEntries {
  list-style: none;
}

#defragEntries * {
  font-family: AgaveRegular;
}

#defragEntries time, #updates time {
  font-size: 80%;
  margin-inline: 0.5em;
}

#defragEntries time::after, time.copyTime::after {
  content: attr(datetime);
}

/* .shrineList > *:nth-last-child(1):nth-child(odd) {
  grid-column: span all;
} */

#welcome {
  position: relative;
  animation: floaty 3s ease-in-out infinite, rainbow 20s linear infinite;
}

.floaty {
  animation: floaty 3s ease-in-out infinite;
}

@keyframes floaty {
  0% {
    bottom: 5px;
  }
  50% {
    bottom: 0px;
  }
  100% {
    bottom: 5px;
  }
}

@keyframes rainbow {
  from {
    filter: hue-rotate(0deg)
  }
  to {
    filter: hue-rotate(360deg);
  }
}

/* https://alvaromontoro.com/blog/68009/lgbtq-flags-coded-in-css 
   aaaaand
   https://www.geeksforgeeks.org/css/css-font-border/ */
.pride {
  background: linear-gradient(red 16.66%, orange 0 33.33%, yellow 0 50%, green 0 66.66%, blue 0 83.33%, indigo 0);
  padding: 1em;
  margin: 1em;
  text-shadow:
    -2px -2px 0 #000,
    2px -2px 0 #000,
    -2px 2px 0 #000,
    2px 2px 0 #000,
    -3px 0px 0 #000,
    3px 0px 0 #000,
    0px -3px 0 #000,
    0px 3px 0 #000;
}

h1 {
  text-align: center;
}

* {
  /* font-family: 'Segoe UI', SegoeUI, Noto Sans, Tahoma, Geneva, Verdana, sans-serif; */
  color: white;
  box-sizing: border-box;
}

.center {
  text-align: center;
}

.pixel {
  font-family: nihonium;
  text-rendering: geometricPrecision;
}

h2.pixel, h1.pixel {
  font-weight: normal;
  font-size: xx-large;
}

/* this isn't used anymore but i'm keeping it here just in case because I will hoard my styles
   nobody can stop me :3 */
.bottomBar {
  /* background-color: #000000; */
  overflow: hidden;
  position: fixed;
  bottom: 0;
  width: 100%;
  text-align: right;
  padding: 10px;
  opacity: 80%;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
}

.bottomBar > * {
  /* height: 100%; */
  display: block;
  float: right;
  /* filter: drop-shadow(10px 10px grey); */
}

.footer {
  padding: 3em;
  display: block;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
}

.footer img {
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

.footerBadges img {
  max-height: 4em;
  margin: 2px;
}

.footerButtons {
  margin: 1em;
  filter: drop-shadow(2px 2px gray);
}

.footerButtons > img {
  margin: 0.25em;
}

.bannerWrapper {
  text-align: center;
  background-color: #000000;
}

.banner {
  max-width: 100%;
}

.centerContainer {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: start;
  gap: 1em;
}

@media only screen and (max-width: 500px) {
  .centerContainer > div {
    flex-basis: 100%;
  }
}

.boldText {
  font-weight: bold;
  filter: drop-shadow(3px 3px gray);
  margin-inline-end: 3px;
}

.centerContainer > div, .centerContainer > nav {
  background: rgba(0, 0, 0, 0.70);
  border: 0.3em solid #000000;
  border-radius: 10px;
  padding: 2em;
  align-self: stretch;

  display: flex;
  flex-wrap: nowrap;
  /* justify-content: center; */
  align-items: center;
  flex-direction: column;
}

.innerBox {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  
}

#featuredSong > .innerBox {
  gap: 1em;
}

/* unused for now... but could be a cool effect somewhere! */
.blanket {
  box-shadow: white 0px 0px 0px 0.5em, rgba(255, 255, 255, 0.5) 0px 0px 0px 0.75em, rgba(255, 255, 255, 0.25) 0px 0px 0px 1em;
}

#intro {
  flex-grow: 2;
  /* flex-shrink: 0; */
  flex-basis: 50%;
}

#navBox {
  flex-basis: 100%;
  padding: 1em !important;
}

/* note to self, this doesn't actually work correctly! #navBox * overrides this, but I can't figure out how to get the styling to look correct or the same with actual flexboxy */
#navBox > .innerBox {
  flex-flow: row wrap;
  gap: 1em;
  justify-content: center;
}

#navBox * {
  /* color: white; */
  font-size: 111%;
  font-family: AgaveRegular;
  display: inline-block;
}

#navBox > a {
  font-weight: bold;
}

#navBox .nf,
#navBox img {
  margin-inline: 0.15em;
}

#navBox img {
  margin: 0;
  margin-inline: 0.15em;
  padding: 0;
  display: inline-block;
  height: 0.8em;
}

/* yeah so the seperator is clickable ;w;
   my solution for now is to just manually add a seperator element which i'll CSS up next time I need it
   https://stackoverflow.com/a/41631388 */
/* #navBox > .innerBox > * + *::before {
  content: "/";
  margin-inline-start: 1em;
  margin-inline-end: 1em;
  text-decoration: none;
  display: inline-block;
  pointer-events: none;
} */

.navSeperator {
  margin: 0;
}

.inlineImg {
  display: inline-block;
  height: 1em;
  margin-left: 5px;
  margin-right: 5px;
}

#creditsList {
  padding: 0em;
  margin: 0px;
}

@media screen and (min-width: 800px) {
  #creditsList {
    padding: 1em;
  }
}

#creditsList {
  list-style: none;
  margin: 0px;
}

#creditsList > li:nth-child(odd) {
  text-align: left;
}


#creditsList > li:nth-child(even) {
  text-align: right;
}

#creditsList > li + li {
  margin-top: 1.5em;
}

.creditsString {
  font-weight: bold;
}

#musicButton {
  position: absolute;
  right: 5px;
  top: 5px;
  background-color: transparent;
  border: none;
  background-image: url("/img/player/play.png");
  background-size: cover;
  width: 3em;
  height: 3em;
}

#musicButton:hover {
  background-image: url("/img/player/play_hover.png");
}

#musicButton.musicPlaying {
  background-image: url("/img/player/stop.png");
}

#musicButton.musicPlaying:hover {
  background-image: url("/img/player/stop_hover.png");
}

#musicButton > .musicTooltip {
  position: relative;
  /* z-index: -1; */
  transition: max-width 3s linear, visibility 0s linear 3s;
  overflow: hidden;
  text-align: left;
  background-color: #000;
  max-width: 0;
  right: calc(100% + 5px);
  float: right;
  padding: 2px;
  visibility: hidden;
  white-space: nowrap;
}

#musicButton > .musicTooltip.expanded {
  visibility: visible !important;
  max-width: 500px !important;
  transition: max-width 3s linear, visibility 0s linear 0s;
}

.button {
  image-rendering: pixelated;
  box-shadow: 2px 2px #aaa;
}

/* effect inspired by https://theabsoluterealm.com/main/CoolStuff/buttondex :3 */
.button:hover {
  transform: scale(1.2);
}


/* About Page */
#aboutWrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-flow: column nowrap;
  min-height: 100vh;
  width: 100%;
}

.horizontalBoxy {
  /* margin: 0 auto; */
  margin: 1em;
  width: 100%;
  /* animation: 2s ease 0s 1 widthThingy; */
  position: relative;
  padding: 10px;
  /* background: rgba(0, 0, 0, 0.25); */
  /* background: linear-gradient(to bottom, rgba(0, 0, 0, 1) 10%, 30%, rgba(0, 0, 0, 0.25)); */
  /* background: linear-gradient(to bottom, rgba(0, 0, 0, 1) 10%, 30%, rgba(0, 0, 0, 0.45)); */
  background: rgba(0, 0, 0, 0.90);
  backdrop-filter: blur(5px);
  border: solid black 5px;
  border-style: solid none;
  text-align: center;
}

.horizontalFlexy {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  gap: 1em;
  /* max-height: 50vh; */
}

@media not screen and (max-width: 1200px) {
  .scrollListWrapper {
    width: 25%;
  }
  #iAm {
    flex-basis: 20%;
  }
}

.scrollList {
  overflow: hidden;
  overflow-y: scroll;
  /* background-color: #000000; */
  /* width: 15%; */
  list-style: none;
  width: 100%;
  max-height: 15em;

  border: solid white 1px;
  padding: 1em;

  scrollbar-color: black white;
}

.scrollList ul {
  list-style: none;
}

/* .scrollList li::before {
  content: url("img/MediumExperiencePickup.png");
  zoom: 50%;
  vertical-align: middle;
} */

.scrollList li::before {
  content: "";
  display: inline-block;
  margin-right: 1em;
  height: 1em;
  width: 1em;

  background-image: url("/img/MediumExperiencePickup.png");
  background-size: 1em 1em;
  vertical-align: middle;
}
.scrollList.withSub > li {
  font-weight: bolder;
}

.scrollList > li + li {
  margin-top: 1em;
}

.scrollList li > ul > li::before {
  background-image: url("/img/MediumExperiencePickup_inverted.png");
}

.scrollList li > ul > li {
  font-weight: initial;
}

.rainbow {
  background-image: linear-gradient(to left, violet, indigo, blue, green, yellow, orange, red);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent !important;
}

.nobr {
  white-space: nowrap;
}

.defragContainer {
  padding: 1em;
}

h1.defragTitle {
  text-align: right;
  /* padding-inline: 1em; */
}

.defragTime {
  display: block;
  /* padding-inline: 1em;
  margin-top: 0.67em;
  margin-bottom: 0.67em; */
}

.defragTimeUpdated {
  font-size: smaller;
  margin-top: 0.1em;
}

.defragSubtitle {
  font-style: italic;
  /* padding-inline: 1em; */
  text-align: right;
  font-size: smaller;
}

/* #contentWarning {
  background-color: black;
  width: 100%;
}

#contentWarning::backdrop {
  background-color: black;
}

.defragContent:has(#contentWarning[open]) {
  content: "";
} */

#updates {
  /* max-height: 35em; */
}

#updates > .innerBox {
  display: block;
  overflow-y: auto;
  width: 100%;
  padding: 1em;
  max-height: 25em;
}

#updates > .innerBox > p {
  padding: 0.5em 0;
}

.newUpdate > h3 {
  font-size: x-large;
}

.newUpdate {
  background-image: linear-gradient(0deg, #181818, #b46bff);
  padding: 1em;
}

#defragPreview > .innerBox {
  flex-direction: row;
  align-items: center;
  gap: 1em;
}