body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-image: url(https://webb-shell.neocities.org/tilingsky.jpg);
  background-repeat: repeat;
  background-size: 1000px;
  background-position: center;
  background-attachment: fixed;
  animation: bgscroll 50s linear infinite;
}

@keyframes bgscroll {
  0% { background-position: 0 0; }
  100% { background-position: -1000px -1000px; }
}


.steam-window {
  --olive-dark: #2f3a20;
  --olive-mid: #4c5a34;
  --olive-light: #7c8c58;
  --olive-panel: #3e492a;
  --olive-screen: #1b2211;
  --text-light: #dbe6c4;

  width: 80vw;
  height: justify-content;
  margin: 0.4vw auto;
  font-family: Arial, monospace;
  font-size: 25px;

  border-top: 2px solid var(--olive-light);
  border-left: 2px solid var(--olive-light);
  border-right: 2px solid var(--olive-dark);
  border-bottom: 2px solid var(--olive-dark);
  background: var(--olive-mid);
  padding: 2px;
  box-shadow: 1vw 1vw 40px rgba(0,0,0,0.9);
}

.steam-window1 {
  --olive-dark: #2f3a20;
  --olive-mid: #4c5a34;
  --olive-light: #7c8c58;
  --olive-panel: #3e492a;
  --olive-screen: #1b2211;
  --text-light: #dbe6c4;

  width: justify-content;
  margin: 0.4vw auto;
  font-family: Arial, monospace;
  font-size: 25px;

  border-top: 1px solid var(--olive-light);
  border-left: 1px solid var(--olive-light);
  border-right: 1px solid var(--olive-dark);
  border-bottom: 1px solid var(--olive-dark);
  background: var(--olive-mid);
  padding: 2px;
  box-shadow: 1vw 1vw 40px rgba(0,0,0,0.9);
}

.steam-titlebar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(to right, var(--olive-dark), #1c2413);
  padding: 3px 4px 3px 8px;
  border-bottom: 1px solid var(--olive-dark);
}

.steam-titlebar1 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(to right, var(--olive-dark), #1c2413);
  padding: 3px 15px 3px 8px;
  border-bottom: 1px solid var(--olive-dark);
}

.steam-titlebar-text {
  font-size: 13px;
  color: var(--text-light);
  letter-spacing: 1px;
  text-shadow: none;
}

.steam-titlebar-controls {
  display: flex;
  gap: 2px;
}
.steam-btn {
  width: 14px;
  height: 14px;
  font-family: "Pixelify Sans", monospace;
  font-size: 12px;
  line-height: 1;
  color: var(--text-light);
  background: var(--olive-mid);
  border-top: 1px solid var(--olive-light);
  border-left: 1px solid var(--olive-light);
  border-right: 1px solid var(--olive-dark);
  border-bottom: 1px solid var(--olive-dark);
  padding: 0;
  cursor: pointer;
  text-shadow: none;
  box-shadow: none;
}

.steam-btn1 {
  width: justify-content;
  height: justify-content;
  font-family: monospace;
  font-size: 17px;
  line-height: 1;
  color: var(--text-light);
  background: var(--olive-mid);
  border-top: 1px solid var(--olive-light);
  border-left: 1px solid var(--olive-light);
  border-right: 1px solid var(--olive-dark);
  border-bottom: 1px solid var(--olive-dark);
  padding-left: 0.3vw;
  padding-right: 0.3vw;
  cursor: pointer;
  text-shadow: none;
  box-shadow: none;
}

.steam-btn:active {
  border-top: 1px solid var(--olive-dark);
  border-left: 1px solid var(--olive-dark);
  border-right: 1px solid var(--olive-light);
  border-bottom: 1px solid var(--olive-light);
}

.steam-btn1:active {
  border-top: 1px solid var(--olive-dark);
  border-left: 1px solid var(--olive-dark);
  border-right: 1px solid var(--olive-light);
  border-bottom: 1px solid var(--olive-light);
}

.steam-btn-close:hover {
  background: #6b2a20;
}

.steam-body {
  background: var(--olive-panel);
  padding: 10px;
}

.steam-screen {
  background: var(--olive-screen);
  border-top: 1px solid var(--olive-dark);
  border-left: 1px solid var(--olive-dark);
  border-right: 1px solid var(--olive-light);
  border-bottom: 1px solid var(--olive-light);
  padding: 8px;
  display: flex;
  flex-wrap: grid;
  justify-content: center;
  align-items: center;
  gap: 7px;
}
  
.steam-imgwrap {
  width: stretch;
  height: stretch;
  border: 1px solid var(--olive-dark);
  background: #10150a;
}


