@import url("https://fonts.googleapis.com/css2?family=Chivo+Mono&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Chivo&display=swap");

:not(br)::selection {
  background-color: rgba(138, 43, 226, 0.5);
}

.highlight::selection {
  text-decoration: underline var(--textColor) 0.1em;
}

* {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

*::-webkit-scrollbar {
  display: none;
}

:root {
  --textColor: #d9d4cc;
  --terminalHeight: 20vw;
  --terminalWidth: 40vw;
}

body {
  display: flex;
  flex-direction: column;

  overflow-x: hidden;

  background-color: black;
  color: var(--textColor);
  /* font-family: "Chivo Mono", monospace; */
  font-family: "Chivo", monospace;
  margin: 0;
  align-items: center;
}

canvas {
  width: 100vw;
  height: 100vh;
  z-index: -2;
  position: fixed;
  top: 0%;
}

#start {
  width: 100vw;
  height: 100vh;
}

.purple {
  color: blueviolet;
}

.highlight {
  color: blueviolet;
  background-color: hsla(271, 74%, 6%, 0.5);
  border-radius: 0.5ex;
}

#row3 {
  position: absolute;
  bottom: 0%;
  transform: translateX(calc(50vw - 50%));
}

#title {
  margin-left: 10vw;
  transform: translateY(calc(40vh - 50%));
}

.title {
  text-align: center;
  margin-bottom: 7.5vh;
  margin-top: 0;
}

.title > a {
  text-decoration: underline;
}

.title > a:active {
  text-decoration: underline blueviolet;
}

#blogContainer > .title {
  margin-bottom: 3vh;
}

#contact {
  margin-top: 10vh;
  width: 100vw;
  padding: 2vh 0 2vh 0;
  background-color: #0f0014bf;
  /* border-radius: 10px 10px 0 0; */
  text-align: center;
  backdrop-filter: blur(5px) brightness(2);
}

#contactlinks {
  margin-top: 2vh;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 4vw;
  row-gap: 2vh;
  text-wrap: nowrap;
}

.contactlink {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
  width: 2vw;
  text-decoration: inherit;
  color: inherit;
  font-size: smaller;
  text-align: center;
}

.contactlink > img {
  width: 100%;
  margin-bottom: 1vh;
}

#footer {
  text-align: right;
  background-color: black;
  color: darkgrey;
  font-size: 0.75em;
  padding-right: 1vw;
  padding-left: 1vw;
  display: flex;
  width: 98vw;
  justify-content: flex-end;
}

#version {
  cursor: pointer;
  width: fit-content;
  text-align: right;
}

a {
  text-decoration: none;
}

.article {
  /* margin-left: 10vw;
  margin-right: 10vw; */
  margin-top: 5vh;
  width: 80vw;
  border-radius: 15px;
  background-color: hsla(271, 76%, 30%, 0.15);
  z-index: 1;
  padding: 4vh;
  overflow: hidden;
  position: relative;
}

.article::before {
  content: "";
  z-index: -1;
  position: absolute;
  transform: translate(-4vh, -4vh);
  width: 88vw;

  height: 100%;
  border-radius: 15px;

  -webkit-backdrop-filter: blur(2px) brightness(1);
  backdrop-filter: blur(2px) brightness(1);
}

.paragraph {
  margin-top: 3%;

  color: var(--textColor);
}
.paragraph > ul {
  list-style-type: "> ";
  width: fit-content;
}

.image-container {
  cursor: default;
  position: relative;
  overflow: hidden;
  /* max-width: 40vw; */
  align-self: center;
}

.showoff {
  margin-top: 3%;
  display: flex;
  column-gap: 3%;
  row-gap: 2.5vw;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
}

.art-showoff {
  margin-top: 3%;
  display: flex;
  flex-direction: row;
  column-gap: 1vw;
}

.art-column {
  flex-grow: 1;
  row-gap: 1vw;
  display: flex;
  flex-direction: column;
  /* height: 30vh; */
}

.art-item {
  padding: 3%;

  background-color: hsla(271, 76%, 30%, 0.15);
  border-radius: 15px;
  padding: 3%;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  cursor: pointer;
  text-align: center;
}

.art-item > img,
.art-item > video {
  max-height: 30vh;
  max-width: 100%;
}

.project {
  display: flex;
  flex-direction: column;
  background-color: hsla(271, 76%, 30%, 0.15);
  border-radius: 15px;
  padding: 3%;
  width: 42.5%;
  min-width: 400px;
  gap: 1.5vh;
  position: relative;
  overflow: hidden;
  align-items: center;

  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

/* .project::before {
  content: "";
  z-index: -1;
  display: inherit;
  position: absolute;
  width: 100%;
  height: 100%;
  transform: translate(-3%, -3%);

  background-image: url("../media/noise.png");
  background-size: 10;
  opacity: 0.03;
} */

.featured > .project {
  max-width: none;
}

.featured > .project > .image-container {
  max-width: 40vw;
}

.project-image {
  max-width: 100%;
  border-radius: 10px;
  max-height: 20vw;
}

.project-buttons {
  width: 100%;
  margin-top: 5%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;
  /* cursor: pointer; */
}

.project-buttons > a {
  text-decoration: inherit;
  color: inherit;
  padding: 3%;
  background-color: hsl(271, 76%, 6%);
  border-radius: 10px;
  color: blueviolet;
  text-align: center;
  flex-grow: 1;
  max-width: 25%;
}

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

.projectTitle > h1 {
  width: fit-content;
  padding-left: 0.5ex;
  padding-right: 0.5ex;
  margin-top: 0;
}

#main {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100vw;
  align-items: center;
  overflow: hidden;
}

