@font-face {
  font-family: "VT323";
  src: url("http://fonts.cdnfonts.com/css/fortyseven-micro-nbp") format("woff2");
  unicode-range: U+0000-007F; /* Basic ASCII only */
}


.scroll-wrap {
  overflow: hidden;
}

.scroll-left {
  height: 35px;
  position: relative;
  margin-bottom: 15px;
}

.scroll-left p {
  display: inline-block;
  white-space: nowrap;
  position: absolute;
  height: 100%;
  margin: 0;
  line-height: 35px;
  font-family: "Tiny5", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 22px;
  text-align: center;
  /* Starting position */
  transform: translateX(100vw);
  /* Apply animation to this element */
  animation: scroll-left var(--duration, 30s) linear infinite;
}
/* Move it (define the animation) */
@keyframes scroll-left {
  0% {
    transform: translateX(100vw);
  }
  100% {
    transform: translateX(-100vw);
  }
}

body {
  background-color: #fff7fb;
  background-image: url("https://64.media.tumblr.com/b6dde4747e42e8b5dca5ecaf9937ba84/ea5ae618a8388b50-d1/s1280x1920/547567ce98e62d955bd7303cc4d1886daedaab3d.gifv");
  font-family: "VT323", sans-serif;
}

p {
  font-family: "BauSF", sans-serif;
  color: white;
}

code {
    overflow-wrap: anywhere;
    text-wrap-mode: wrap;
}

#container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 1200px;
  margin: 0 auto;
  padding: 3px;
}

#box {
  width: 98%;
  background-color: #000;
  color: #000;
  border: 0 0 0 1px;
  border-color: solid #5a21e7;
  border-radius: 25px;
  margin: 8px 0 8px 0;
}

#header {
  margin-bottom: 10px;
  padding: 10px 10px 10px 15px;
  border-bottom: 1px solid #5a21e7;
  background-image: linear-gradient(to right, #5a21e7, #000);
  border-radius: 25px;
  color: #fff;
  letter-spacing: 3px;
  font-family: "Tiny5", sans-serif;
  font-weight: 400;
  font-style: normal;
}

#header h1 {
  margin: 0px;
}

#side {
  float: left;
  width: 350px;
  padding: 0px 0px 5px 10px;
  overflow: visible;
  border-radius: 25px;
}

.sidebox {
  margin: 0px 0px 5px 0px;
  border-radius: 25px;
}

.sidecontent {
  padding: 0px 0px 0px 5px;
  color: #6e5057;
  font-size: 17px;
  letter-spacing: 1px;
}

ul { padding-left: 10px !important;}

.sidecontent ul,
li {
  margin: 15px 0px 15px 0px;
  list-style-type: none;
  padding: 0px;
  color: white;
  font-size: 22px;
}

.reading {
  position: relative;
}

.reading span {
  display: none;
  background: #b93b7a;
	border-radius: .4em;
  padding: 10px;
}

.reading:hover span {
  position:absolute;
  display:block;
  top: 50%;
  left: 150%;
  -moz-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index:1;
  width: 300px;
}

.reading:hover span:after{ /*the span will display just on :hover state*/
    content:'';
    position:absolute;
    width:20px;
    height:20px;
    background:#b93b7a;
    top: 50%;
    left: 0;
    -moz-transform: translate(-50%, -50%) rotate(135deg);
    -webkit-transform: translate(-50%, -50%) rotate(135deg);
    transform: translate(-50%, -50%) rotate(135deg);
    z-index: -1;
  }

a {
  text-decoration: none;
  color: #5a21e7;
}

a:visited {
  color: #5a21e7;
}

a:hover {
  text-shadow: 0px 0px 2px #78beff;
}

#scrollcontainer {
  padding: 5px;
}

#scrolly {
  overflow: scroll;
  overflow-x: hidden;
  width: 110px;
  height: 110px;
  border: 1px solid #5a21e7;
  margin: 0 auto;
  text-align: center;
}

#scrollyheader {
  margin: 0px;
  border-bottom: 1px dotted #5a21e7;
}

#main {
  float: right;
  width: 800px;
  overflow: hidden;
  padding: 0px 10px 5px 0px;
}

.mainboxescontent p, .mainboxescontent ul,.mainboxescontent li {
  font-family: 'Courier New', Courier, monospace;
  clear: right;
  font-size: 19px;
  line-height: 1.5;
}

.mainboxes {
  border-radius: 25px;
  padding: 0px;
  margin: 0px 0px 5px 0px;
}

