/* OVERRIDES */

ul {
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 10px;
}

/* END OVERRIDES */

body {
  margin: 0;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: hidden;
  fill: #333;
  background-image: url("public/frame2.jpg");
  background-repeat: repeat;
  background-color: #333;
}

header {
  position: relative;
  z-index: 2;
  height: 24dv;
}

header svg {
  height: 24dvh;
  min-height: 30%;
  z-index: 3;

}

.teaser {
  display: inline-flex;
  position: absolute;
  margin: 0 0 0 -10vh;
  width: 45vw;
  min-width: 70%;
  max-width: 90%;
  z-index: 102222100;
}

/* HEADER ELEMENTS */
.copyright-text {
  font-family: "Lucida Console", Monaco, monospace;
  position: absolute;
  font-size: 1.1vh;
  top: 0;
  background-color: #c0c0c0;
  right: -10px;
  text-align: end;
  padding: 0 15px;
  z-index: 1000;
}

.copyright img {
  right: 10%;
  position: absolute;
  margin-top: 5dvh;
  min-height: 30%;
  width: 15%;
  z-index: 1000;
}

.right_box {
  position: absolute;
  top: 0;
  right: 0;
  width: 100vw;
  height: 20vh;
  background-color: #dadada;
  z-index: 5;
}

.floating-image {
  position: absolute;
  left: 0;
  width: 100vw;
  max-width: 70%;
  min-width: 100%;
  height: 80%;
  z-index: 1000;
}

.inverted {
  filter: invert(1);
}

.stroke {
  width: 200vw;
  background-color: rgb(26, 26, 26);
  position: absolute;
  left: 0;
  height: 0.5vh;
}

#top-s {
  position: relative;
  top: 0;
}

#mast-s {
  height: 100vh;
  width: 0.3vh;
  top: 0;
  margin-left: -18px;
  z-index: 3888;
  position: absolute;
}

#navbar-s {
  height: 100vh;
  width: 0.5vh;
  top: 0;
  margin-left: -4px;
  z-index: 4;
  position: absolute;
}

/* HEADER ELEMENTS END */

/* MAST */

.right-mast {
  bottom: 0;
  z-index: 5;
  margin-left: 18px;
  position: absolute;
  left: 0;
  margin-top: 24dvh;
}

.options {
  position: relative;
  height: 3dvh;
  margin-bottom: 1.25dvh;
}

.options ul {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 10px;
}

.options li {
  flex: 0 0 auto;
}

.options a.nav-button {
  display: inline-block;
  white-space: nowrap;
  margin-left: 0;
  padding: 1dvh 10px;
}

#art-nav {
  width: auto;
  min-width: 0;
}

.nav-button {
  margin-left: 1dvw;
  top: 2dvh;
  line-height: 1.1;
  padding: 1dvh 1px;
  background-color: #c0c0c0;
  border: 1px solid #dfdfdf;
  font-family: IBM-Plex, monospace;
  font-size: 14px;
  font-weight: bold;
  color: #000;
  text-decoration: none;
  box-shadow:
    1px 1px 0 #ffffff,
    -1px -1px 0 #7a7a7a,
    inset 1px 1px 0 #dfdfdf,
    inset -1px -1px 0 #7a7a7a;
  cursor: pointer;
  transition: background 0.1s;
  position: relative;
  z-index: 6;
  box-shadow: -0.3dvw 0.3dvh 1px rgba(0.45, 15, 0.45, 0.45);
}

.flipped {
  transform: scaleY(-1);
}

.nav-button:hover,
.home-button:hover,
#art-nav:hover {
  background-color: #d8d8d8;
}

.nav-button:active,
.home-button:active {
  background-color: #a0a0a0;
  box-shadow:
    inset 1px 1px 0 #7a7a7a,
    inset -1px -1px 0 #ffffff;
}

#art-nav {
  width: 6dvw;
  min-width: 5dvw;
}

#swap {
  position: absolute;
  width: 8vw;
  height: 8vh;
  max-width: 60px;
  min-width: 20px;
  z-index: 102222;
  margin: 15px 15px 0 0;
  right: 0;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: -o-crisp-edges;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  -ms-interpolation-mode: nearest-neighbor;
  filter: invert(0);
  padding: 2px 2px;
  box-shadow: none;
}

