* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  }
html, body {
  font-size: 62.5%;
  height: 100%;
  width: 100%;
  }
  @font-face {
      font-family: 'VG5000';
      src:    url('../fonts/VG5000-Regular_web.eot');
      src:    url('../fonts/VG5000-Regular_web.eot?#iefix') format('embedded-opentype'),
              url('../fonts/VG5000-Regular_web.woff') format('woff'),
              url('../fonts/VG5000-Regular_web.woff2') format('woff2'),
              url('../fonts/VG5000-Regular_web.ttf') format('truetype'),
              url('../fonts/VG5000-Regular_web.svg#svgFontName') format('svg');
      font-weight: normal;
      font-style: normal;
  }
  @font-face {
      font-family: 'notcouriersansregular';
      src: url('../fonts/NotCourierSans-webfont.eot');
      src: url('../fonts/NotCourierSans-webfont.eot?#iefix') format('embedded-opentype'),
      url('../fonts/NotCourierSans-webfont.woff') format('woff'),
      url('../fonts/NotCourierSans-webfont.woff2') format('woff2'),
      url('../fonts/NotCourierSans-webfont.ttf') format('truetype');
      font-weight: normal;
      font-style: normal;
  }
/*
  background: url(".jpg");
  background-repeat: repeat;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;

  font-family: "notcouriersansregular", Courier, monospace;
  font-family: "notcouriersansbold", Courier, monospace;
  font-family: "libre_baskervilleregular", "Palatino Linotype", "Book Antiqua", Palatino, serif;
  font-family: "libre_baskervilleitalic", "Palatino Linotype", "Book Antiqua", Palatino, serif;
  */

body {
  background-color: #ffffff;
  color: black;
  font-family: "VG5000", "Courier", Courier, monospace;
  font-weight: normal;
  font-style: normal;
  font-size: 2rem;
  padding: 1rem;
}
p {
  font-family: "VG5000", "Courier", Courier, monospace;
  font-style: normal;
  letter-spacing: 0.05rem;
}
hr {
  border: 0;
  height: 5rem;
}
a {
  text-decoration: none;
}
.framed {
  border: 0.2rem solid black;
  padding: 0.4rem;
}
.green {
  color: #00c440;
  border-color: #00c440;
}
.white {
  color: #f2f2f2;
  border-color: #f2f2f2;
}
.aqua {
  color: aqua;
  border-color: aqua;
}
.aqua:hover {
  background-color: gray;
}
.orange {
  color: OrangeRed;
  border-color: OrangeRed;
}
.orange a {
  color: black;
}
.orange:hover {
  background-color: OrangeRed;
}
.gray {
  color: #cccccc;
  border-color: #cccccc;
}
.centered{
  margin: 0 auto;
  text-align: center;
}
.flex {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
button {
  cursor: pointer;
  background-color: #c6c7ce;
  border-top: solid 2px #dadbe3;
  border-right: solid 2px #848a8c;
  border-bottom: solid 2px #5c6264;
  border-left: solid 2px #cccccc;
  color: black;
  padding: 0.5rem 1rem;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-family: "VG5000", "Courier", Courier, monospace;
  font-style: normal;
  letter-spacing: 0.05rem;
  font-size: 2rem;
}
.not-allowed {cursor: not-allowed;opacity: 0.4;}
/* ONE */
body.one {
    background-color: #101010;
    color: #f2f2f2;
    background: url("frgmnt_20220104a-cave-bg.gif");
    background-repeat: repeat;
    background-size: cover;
    background-position: bottom center;
    background-attachment: fixed;
  }
  body.one a {
    text-decoration: none;
    color: #00c440;
  }
.blackbg {
  background-color: #101010;
}
.fullscreen {
  width: 100%;
}
.fullscreen img {
  width: 100%;
}
/* TWO */
body.two {
  background: url("frgmnt_20220101b-cosmicbubble-1920.gif");
  background-repeat: repeat;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}
body.two a {
  color: aqua;
}
/* ANIMATION */
.rotate {
    animation: rotation 10s infinite linear;
}
.rotate2 {
    animation: rotation 11s infinite linear;
}
.rotate-rewind {
    animation: rotation-rewind 10s infinite linear;
}
/* THREE */
body.three {
  background-color: white;
  background: url("frgmnt_20220213c-caveroom.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  background-attachment: fixed;
  color: black;
}
.three img {
  mix-blend-mode: multiply;
}
@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}
@keyframes rotation-rewind {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-359deg);
  }
}
  /* SMALL BROWSER */
  @media screen and (max-width: 600px) {

    }