.subheader {
  background-image: linear-gradient(to right, #5a21e7, #000);
  border-radius: 25px;
  border-bottom: 1px solid #5a21e7;
  padding: 3px 3px 3px 9px;
  color: #fff;
  letter-spacing: 3px;
}

.subheader h3 {
  margin: 0px;
}

.mainboxescontent {
  padding: 0px 15px 0px 15px;
  color: #5a21e7;
  font-size: 17px;
}

.pixel-corners {
  clip-path: polygon(
    0px calc(100% - 20px),
    4px calc(100% - 20px),
    4px calc(100% - 12px),
    8px calc(100% - 12px),
    8px calc(100% - 8px),
    12px calc(100% - 8px),
    12px calc(100% - 4px),
    20px calc(100% - 4px),
    20px 100%,
    calc(100% - 20px) 100%,
    calc(100% - 20px) calc(100% - 4px),
    calc(100% - 12px) calc(100% - 4px),
    calc(100% - 12px) calc(100% - 8px),
    calc(100% - 8px) calc(100% - 8px),
    calc(100% - 8px) calc(100% - 12px),
    calc(100% - 4px) calc(100% - 12px),
    calc(100% - 4px) calc(100% - 20px),
    100% calc(100% - 20px),
    100% 20px,
    calc(100% - 4px) 20px,
    calc(100% - 4px) 12px,
    calc(100% - 8px) 12px,
    calc(100% - 8px) 8px,
    calc(100% - 12px) 8px,
    calc(100% - 12px) 4px,
    calc(100% - 20px) 4px,
    calc(100% - 20px) 0px,
    20px 0px,
    20px 4px,
    12px 4px,
    12px 8px,
    8px 8px,
    8px 12px,
    4px 12px,
    4px 20px,
    0px 20px
  );
}

.pixel-corners-small {
  clip-path: polygon(
    0px calc(100% - 8px),
    4px calc(100% - 8px),
    4px calc(100% - 4px),
    8px calc(100% - 4px),
    8px 100%,
    calc(100% - 8px) 100%,
    calc(100% - 8px) calc(100% - 4px),
    calc(100% - 4px) calc(100% - 4px),
    calc(100% - 4px) calc(100% - 8px),
    100% calc(100% - 8px),
    100% 8px,
    calc(100% - 4px) 8px,
    calc(100% - 4px) 4px,
    calc(100% - 8px) 4px,
    calc(100% - 8px) 0px,
    8px 0px,
    8px 4px,
    4px 4px,
    4px 8px,
    0px 8px
  );
}

.pixel-corners-border,
.pixel-corners-border--wrapper {
  clip-path: polygon(
    0px calc(100% - 20px),
    4px calc(100% - 20px),
    4px calc(100% - 12px),
    8px calc(100% - 12px),
    8px calc(100% - 8px),
    12px calc(100% - 8px),
    12px calc(100% - 4px),
    20px calc(100% - 4px),
    20px 100%,
    calc(100% - 20px) 100%,
    calc(100% - 20px) calc(100% - 4px),
    calc(100% - 12px) calc(100% - 4px),
    calc(100% - 12px) calc(100% - 8px),
    calc(100% - 8px) calc(100% - 8px),
    calc(100% - 8px) calc(100% - 12px),
    calc(100% - 4px) calc(100% - 12px),
    calc(100% - 4px) calc(100% - 20px),
    100% calc(100% - 20px),
    100% 20px,
    calc(100% - 4px) 20px,
    calc(100% - 4px) 12px,
    calc(100% - 8px) 12px,
    calc(100% - 8px) 8px,
    calc(100% - 12px) 8px,
    calc(100% - 12px) 4px,
    calc(100% - 20px) 4px,
    calc(100% - 20px) 0px,
    20px 0px,
    20px 4px,
    12px 4px,
    12px 8px,
    8px 8px,
    8px 12px,
    4px 12px,
    4px 20px,
    0px 20px
  );
  position: relative;
}
.pixel-corners-border {
  border: 4px solid transparent;
}
.pixel-corners-border--wrapper {
  width: fit-content;
  height: fit-content;
}
.pixel-corners-border--wrapper .pixel-corners-border {
  display: block;
  clip-path: polygon(
    4px 20px,
    8px 20px,
    8px 12px,
    12px 12px,
    12px 8px,
    20px 8px,
    20px 4px,
    calc(100% - 20px) 4px,
    calc(100% - 20px) 8px,
    calc(100% - 12px) 8px,
    calc(100% - 12px) 12px,
    calc(100% - 8px) 12px,
    calc(100% - 8px) 20px,
    calc(100% - 4px) 20px,
    calc(100% - 4px) calc(100% - 20px),
    calc(100% - 8px) calc(100% - 20px),
    calc(100% - 8px) calc(100% - 12px),
    calc(100% - 12px) calc(100% - 12px),
    calc(100% - 12px) calc(100% - 8px),
    calc(100% - 20px) calc(100% - 8px),
    calc(100% - 20px) calc(100% - 4px),
    20px calc(100% - 4px),
    20px calc(100% - 8px),
    12px calc(100% - 8px),
    12px calc(100% - 12px),
    8px calc(100% - 12px),
    8px calc(100% - 20px),
    4px calc(100% - 20px)
  );
}
.pixel-corners-border::after,
.pixel-corners-border--wrapper::after {
  content: "";
  position: absolute;
  clip-path: polygon(
    0px calc(100% - 20px),
    4px calc(100% - 20px),
    4px calc(100% - 12px),
    8px calc(100% - 12px),
    8px calc(100% - 8px),
    12px calc(100% - 8px),
    12px calc(100% - 4px),
    20px calc(100% - 4px),
    20px 100%,
    calc(100% - 20px) 100%,
    calc(100% - 20px) calc(100% - 4px),
    calc(100% - 12px) calc(100% - 4px),
    calc(100% - 12px) calc(100% - 8px),
    calc(100% - 8px) calc(100% - 8px),
    calc(100% - 8px) calc(100% - 12px),
    calc(100% - 4px) calc(100% - 12px),
    calc(100% - 4px) calc(100% - 20px),
    100% calc(100% - 20px),
    100% 20px,
    calc(100% - 4px) 20px,
    calc(100% - 4px) 12px,
    calc(100% - 8px) 12px,
    calc(100% - 8px) 8px,
    calc(100% - 12px) 8px,
    calc(100% - 12px) 4px,
    calc(100% - 20px) 4px,
    calc(100% - 20px) 0px,
    20px 0px,
    20px 4px,
    12px 4px,
    12px 8px,
    8px 8px,
    8px 12px,
    4px 12px,
    4px 20px,
    0px 20px,
    0px 50%,
    4px 50%,
    4px 20px,
    8px 20px,
    8px 12px,
    12px 12px,
    12px 8px,
    20px 8px,
    20px 4px,
    calc(100% - 20px) 4px,
    calc(100% - 20px) 8px,
    calc(100% - 12px) 8px,
    calc(100% - 12px) 12px,
    calc(100% - 8px) 12px,
    calc(100% - 8px) 20px,
    calc(100% - 4px) 20px,
    calc(100% - 4px) calc(100% - 20px),
    calc(100% - 8px) calc(100% - 20px),
    calc(100% - 8px) calc(100% - 12px),
    calc(100% - 12px) calc(100% - 12px),
    calc(100% - 12px) calc(100% - 8px),
    calc(100% - 20px) calc(100% - 8px),
    calc(100% - 20px) calc(100% - 4px),
    20px calc(100% - 4px),
    20px calc(100% - 8px),
    12px calc(100% - 8px),
    12px calc(100% - 12px),
    8px calc(100% - 12px),
    8px calc(100% - 20px),
    4px calc(100% - 20px),
    4px 50%,
    0px 50%
  );
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: #5a21e7;
  display: block;
  pointer-events: none;
}
.pixel-corners-border::after {
  margin: -4px;
}

.pixel-corners-border-small,
.pixel-corners-border-small--wrapper {
  clip-path: polygon(
    0px calc(100% - 8px),
    2px calc(100% - 8px),
    2px calc(100% - 4px),
    4px calc(100% - 4px),
    4px calc(100% - 2px),
    8px calc(100% - 2px),
    8px 100%,
    calc(100% - 8px) 100%,
    calc(100% - 8px) calc(100% - 2px),
    calc(100% - 4px) calc(100% - 2px),
    calc(100% - 4px) calc(100% - 4px),
    calc(100% - 2px) calc(100% - 4px),
    calc(100% - 2px) calc(100% - 8px),
    100% calc(100% - 8px),
    100% 8px,
    calc(100% - 2px) 8px,
    calc(100% - 2px) 4px,
    calc(100% - 4px) 4px,
    calc(100% - 4px) 2px,
    calc(100% - 8px) 2px,
    calc(100% - 8px) 0px,
    8px 0px,
    8px 2px,
    4px 2px,
    4px 4px,
    2px 4px,
    2px 8px,
    0px 8px
  );
  position: relative;
}
.pixel-corners-border-small {
  border: 2px solid transparent;
}
.pixel-corners-border-small--wrapper {
  width: fit-content;
  height: fit-content;
}
.pixel-corners-border-small--wrapper .pixel-corners-border-small {
  display: block;
  clip-path: polygon(
    2px 8px,
    4px 8px,
    4px 4px,
    8px 4px,
    8px 2px,
    calc(100% - 8px) 2px,
    calc(100% - 8px) 4px,
    calc(100% - 4px) 4px,
    calc(100% - 4px) 8px,
    calc(100% - 2px) 8px,
    calc(100% - 2px) calc(100% - 8px),
    calc(100% - 4px) calc(100% - 8px),
    calc(100% - 4px) calc(100% - 4px),
    calc(100% - 8px) calc(100% - 4px),
    calc(100% - 8px) calc(100% - 2px),
    8px calc(100% - 2px),
    8px calc(100% - 4px),
    4px calc(100% - 4px),
    4px calc(100% - 8px),
    2px calc(100% - 8px)
  );
}
.pixel-corners-border-small::after,
.pixel-corners-border-small--wrapper::after {
  content: "";
  position: absolute;
  clip-path: polygon(
    0px calc(100% - 8px),
    2px calc(100% - 8px),
    2px calc(100% - 4px),
    4px calc(100% - 4px),
    4px calc(100% - 2px),
    8px calc(100% - 2px),
    8px 100%,
    calc(100% - 8px) 100%,
    calc(100% - 8px) calc(100% - 2px),
    calc(100% - 4px) calc(100% - 2px),
    calc(100% - 4px) calc(100% - 4px),
    calc(100% - 2px) calc(100% - 4px),
    calc(100% - 2px) calc(100% - 8px),
    100% calc(100% - 8px),
    100% 8px,
    calc(100% - 2px) 8px,
    calc(100% - 2px) 4px,
    calc(100% - 4px) 4px,
    calc(100% - 4px) 2px,
    calc(100% - 8px) 2px,
    calc(100% - 8px) 0px,
    8px 0px,
    8px 2px,
    4px 2px,
    4px 4px,
    2px 4px,
    2px 8px,
    0px 8px,
    0px 50%,
    2px 50%,
    2px 8px,
    4px 8px,
    4px 4px,
    8px 4px,
    8px 2px,
    calc(100% - 8px) 2px,
    calc(100% - 8px) 4px,
    calc(100% - 4px) 4px,
    calc(100% - 4px) 8px,
    calc(100% - 2px) 8px,
    calc(100% - 2px) calc(100% - 8px),
    calc(100% - 4px) calc(100% - 8px),
    calc(100% - 4px) calc(100% - 4px),
    calc(100% - 8px) calc(100% - 4px),
    calc(100% - 8px) calc(100% - 2px),
    8px calc(100% - 2px),
    8px calc(100% - 4px),
    4px calc(100% - 4px),
    4px calc(100% - 8px),
    2px calc(100% - 8px),
    2px 50%,
    0px 50%
  );
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: #5a21e7;
  display: block;
  pointer-events: none;
}
.pixel-corners-border-small::after {
  margin: -2px;
}

.matrix-container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  z-index: 2; /* Ensure it stays above the rain effect */
}

