html {
  overflow-x: hidden;
  margin: 1% 1% 1% 1%;
}

@font-face {
  font-family: "jgs9";
  src: url("jgs9.ttf") format("truetype");
}

@font-face {
  font-family: "jgs7";
  src: url("jgs7.ttf") format("truetype");
}

@font-face {
  font-family: "jgs5";
  src: url("jgs5.ttf") format("truetype");
}

@media (prefers-color-scheme: light) {
  :root {
    --background: #D9D9D9;
    --hilight: #ff00d7;
    --imagetone: #000f13;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #000f13;
    --hilight: #fff;
    --imagetone: #ff00d7;
  }
}

html {
  font-family: "jgs9";
  background-color: var(--background);
  color: var(--hilight);
  overflow-x: none;
  font-size: 9px;
}

a {
  text-decoration: none;
  color: var(--hilight);
}

a:hover {
  text-decoration: underline;
}

.cont_cont {
  position: fixed;
  top: 2vh;
  right: 1%;
  width: 50%;
  height: auto;
}

.image_cont:first-of-type {
  margin: 0px;
}

.image_cont:hover {
  z-index: 9;
  margin-bottom: 60%;
}

.side{
  position: fixed;
  top:1%;left:0%;
  height: 100%;opacity: 14.1%;
pointer-events: none;
}

.image_cont {
  position: relative;
  margin: -60% 0% 0% 0%;
  background: var(--imagetone);
  transition: background 100ms;
  height: 60%;
  border-top: 1px solid var(--background);
}

.image_cont img {
  width: 100%;
  position: relative;
  mix-blend-mode: screen;
  filter: grayscale(100%) contrast(110%) brightness(115%);
  opacity: 1;
  transition: filter 100ms, mix-blend-mode 100ms;
  object-fit: cover;
  display: block;
  height: 100%;
}

.image_cont:hover>img {
  filter: grayscale(0) contrast(100%) brightness(100%);
  mix-blend-mode: normal;
  opacity: 1;
}

.image_cont img:hover {}

pre {
  font-kerning: none;
  letter-spacing: 90;
  margin: 0px;
  display: inline;
  font-family: "jgs7", courier, monospace;
  font-size: 18px;
}

a {
  pointer-events: all;
}

a:hover {
  cursor: pointer;
  text-decoration: underline;
}

a:active {
  text-decoration: underline;
}

a+pre {
  display: none;
}

.shop:hover {
  text-decoration: none;
  background-color: var(--hilight);
  color: var(--imagetone);
}

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 350px) {
  html {
    overflow-x: none;
  }

  body {
    margin: 4.75px;
  }

  pre {
    font-family: "jgs5";
    vertical-align: middle;
    font-size: 9.5px;
    line-height: 9.5px;
  }

  .cont_cont {
    position: relative;
    width: calc(4.75px*60);
    margin: 0px;
  }

  .image_cont {
    margin: 10px 0px 0px 10px;
    position: relative;
    width: 100%;
    background-color: transparent;
  }

  .image_cont>img {
    filter: none;
    mix-blend-mode: normal;
  }
}

@media only screen and (min-width:360px) and (max-width: 400px) {
  html {
    overflow-x: none;
  }

  body {}

  .cont_cont {
    position: relative;
    width: calc(5.7px*60);
    margin: 5px 0px 5px 1%;
  }

  .image_cont {
    margin: 10px 0px 0px 0px;
    position: relative;
    width: calc(5.7px*60);
    background-color: transparent;
  }

  .image_cont>img {
    filter: none;
    mix-blend-mode: normal;
  }

  html {
    margin: 0px;
    margin-top: 5px;
  }

  pre {
    font-family: "jgs5";
    font-size: 10px;
    line-height: 10px;
  }
}
@media only screen and (min-width:380px) and (max-width: 400px) {
  html {
    overflow-x: none;
  }

  body {}

  .cont_cont {
    position: relative;
    width: calc(6.15px*60);
    margin: 6px 0px 6px 1%;
  }

  .image_cont {
    margin: 12px 0px 0px 0px;
    position: relative;
    width: calc(6.15px*60);
    background-color: transparent;
  }

  .image_cont>img {
    filter: none;
    mix-blend-mode: normal;
  }

  html {
    margin: 0px;
    margin-top: 6px;
  }

  pre {
    font-family: "jgs5";
    font-size: 12px;
    line-height: 12px;
  }
}

@media only screen and (min-width:401px) and (max-width: 500px) {
  html {
    overflow-x: none;
  }

  body {}

  .cont_cont {
    position: relative;
    width: calc(6.4px*60);
    margin: 13px 0px 0px 13px;
  }

  .image_cont {
    margin: 13px 0px 0px 0px;
    position: relative;
    width: calc(6.4px*60);
    background-color: transparent;
  }

  .image_cont>img {
    filter: none;
    mix-blend-mode: normal;
  }

  html {
    margin: 0px;
    margin-top: 6.5px;
  }

  pre {
    font-family: "jgs5";
    font-size: 13px;
    line-height: 13px;
  }
}

@media only screen and (min-width:500px) and (max-width: 600px) {
  html {
    overflow-x: none;
  }

  body {}

  .cont_cont {
    position: relative;
    width: calc(8px*60);
    margin: 16px 0px 0px 13px;
  }

  .image_cont {
    margin: 16px 0px 0px 0px;
    position: relative;
    width: calc(8px*60);
    background-color: transparent;
  }

  .image_cont>img {
    filter: none;
    mix-blend-mode: normal;
  }

  html {
    margin: 0px;
    margin-top: 8px;
  }

  pre {
    font-family: "jgs5";
    font-size: 16px;
    line-height: 16px;
  }
}

@media only screen and (min-width: 600px) and (max-width:700px) {
  html {
    overflow-x: none;
  }

  body {}

  .cont_cont {
    position: relative;
    width: calc(10px*60);
    margin: 20px 0px 0px 20px;
  }

  .image_cont {
    margin: 20px 0px 0px 0px;
    position: relative;
    width: calc(10px*60);
    background-color: transparent;
  }

  .image_cont>img {
    filter: none;
    mix-blend-mode: normal;
  }

  html {
    margin: 0px;
    margin-top: 10px;
  }

  pre {
    font-family: "jgs7";
    font-size: 20px;
    line-height: 20px;
  }
}

/* Small devices (portrait tablets and large phones, 700px and up) */
@media only screen and (min-width: 700px) and (max-width:820px) {
  html {
    overflow-x: none;
  }

  body {}

  .cont_cont {
    position: relative;
    width: calc(12.5px*60);
    margin: 23px 0px 0px 23px;
  }

  .image_cont {
    margin: 23px 0px 0px 0px;
    position: relative;
    width: calc(11.5px*60);
    background-color: transparent;
  }

  .image_cont>img {
    filter: none;
    mix-blend-mode: normal;
  }

  html {
    margin: 0px;
    margin-top: 11.5px;
  }

  pre {
    font-family: "jgs7";
    font-size: 23px;
    line-height: 23px;
  }
}