* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #00332A;
  background: radial-gradient(at 70% 40%, #00332A, #0E0E0E);
  height: 100%;
  font-family: var(--font);
  color: #31FFDA;
  overflow: hidden;
}

main {
  max-width: 1280px;
  margin: 0 auto;
  position: relative;
}

@keyframes fade {
  0% {
    opacity: 0.3;
  }
  50% {
    opacity: 0.5;
  }
}

@keyframes rotateSilly {
  0% {
    transform: rotate3d(1, 1, 1, 0deg);
  }
  100% {
    transform: rotate3d(1, 1, 1, 360deg);
  }
}

.scanlines {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  height: 100%;
  z-index: 100;
  background-image: url(../img/lines.png);
  opacity: 0.3;
  pointer-events: none;
  user-select: none;
  animation: fade 4000ms infinite linear;
  transform-origin: top center;
}

.header-cont {
  display: flex;
  flex-flow: row nowrap;
  padding: 3px 20px;
  gap: 5px;
  align-items: center;
}

.header-divide {
  user-select: none;
  color: #0F8973;
}

.header-btn {
  text-decoration: underline;
  cursor: pointer;
  border: none;
  padding: 0;
  width: unset;
}

a.header-btn {
  color: #31FFDA;
  font-weight: 600;
  transition: color 100ms ease-out, border-color 100ms ease-out;
}

.header-btn:hover {
  color: #5DF744;
}

@keyframes openWindow {
  0% {
    opacity: 0;
    transform: scaleY(0);
  }
  20% {
    opacity: 1;
  }
  100% {
    transform: scaleY(1);
  } 
}

.window-container {
  position: absolute;
  display: flex;
  flex-flow: column nowrap;
  border: 3px solid #31FFDA;
  box-shadow: #375350AA 3px 3px 3px;
  background-color: #0E0E0E;
  animation: openWindow 150ms linear 1;
  transform-origin: center;
}

.window-hidden {
  display: none;
  animation: none;
}

.window-hidden-alt {
  display: none;
  animation: none;
}

.window-top {
  background-color: #31FFDA;
  color: #0E0E0E;
  display: flex;
  justify-content: space-between;
  user-select: none;
}

.window-close {
  background-color: #0F8973;
  width: 15px;
  height: 15px;
}

.window-content {
  padding: 5px;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: center;
}

#window-howto { 
  left: 10px;
  top: 500px;
}

#window-menu > .window-content {
  gap: 25px;
}

#window-login {
  left: 40px;
  top: 50px;
}

#window-register {
  left: 30px;
  top: 40px;
}

#window-game {
  position: relative;
  top: 40px;
  /* center */
  margin: 0 auto;
  width: 350px;
}

#window-game > .window-content {
  padding: 15px;
}

#window-config {
  right: 50px;
  top: 30px;
}

#window-scores {
  right: 20px;
  top: 130px;
}

#windowPopUp {
  position: absolute;
  left: calc(50% - 200px);
  top: 40%;
  width: 400px;
  z-index: 10;
}

button {
  font-family: var(--font);
  font-size: 16;
  color: #31FFDA;
  border: solid 2px #31FFDA;
  background: none;
  width: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
  cursor: pointer;
  font-weight: 600;
  transition: color 100ms ease-out, border-color 100ms ease-out;
}

button:hover {
  border-color: #5DF744;
  color: #5DF744;
}

button:active {
  border-color: #EEFF31;
  color: #EEFF31;
}

.login-cont {
  display: flex;
  flex-flow: column nowrap;
  gap: 10px;
  padding: 10px;
}

.login-inner {
  display: flex;
  flex-flow: column nowrap;
  gap: 3px;
}

.text-input {
  border: 2px solid #31FFDA;
  background: none;
  padding: 5px;
  color: #31FFDA;
  font-family: var(--font);
  font-size: 18;
  transition: color 100ms ease-out, border-color 100ms ease-out;
}

.text-input:hover {
  border-color: #5DF744;
  color: #5DF744;
}

.text-input:focus {
  outline: none;
  border-color: #EEFF31;
  color: #EEFF31;
}

.login-button, .register-button {
  margin: 0 auto;
}

.register-button {
  padding: 2px;
  width: unset;
  border: none;
  text-decoration: underline;
  font-weight: 600;
}

#window-config > .window-content {
  gap: 3px;
}

.config-line {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
  width: 200px;
}

.config-btn {
  padding: 1px 3px;
  border: solid 2px #5DF744;
  color: #5DF744;
  background: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  font-weight: 600;
  width: 75px;
}

.config-false {
  border-color: #FF3131;
  color: #FF3131;
}

.scores-types-cont {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

.scores-type {
  cursor: pointer;
  width: unset;
  border: none;
  text-decoration: underline;
  transition: color 100ms ease-out;
}

.scores-divider {
  user-select: none;
  color: #0F8973;
}

.scores-type:hover {
  color: #5DF744;
}

.type-selected {
  color: #EEFF31;
}

.scores-container {
  list-style: decimal;
  padding: revert;
  margin-top: 10px;
  font-size: 18;
  width: 300px;
  max-height: 400px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #31FFDA #0E0E0E;
}

.score-item:nth-child(even) {
  color: #31FFDABB !important;
}

.score-item {
  animation: openWindow 200ms 1 backwards;
  transform-origin: bottom;
  padding: 1px 0;
}

.score-inner {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: space-between;
  padding-right: 5px;
}

.how-list {
  padding-left: 20px;
  list-style-type: square;
  max-width: 400px;
}

.how-item:nth-of-type(n + 2) {
  margin-top: 5px;
}

.how-text {
  display: inline;
}

.text-green {
  color: #5DF744;
  font-weight: 600;
}

.text-yellow {
  color: #EEFF31;
  font-weight: 600;
}

.rotating {
  animation: rotateSilly 1500000ms infinite linear;
}

.popup-style_win {
  color: #5DF744;
  border: 3px solid #5DF744;
}

.popup-style_win .window-top {
  background-color: #5DF744;
}

.popup-style_win .window-close {
  background-color: #00000080;
}

.popup-style_lose {
  color: red;
  border: 3px solid red;
}

.popup-style_lose .window-top {
  background-color: red;
}

.popup-style_lose .window-close {
  background-color: #00000080;
}

.popup-buttons {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: space-around;
  padding: 5px;
  border-color: inherit;
  color: inherit;
}

.popup-buttons > button {
  border-color: inherit;
  color: inherit;
}

.popup-buttons > button:hover {
  border-color: #EEFF31;
  color: #EEFF31;
}

@media (max-width: 600px) {
  body {
    overflow-y: scroll;
  }

  .header-cont {
    /* max-width: 90vw; */
    flex-wrap: wrap;
  }

  .window-container {
    position: relative !important;
    left: unset !important;
    top: unset !important;
    right: unset !important;
    max-width: 90vw;
    margin: 10px auto;
  }

  .scanlines {
    display: none;
    visibility: hidden;
  }

  #scanlineLine {
    display: none;
    visibility: hidden;
  }
}