@font-face {
  font-family: 'W95FA';
  src:
    url('./w95fa.woff2') format('woff2 supports variations'),
    url('./w95fa.woff2') format('woff2-variations');
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  font-family: 'VT323', monospace;
  background-color: rgb(124, 124, 124);
}

* {
  box-sizing: border-box;
}

canvas {
  display: block;
}

:root {
  --windowGray: #C4C4C4;
  --windowGrayDark: #7D8583;
  --windowHeader: #100084;
  --windowBorder: rgb(39, 39, 39) -2px -2px 0px 0px inset, rgb(236, 236, 236) 2px 2px 0px 0px inset, rgb(117, 117, 117) -3px -3px 0px 0px inset, rgb(218, 218, 218) 3px 3px 0px 0px inset;
  --windowBorderSmall: rgb(39, 39, 39) -1px -1px 0px 0px inset, rgb(236, 236, 236) 1px 1px 0px 0px inset, rgb(117, 117, 117) -2px -2px 0px 0px inset, rgb(218, 218, 218) 2px 2px 0px 0px inset;
  --windowBorderNoBottom: rgb(39, 39, 39) -1px 0px 0px 0px inset, rgb(236, 236, 236) 1px 1px 0px 0px inset, rgb(117, 117, 117) -2px 0px 0px 0px inset, rgb(218, 218, 218) 2px 2px 0px 0px inset;
  --windowInset: rgb(222 220 222) -1px -1px 0px 0px inset, rgb(160 153 161) 1px 1px 0px 0px inset, rgb(202 198 203) -2px -2px 0px 0px inset, rgb(70 65 71) 2px 2px 0px 0px inset;
}
p, h1, h2, h3 {
  margin: 0;
}
strong {
  font-weight: bold;
  font-size: 1.1rem;
}

button {
  font-family: 'VT323', monospace;
  border: none;
  color: black;
  padding: 0;
  outline: none
}
#play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.classic-button {
  font-size: large;
  padding: 6px 14px;
  position: relative;
  transition: 100ms;
  background-color: rgb(202, 198, 203);
  box-shadow: rgb(70 65 71) -1px -1px 0px 0px inset, white 1px 1px 0px 0px inset, rgb(160 153 161) -2px -2px 0px 0px inset, rgb(222 220 222) 2px 2px 0px 0px inset;
}
.classic-button:active {
  background: linear-gradient(45deg, rgb(239, 238, 240) 25%, transparent 25%, transparent 75%, rgb(239, 238, 240) 75%, rgb(239, 238, 240)) 0px 0px / 2px 2px, rgb(202, 198, 203);
  box-shadow: white -1px -1px 0px 0px inset, rgb(70, 65, 71) 1px 1px 0px 0px inset, rgb(222, 220, 222) -2px -2px 0px 0px inset, rgb(202, 198, 203) 2px 2px 0px 0px inset;
}

.classic-button:after {
  content: "";
  position: absolute;
  inset: 2px 3px 2px 2px;
  border: 1px dashed black;
  opacity: 0;
  transition: 200ms;
}
.classic-button:hover:after {
  opacity: 1;
}
.classic-button:active:after {
  inset: 2px 2px 2px 2px;
}

.hidden {
  display: none;
}

#instructionsBody {
  padding: 8px 6px;
  display: flex;
  flex-direction: column;
  gap: 8px
}

#instructionContainer {
  z-index: 10;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: 260px;
  max-height: 100vh;
  max-height: 100svh;
  transition: 0.35s;

  padding: 4px;
  background-color: var(--windowGray);
  border-radius: 2px;
  box-shadow: var(--windowBorder);

  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: min-content 1fr min-content;
}

#instructionContainer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: -3px 2px 3px rgba(130, 130, 130, 0.3);
  z-index: -1;
}
#instructionContainer.out {
  right: 100%;
  top: 200%;
  opacity: 0;
}
#instructionContainer.in{
  top: 50%;
  left: 50%;
  opacity: 1;
}

#instructionsBody .classic-button {
  width: 100%;
  max-width: 140px;
  text-align: left;
}

#header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--windowHeader);
  color:white;
  font-size: 0.65rem;
  line-height: 0;
  padding: 4px 3px 4px 5px;
}
#closeButton {
  flex-grow: 0;
  flex-shrink: 0;
  padding: 0;
  width: 20px;
  height: 18px;
  font-size: 24px;
  line-height: 0;
  font-weight: bolder;
  display: flex;
  justify-content: center;
  align-items: center;
}

.button-container {
  display: flex;
  align-items: center;
  gap:6px
}