.steam-imgwrap img { 
  width: 100%; 
  height: 100%; 
  object-fit: cover; 
}


.steam-tooltip {
  margin-top: 8px;
  background: var(--olive-mid);
  border-top: 1px solid var(--olive-light);
  border-left: 1px solid var(--olive-light);
  border-right: 1px solid var(--olive-dark);
  border-bottom: 1px solid var(--olive-dark);
  padding: 6px 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--text-light);
  text-shadow: none;
}

.steam-note a {
  color: var(--text-light);
  text-decoration: underline;
}

.steam-note a:hover {
  color: #ffffff;
}

.steam-date {
  opacity: 0.85;
}

.asabove, .sobelow{
  text-align: left;
  text-shadow: 
  0 0 2em white,
  0 0 1em white,
  0 0 0.2em white;
  font-size: 70px ;
  word-wrap: break-word;
  max-width: 90vw;
  color:rgb(255,255,255);
}

.truth {
  font-family: serif;
  align-items: center;
  text-align: center;
  width: 80vw;
  max-height: 80vh;
  display: block;
  font-size: 30px
  
}

.splash-wrap {
  font-size:0px;
  display: inline-block;
  transform: rotate(-15deg);
}

.splash-text {
  margin: 0px;
  display: inline-block;
  font-family: Comic Sans MS;
  font-size: 1.5rem;
  color: #ffff55;
  animation: splash-bounce 0.4s ease-in-out infinite alternate;
  transform-origin: center;
  text-shadow: 2px 2px 2px black;
}

@keyframes splash-bounce {
  from {
    font-size: 2rem;
    transform: scale(0.97);
  }
  to {
    font-size: 2rem;
    transform: scale(1.03);
  }
}

a:link {
  color: black;
}

a:visited {
  color: red;
}

a:hover {
  color: white;
  text-decoration: none;
  text-shadow: 
  0 0 1em white,
  0 0 0.2em white;
}

a:active {
  color: white;
  text-decoration: none;
  text-shadow: 
  0 0 1em white,
  0 0 0.2em white;
}


/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." 

body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  
  font-family: 'Silkscreen', monospace;
  
  background-image: url(https://webb-shell.neocities.org/tilingsky.jpg);
  background-repeat: repeat;
  background-size: 1000px;
  background-position: center;
  background-attachment: fixed;
  animation: bgscroll 100s linear infinite;

}
.truth {
  font-family: serif;
  align-items: center;
  text-align: center;
  width: 80vw;
  max-height: 80vh;
  display: block;
  font-size: 30px
  
}

  
.asabove, .sobelow{
  text-shadow: 
  0 0 2em white,
  0 0 1em white,
  0 0 0.2em white;
  font-size: 70px ;
  text-align: center;
  word-wrap: break-word;
  max-width: 90vw;
  color:rgb(255,255,255);
}

.img{
  align-content: center;
  float:table-row;
  margin: 1vw;
  display: inline-block;
  -webkit-filter: drop-shadow(0px 0px 15px white);
  filter: drop-shadow(0px 0px 15px white);
}

a:link {
  color: black;
}

a:visited {
  color: red;
}

a:hover {
  color: white;
  text-decoration: none;
  text-shadow: 
  0 0 1em white,
  0 0 0.2em white;
}

a:active {
  color: white;
  text-decoration: none;
  text-shadow: 
  0 0 1em white,
  0 0 0.2em white;
}

.steam-window {
  --steam-dark: #3c4a2e;
  --steam-mid: #5a6b45;
  --steam-light: #8a9c6e;
  --steam-panel: #4b5a3a;
  font-family: 'Pixelify Sans', monospace;
}

.steam-window .title-bar {
  background: linear-gradient(to right, var(--steam-dark), var(--steam-mid));
}

.steam-window .window-body {
  background: var(--steam-panel);
  color: #e2e8d0;
  padding: 8px;
}

.steam-screen {
  background: #2b3320;
  border: 2px inset #23291b;
  padding: 12px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.steam-img {
  width: 100%;
  max-width: 320px;
  height: auto;
  display: block;
}

.steam-tooltip {
  margin-top: 8px;
  background: var(--steam-mid);
  border: 2px outset var(--steam-light);
  padding: 6px 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: #f0f4e6;
}

.steam-note a {
  color: #d9e6c3;
  text-decoration: underline;
}

.steam-note a:hover {
  color: #ffffff;
}

.steam-date {
  opacity: 0.85;
}


@keyframes bgscroll {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -1000px 0;
  }
}
*/