.matrix-text {
  color: #fff;
  font-size: 32px;
  font-family: "Tiny5", sans-serif;
  position: relative;
  text-shadow:
    0 0 10px #fff,
    0 0 20px #fff,
    0 0 30px #fff;
  z-index: 2; /* Ensure it stays above the rain effect */
}

.matrix-text::before {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 110%;
  height: 100%;
  animation: glitch 2s infinite;
  clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
  transform: translate(-2px, -2px);
  color: #fff;
  text-shadow:
    0 0 5px #fff,
    0 0 15px #fff;
  background: repeating-linear-gradient(
    0deg,
    rgba(169, 144, 232, 0.1) 0,
    rgba(169, 144, 232, 0.2) 2px,
    transparent 4px
  );
}

.rain {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    0deg,
    rgba(255, 255, 255, 0.1) 0,
    rgba(255, 255, 255, 0.2) 2px,
    transparent 4px
  );
  animation: rain 6s linear infinite;
  z-index: 1; /* Place it behind the text */
}

/* Animation for the rain effect */
@keyframes rain {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(100%);
  }
}

/* Glitch effect for the text */
@keyframes glitch {
  0%,
  100% {
    clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
    transform: translate(0);
  }
  33% {
    clip-path: polygon(0 0, 100% 0, 100% 15%, 0 15%);
    transform: translate(-5px, -5px);
  }
  66% {
    clip-path: polygon(0 85%, 100% 85%, 100% 100%, 0 100%);
    transform: translate(5px, 5px);
  }
}

#footer {
  clear: both;
  padding: 3px;
  background-image: linear-gradient(to right, #5a21e7, #000);
  border-radius: 25px;
  color: #fff;
  font-size: 14px;
}

#footer p {
  margin: 0 0 0 8px;
}

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background-color: #fff7fb;
}

::-webkit-scrollbar-thumb {
  background-color: #5a21e7;
}

.left-pixel-art {
  bottom: 0;
  right: 0;
  position: fixed;
  width: 20vw;
  z-index: -1;
}
#credit {
  font-size: 12px;
  position: fixed;
  bottom: 0;
  right: 0;
}