.status-banner {
  position: absolute;
  width: 250px;
  transform: translate(50%, -50%) rotate(45deg);
  top: 70px;
  right: 70px;

  text-align: center;
  font-size: larger;
  padding: 2%;

  filter: drop-shadow(0 0 10px black);
}

.status-banner > p {
  margin: 0;
}

.done-banner {
  background-color: rgb(0, 200, 0);
}

.wip-banner {
  background: repeating-linear-gradient(
    60deg,
    #ffff00,
    #ffff00 50px,
    #000000 50px,
    #000000 100px
  );
  color: #000000;
  /* text-shadow: 0 0 3px black; */
}

.wip-banner > p {
  background-color: #ffff00;
}

.abandoned-banner {
  background-color: #ff0000;
}

.undecided-banner {
  background-color: #ffa500;
}

.hover-banner {
  background-color: rgba(137, 43, 226, 0.05);
  backdrop-filter: blur(5px) brightness(1.1);
}

.page-buttons {
  margin-top: 5%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;
}

.page-link {
  text-align: center;

  display: block;
  padding: 2vh 2vw 2vh 2vw;
  font-size: larger;
  text-decoration: inherit;
  color: blueviolet;
  border-radius: 10px;
  background-color: #000000;
}

.blog-page-buttons {
  margin-top: 5%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}

.blog-page-link {
  text-align: center;

  display: block;
  padding: 2vh 2vw 2vh 2vw;
  font-size: larger;
  text-decoration: inherit;
  color: blueviolet;
  border-radius: 10px;
  background-color: #000000;
  border: none;
  cursor: pointer;
  min-width: 4vw;
}

.off-blog-page-link {
  filter: grayscale();
  cursor: default;
}

#dateDisplay {
  margin-top: 0;
}

#backbutton {
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  white-space: nowrap;
  height: fit-content;
  border-radius: 0px 0px 15px 0px;
  background-color: hsla(271, 76%, 30%, 0.5);
  backdrop-filter: blur(5px) brightness(2);
}

#backbutton > a {
  width: max-content;

  color: var(--textColor);
  text-align: center;
  width: 100%;
  height: 100%;
  padding: 2ex;
}

#art-modal {
  z-index: 100;
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: #0000007f;
  display: flex;
  justify-content: center;
  align-items: center;
  /* transition: all 10s; */
}

#art-modal.modal-dark {
  /* background-color: #0000007f; */
  animation-name: darken;
  animation-duration: 0.5s;
}

@keyframes darken {
  from {
    background-color: #00000000;
  }
  to {
    background-color: #0000007f;
  }
}

#modal-content {
  animation-name: zoom;
  animation-duration: 1s;
}

@keyframes zoom {
  from {
    transform: scale(0) rotate3D(1, 1, 1, 0);
  }
  to {
    transform: scale(1) rotate3D(1, 1, 1, 360deg);
  }
}

#blogContainer {
  min-height: 60vh;
}

#terminalHolder {
  width: 100%;
  height: 100%;
  position: fixed;
}

#terminal {
  z-index: 1000;
  display: none;
  font-family: monospace;
  color: #9a9a9a;
  position: fixed;
  width: var(--terminalWidth);
  height: var(--terminalHeight);
  top: 25vh;
  left: 25vw;

  border-radius: 0.2vw;
  box-shadow: 0 0 10px #aaa;
  overflow-x: hidden;
  overflow-y: scroll;

  min-width: 10vw;
  min-height: 10vh;

  resize: both;
}

#terminalheader {
  z-index: 1;
  position: relative;
  top: 0;
  left: 0;
  background-color: #3a3a3a;
  width: 100%;
  text-align: center;
  justify-content: center;
  cursor: move;
  height: 3ex;
  user-select: none;
}

#terminalBody {
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 5px;
  width: calc(100% - 10px);
  height: calc(100% - 3ex - 0.4vw);

  border-radius: 0.2vw;

  background-color: #000000;
  word-break: break-all;
  overflow-y: scroll;
  align-items: end;
}

#terminalUserInput {
  outline: none;
  min-width: 20px;
}

#terminalText {
  white-space: pre-wrap;
  word-break: break-all;
}

.terminalWriting::selection {
  background-color: #999;
  color: #000;
}
br::selection {
  display: none !important;
}

#tmpSize {
  width: 100vw;
  height: 200vh;
}

#terminalClose {
  z-index: 1;
  background-color: #ff0000d9;
  color: #000;
  border-radius: 100%;
  height: 2.5ex;
  width: 2.5ex;
  position: absolute;
  top: 0.25ex;
  right: 0.25ex;
  text-align: center;
  cursor: pointer;
}

.terminalOpenAnim {
  animation-name: TerminalOpen;
  animation-duration: 1s;
}

.terminalCloseAnim {
  animation-direction: reverse;
  animation-name: TerminalOpen;
  animation-duration: 1s;
}

@keyframes TerminalOpen {
  0% {
    transform: translate(calc(var(--terminalWidth) / 2), 0);
    height: 3ex;
    width: 0;

    min-width: 0vw;
    min-height: 0vh;
  }
  60% {
    transform: translate(0, 0);

    width: var(--terminalWidth);
    height: 3ex;
    min-width: 0vw;
    min-height: 0vh;
  }
  100% {
    height: var(--terminalHeight);
    min-width: 10vw;
    min-height: 10vh;
  }
}