:root {
  /* Original colors */
  --color-beige: #fff5e7;
  --color-grey: #c6c6c6;
  --color-peach: #ffcbcb;
  --color-purple: #cbddff;
  --color-green: #cbffd6;
  --color-green-dark: #99cc88;
  --color-orange-dark: #ffc773;
  --color-orange: #ffe4bc;

  /* Original Dark */
  
  --color-dark-beige: #683D00;
  --color-dark-grey: #2B2B2B;
  --color-dark-peach: #620000;
  --color-dark-purple: #002262;
  --color-dark-green: #006215;
  --color-dark-green-dark: #1D3316;
  --color-dark-orange-dark: #503000;
  --color-dark-orange: #5F3900;

  /* Light theme */
  --light-salmon: #ffac81ff;
  --congo-pink: #ff928bff;
  --apricot: #fec3a6ff;
  --medium-champagne: #efe9aeff;
  --tea-green: #cdeac0ff;

  /* Dark theme */
  --sepia: #72411bff;
  --seal-brown: #592f0fff;
  --seal-brown-2: #3d1a00ff;
  --msu-green: #004439ff;
  --deep-jungle-green: #0a5e5bff;

  --sys-color-light: #121212;
  --sys-color-dark: #eeeeee;
}

html,
body {

  --color-game: var(--color-beige);
  --color-main: var(--color-green-dark);
  --color-lobby: var(--color-green);
  --color-result: var(--color-purple);
  --color-challenge: var(--color-peach);

  --color-grad-start: var(--color-peach);
  --color-grad-end: var(--color-purple);

  --sys-color-global: var(--sys-color-light);

  height: 100%;
  width: 100%;
  overflow: hidden;
  background: var(--sys-color-dark);
  color: var(--sys-color-global);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

@media (prefers-color-scheme: dark) {

  html, body {

    --color-game: var(--color-dark-beige);
    --color-main: var(--color-dark-green-dark);
    --color-lobby: var(--color-dark-green);
    --color-result: var(--color-dark-purple);
    --color-challenge: var(--color-dark-peach);

    --color-grad-start: var(--color-dark-peach);
    --color-grad-end: var(--color-dark-purple);

    --sys-color-global: var(--sys-color-dark);
    
    background: var(--sys-color-light);
    color: var(--sys-color-global);
  }
}

/* Screens */

.main-screen {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  background-color: var(--color-main);
}

.lobby-screen {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  background-color: var(--color-lobby);
}

.game-screen {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  background-color: var(--color-game);
}

.challenge-screen {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  background-color: var(--color-challenge);
}

.result-screen {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  background-color: var(--color-result);
}

/* Leaderboard */

.leaderboard-container {
  position: absolute;
  top: 0%;
  right: 0%;
  padding: 0; /* Remove padding */
  margin: 0; /*Remove margins */
  border-radius: 15px;
}

.leaderboard-container > table {
  display: block;
  overflow-x: hidden;
  overflow-y: auto;
  white-space: nowrap;
  max-height: 39.05vh;
  border-collapse: separate;
}

.players {
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: space-between;
  vertical-align: middle;
  flex-direction: row;
  padding-left: 0.5em;
}

.players > td {
  padding-right: 2em;
}

.players > td:last-child {
  padding-right: 0em;
}

.players:last-child {
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 0px;
  
}

.current-player {
  font-weight: bold;
  /* background-color: var(--color-orange-dark); */
  /* border: 3px solid var(--sys-color-global); */
}

.other-players {
  /* background-color: var(--color-orange); */
}

/* Main display content */

.word-container {
  font-size: 16vw;
  letter-spacing: 0.2em;
  color: inherit;
  /* font-family: 'Courier New', Courier, monospace; */
}

.play-container, .challenge-word-container {
  font-size: 16vw;
  height: 20%;
  color: inherit;
  justify-content: center;
  align-items: center;
  padding: 0;
  /* font-family: 'Courier New', Courier, monospace; */
}

.letter {
  opacity: 0.5;
  width: 1.0em;
  color: inherit;
  /* font-family: 'Courier New', Courier, monospace; */
}

.inputWord {
  background: transparent;
  border: none;
  font-size: 16vw;
  opacity: 0.5;
  outline: none;
  text-transform: uppercase;
  color: inherit;
  padding: 0;
  /* font-family: 'Courier New', Courier, monospace; */
}

#inputLetter {
  max-width: 1em;
  color: inherit;
  /* font-family: 'Courier New', Courier, monospace; */
}

#inputChallenge {
  max-width: 2em;
  color: inherit;
  /* font-family: 'Courier New', Courier, monospace; */
}

.clipped-border {
  position: relative;
}

/* Alert display content */

.display-alert {
  font-weight: normal;
  font-size: 1.3rem;
  text-align: center;
}

/* Buttons */

/* #quit-button {
  position: absolute;
} */

.button, .input {
  min-height: 6vh;
  min-width: 6vh;
  max-width: 15em;
  /* border: none; */
  /* outline: none; */
}

.button-shadow {
  box-shadow: 3px 3px #999;
  transform: translateY(-3px);
}

.button-shadow:disabled {
  box-shadow: 0 0;
  transform: translateY(0px);
}

.button-shadow:active {
  box-shadow: 0 0;
  transform: translateY(0px);
}

/* BG colors selectors */

.bg-peach {
  background-color: var(--color-peach);
}
.bg-green {
  background-color: var(--color-green);
}
.bg-green-dark {
  background-color: var(--color-green-dark);
}
.bg-purple {
  background-color: var(--color-purple);
}
.bg-beige {
  background-color: var(--color-beige);
}


/* Auxialiary actions */

.remove-component {
  display: none;
}

.hide-component {
  visibility: hidden;
}

.correct-background {
  background-image: url("../assets/correct.png");
  background-position:center;
	background-repeat:no-repeat;
  background-size: contain;
  background-blend-mode: color;
  background-origin: content-box;
}

.wrong-background {
  background-image: url("../assets/wrong.png");
  background-position:center;
	background-repeat:no-repeat;
  background-size: contain;
  background-blend-mode: color;
  background-origin: content-box;
}


/* Responsive layout - makes a one column layout instead of a two-column layout */
@media only screen and (max-width: 1000px) {
  /* Leaderboard specs */

  .leaderboard-container {
    left: 4.5rem;
  }
  .leaderboard-container > table {
    display: block;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
  }
  .players {
    display: table-cell;
    overflow-x: auto;
    max-width: 100%;
  }
  .players:last-child {
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 15px;
  }

  /* Clipped border only on mobile */
  .clipped-border:before, .clipped-border:after {
    content: '';
    display: block;
    position: absolute;
    background-color: transparent;
    pointer-events: none;
  }
  
  .clipped-border:before {
    top: 0;
    left: 20%;
    right: 0%;
    bottom: 80%;
    border-top: 0.1rem solid #FFF;
  }
  
  .clipped-border:after {
    top: 0%;
    left: 0%;
    right: 0;
    bottom: 0;
    border-left: 0.1rem solid #FFF;
    border-bottom: 0.1rem solid #FFF;
    border-right: 0.1rem solid #FFF;
  }
}