@font-face {
  font-family: "Omori Normal";
  src: url(../fonts/omori_game2-webfont.woff) format("woff");
  src: url(../fonts/omori_game2-webfont.woff2) format("woff2");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Omori Horror";
  src: url(../fonts/omori_game-webfont.woff) format("woff");
  src: url(../fonts/omori_game-webfont.woff2) format("woff2");
  font-weight: 400;
  font-style: normal;
}

body {
  /*display: flex;
  align-items: center;
  justify-content: center;*/
  
  background: url(../headspace/mountain.png), url(https://lilithdev.neocities.org/headspace/star_a.png), url(https://lilithdev.neocities.org/headspace/sky.png);
  background-repeat: repeat-x, repeat, repeat-x;
  background-size: cover, auto, cover;
  image-rendering: pixelated;
  background-attachment:fixed;
  background-position:left bottom;
  animation: slide 60s linear infinite;
  background-blend-mode: normal, lighten;
  background-position:
      left bottom 20%,
      left 0px top 0px,
      left bottom;
}

body {
  font-family: "Omori Normal";
  color: #FFFFFF;
  font-size: 28px;
  overflow-y: auto;
}

@keyframes slide{
  0% {
    background-position:
      left bottom 20%,
      left 0px top 0px,
      left bottom;
  }
  100% {
    background-position:
      left bottom 20%,
      left calc(-1023px * 2) top 0px,
      left bottom;
  }
}

.font {
  font-family: 'Omori Normal';
  font-size: 28px;
  background: black;
  color: white;
}

#site-banner {
  image-rendering: pixelated;
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  /*margin: 32px;*/
}

#header-name {
  max-width: 100%;
  max-height: 100%;
}

header {
  margin-top: 32px;
  margin-bottom: 16px;
  display: flex;
}

main {
	max-width: 800px;
  margin: 16px auto;
  padding: 16px;
  box-shadow: 0px 0px 0 1px black;
}

.box {
  border: 3px solid white;
  color: #FFFFFF;
  background: black;
  /*box-shadow: 0px 0px 0 1px black;*/
}

/*.active {
  border-color: rgb(255, 217, 102);
  color: rgb(255, 217, 102);
}*/

.button {
  cursor: pointer;
}

.tab {
  /*border-bottom-color: black;*/
  z-index: 1;
}
.tab:hover {
  border-color: rgb(255, 217, 102);
  color: rgb(255, 217, 102);
}
.tab.active {
  border-bottom-color: black;  
}

.button:hover::before {
  content:"";
  background-image: url(../headspace/sprites/cursor.png);
  width: 30px;
  height: 15px;
  background-size: 30px, 15px;
  display: inline-block;

  animation-name: cursor-bounce;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  /*position: relative;*/
  position: absolute;
  transform: translate(-40px, 12px);
  /*top: 12px;
  left: -40px;*/
}

@keyframes cursor-bounce {
  0% {transform: translate(-40px, 12px);}
  50% {transform: translate(-34px, 12px);}
  100% {transform: translate(-40px, 12px)}
}

.parameter {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
}

.parameter > label {
  /*flex-grow: 1;*/
  flex: 1 1 0px;
  gap: 8px;
  white-space: nowrap;
  display: flex;
}

.parameter > label > select {
  flex-grow: 1;
}

.parameter > label > input {
  flex-grow: 1;
}

.textfield {
  border: 2px solid white;
  padding-left: 8px;
  padding-right: 8px;
}

.multibutton {
  display: flex;
  gap: 4px;
}

#toys {
  margin-top: 8px;
  display: flex;
  flex-direction: row;
  gap: 8px;
  height: 48px;
  background: black;
}

.toy {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-grow: 1;
  min-width: 0;
}

.toy > img {
  height: 100%;
}

.toy > div {
  color: white;
  font-family: "Omori Normal";
  font-size: 20px;
  line-height: 20px;
}

/* this is horifically bad, don't do this, someone needs to fix this */
/* funny hl2 reference */
.divider {
  position: relative;
  left: -16px;
  width: calc(100% + 32px);
  height: 3px;
  background: white;
}

#result-script {
  background: rgb(40,40,40);
  border: 2px solid white;
  margin-top: 16px;
  padding: 0 8px;  
}

details {
  user-select: none;
}

code {
  font-family: Monaco, monospace;
  font-size: 1rem;
  line-height: 100%;
  background-color: #111;
  padding: 0.2em;
  letter-spacing: -0.05em;
  word-break: normal;
  display: block;
}

summary {
  display: flex;
  gap: 16px;
  cursor: pointer;
}

summary::-webkit-details-marker {
  display: none;
}

ul {
  font-size: 24px;
  margin: 0;
}

li {
  margin: 8px 0;  
}

@media (max-width: 700px) {
  .parameter {
    flex-direction: column;
    gap: 4px;  
  }
}

@media (max-width: 600px) {
  .multibutton {
    justify-content: center;
    gap: 8px;
  }
  
  .toy > div {
    display: none;  
  }
}