/* COLUMN ELEMENTS */
.svg-container {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
}

.rectangles {
  position: absolute;
}

#right-column {
  z-index: 300;
  top: 0;
}

.right-rect {
  height: 100%;
  width: auto;
}

.column {
  margin: 0 auto;
  height: 200vh;
  width: 90vw;
  max-width: 1200px;
  background-color: #dbdbdb;
  z-index: 1;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

.toggled {
  background-color: #141414;
}

.column-header {
  text-align: center;
  width: 250px;
  margin: -10px 0 0 -200px;
  /* No extra margin needed */
  position: absolute;
  font-family: IBM-Plex, monospace;
  z-index: 10;
  color: #333;
}

.home-button {
  padding: 1px 8px;
  background-color: #c0c0c0;
  max-height: 2vh;
  /* Full width so the content is centered */
  border: 1px solid #dfdfdf;
  font-family: IBM-Plex, monospace;
  font-size: 7pt;
  font-weight: bold;
  color: #000;
  text-decoration: none;
  box-shadow:
    1px 1px 0 #ffffff,
    -1px -1px 0 #7a7a7a,
    inset 1px 1px 0 #dfdfdf,
    inset -1px -1px 0 #7a7a7a;
  cursor: pointer;
  transition: background 0.1s;
  position: absolute;
  z-index: 6;
}

.column-content {
  width: 50%;
  left: 0;
  position: relative;
  top: 20px;
  left: 90px;
  font-family: IBM-Plex, monospace;
  font-size: 5px;
  z-index: 10;
  color: #333;
}

.gif {
  margin: -2% -2%;
  width: 10%;
  height: 12%;
}

.second-column {
  text-align: left;
  line-height: 1.6;
}

.second-column p {
  margin: 0 0 1rem;
}

.second-column .entry-date {
  margin: 0 0 1rem;
  opacity: 0.65;
}
.second-column img {
  width: 30vw;
  height: 30vh;
}

.third-column {
  padding: 2%;
  width: 100%;
  border: .3vh dashed #202020;
  /* Optional: Dashed border */
}

.column-content p {
  align-content: center;
  font-size: 14px;
  text-overflow: inherit;
  line-height: 1;
}

.intro {
  text-align: center;
  font-size: 1vw;
  text-overflow: inherit;
  line-height: 1;
}

.spacer {
  margin: 6dvh;
}

.c-stroke {
  width: 0.5px;
  background-color: #55be5d;
  position: absolute;
  height: 100vh;
}

#c-div {
  left: 5;
  width: 1px;
}

#inner-div {
  right: -10%;
  /* room for heading */
  width: 4px;
  height: 100%;
  z-index: 6;
  box-shadow:
    1px 1px 0 #ffffff,
    -1px -1px 0 #7a7a7a,
    inset 1px 1px 0 #dfdfdf,
    inset -1px -1px 0 #7a7a7a;
}

.download-button {
  display: inline-block;
  font-size: 14px;
  margin-top: 1rem;
  padding: 10px 16px;
  border: 1px solid #888;
  border-radius: 3px;
  background: #222;
  color: #eee;
  text-decoration: none;
}

.download-button:hover,
.download-button:focus-visible {
  background: #383838;
  border-color: #eee;
}
/* BLACK NOISE TEASER */
.bn {
  margin: -1vh 0 0 -5%;
  max-width: 100%;
  max-height: 100vh;
  position: relative;
  background-color: #000;
}

.column-links {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.link {
  display: flex;
  flex: 0 0 auto;
}

.link img {
  display: block;
  width: 20px;
  height: auto;
}

.column-content #gf {
  margin: 4vh 15vw 0 20vw;
  max-width: 100%;
  filter: invert(0);

}

.link img #ret {
  margin: 0 0 0 -5%;
  width: 40px;
}

.column-content #discord {
  margin: 50vh 0vw 50vh 30vw;
  filter: invert(0);
}

.column-content #bandcamp {
  margin: 50vh 0vw 50vh 30vw;
  filter: invert(0);
}

.column-content #spotify {
  margin: 50vh 0vw 50vh 30vw;
  filter: invert(0);
}