html {
  --black: black;
  --white: rgb(255, 255, 255);
  --teal: rgb(89, 239, 229);
  --MainC1: rgb(225, 86, 58);
  --Pink: rgb(251, 34, 111);
  --factoid: rgb(185, 185, 185);
  --darkteal: rgb(89, 156, 152);
  height: 100vh;
  font-size: 0.8em;
  font-weight: bolder;
}

body {
  background-color: var(--black);
  height: 99vh;
  font-family: "Monaco", monospace;
}

canvas {
  background: black;
  width: 300%;
  height: 300%;
  display: block;
  position: fixed;
  z-index: -1;

  transform: rotate(-30deg);

  margin-left: auto;
  margin-right: auto;
  left: -100%;
  top: -100%;
  text-align: center;
}
@media screen and (min-height: 1) {
  body {
    font-size: 0.4em;
  }
}

@media screen and (min-height: 300px) {
  body {
    font-size: 0.5em;
  }
}

@media screen and (min-height: 500px) {
  body {
    font-size: 0.8em;
  }
}

@media screen and (min-height: 600px) {
  body {
    font-size: 1em;
  }
}

@media screen and (min-height: 700px) {
  body {
    font-size: 1.2em;
  }
}

@media screen and (min-height: 800px) {
  body {
    font-size: 1.4em;
  }
}

@media screen and (min-height: 1100px) {
  body {
    font-size: 1.7em;
  }
}

@media screen and (min-height: 1400px) {
  body {
    font-size: 2em;
  }
}

@media screen and (min-height: 1700px) {
  body {
    font-size: 3em;
  }
}

@media screen and (min-height: 2000px) {
  body {
    font-size: 3.3em;
  }
}

@media screen and (min-height: 4000px) {
  body {
    font-size: 4em;
  }
}

#appBox {
  display: flex;
  flex-direction: column;
  max-width: 23em;
  margin: auto;
  align-items: center;
  gap: 1em;
  /* justify-content: space-evenly; */
  align-content: space-around;
  height: 98vh;

  background-color: rgba(0, 12, 12, 0.1);
  border-radius: 40px;
  /* box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); */
  backdrop-filter: blur(1.3px);
  -webkit-backdrop-filter: blur(8.3px);
  border: 1px solid rgba(0, 0, 0, 0.81);
}

#headerPicture {
  max-height: 20em;
  max-width: 20em;
  width: 100%;
  border-radius: 34%;
  border: 3px var(--MainC1) dashed;
  border-style: outset;
}

#linksDiv {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 85%;
  justify-content: space-around;
}

a {
  text-decoration: none;
}

#linksDiv > a {
  flex: 0 0 31%;
}

.link {
  margin-left: auto;  
  margin-right: auto;  

  max-height: 5em;
  max-width: 5em;

  color: var(--white);

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: end;
}

.icon {
  width: 3em;
  height: 3em;
}

.titleDiv {
  height: 2em;
  font-size: 2.4em;
  position: relative;
  color: var(--MainC1);
  display: flex;
  align-items: inherit;
}

.NameStack {
  position: relative;
}

.titleName {
  display: inline;
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 2; /* z-index determines the stack order (higher values on top) */
}

.titleNamePhonetic {
  display: inline;
  position: absolute; /* Position this element absolutely within the container */
  top: -0.7em;
  left: -1.8em;
  width: 10em;
  font-size: 0.5em;
  z-index: 1; /* This div will be on top because it has a higher z-index */
  opacity: 0.5; /* Optional: make the top div slightly transparent */
}

.mainText {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  /* align-items: center; */
  gap: 5px;
  padding-top: 2em;
}

.factoid {
  /* text-align: center; */
  display: inline;
  color: var(--factoid);
}

.glow {
  transition: color 2s, text-shadow 2s;
  text-align: center;
  text-shadow: var(--Pink) -1px -1px 12px, var(--Pink) 1px 1px 1px,
    var(--Pink) 1px 1px 1px;
}

.glow:hover {
  color: white !important;
  transition: color 0.2s, text-shadow 0.2s;
  text-shadow: var(--teal) -1px -1px 12px, var(--teal) 1px 1px 1px,
    var(--teal) 1px 1px 1px;
}

#appGallery {
  display: flex;
  flex-direction: column;
  max-width: 70em;
  margin: auto;
  align-items: center;
  gap: 1em;
  justify-content: space-evenly;
  align-content: space-around;
  background-color: rgba(0, 12, 12, 0.55);
  border-radius: 40px;
}

.galleryTitle {
  color: var(--teal);
  margin: 1.3em 0 0.3em 0;
  font-size: 1.4em;
}

.galleryContainer {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1em;
}

.imageContainer {
  /* max-width: 30%; */
  flex: 0 0 24%;
}

.imageContainer img,
.imageContainer video {
  max-height: 15em;
  max-width: 100%;
}

.attribution {
  font-size: 0.8em;
}