@import url('https://fonts.googleapis.com/css2?family=Fira+Code&family=Stint+Ultra+Expanded&display=swap');

:root {
  --bg: #111;
  --white: rgba(255, 255, 255, 0.7);
  --hightlight-bg: var(--light-blue);
  --light-blue: #e0e0ff;
  --dark-blue: rgb(85, 90, 141);
  --red: #fa6b84;
  --green: #acf3ae;
}

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

html,
body {
  font-size: 14px;
  font-family: "Fira Code", monospace;
  color: var(--white);
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

body {
  position: relative;
  line-height: 1.4em;
  margin: 0 auto;
  font-weight: 300;
  background-color: var(--bg);
  padding: 60px 0 30px;
  position: relative;
}

/* Custom scrollbar - Start */
html {
  --scrollbar_bg: #555;
  --thumb_bg: #aaa;
}
body::-webkit-scrollbar {
  width: 11px;
}
body {
  scrollbar-width: thin;
  scrollbar-color: var(--thumb_bg) var(--scrollbar_bg);
}
body::-webkit-scrollbar-track {
  background: var(--scrollbar_bg);
}
body::-webkit-scrollbar-thumb {
  background-color: var(--thumb_bg);
  border-radius: 6px;
  border: 3px solid var(--scrollbar_bg);
}
/* Custom scrollbar - End */

.flex-box {
  display: flex;
}
.flex-col {
  display: flex;
  flex-direction: column;
}
.flex-row {
  display: flex;
  flex-direction: row;
}

.space-between {
  justify-content: space-between;
}

.margin-bot-4vh {
  margin-bottom: 4vh;
}

#title {
  color: var(--white);
  font-size: 40px;
  font-family: 'Stint Ultra Expanded', cursive;
  padding: 5px;
  position: absolute;
  margin-top: 20px;
  top: 0;
  left: 3px;
}

#title:hover {
  cursor: pointer;
}

#head-message {
  position: absolute;
  top: 10vh;
  left: 50%;
  transform: translate(-50%, 0);
  background-color: #3b3b59;
  opacity: 0.9;
  width: 50%;
  padding: 20px;
  z-index: 999;
}

.container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  margin: 13vh 0 5vh 0;
}

#start-menu {
  display: flex;
  width: 30vw;
  flex-direction: column;
  border: 1px solid var(--white);
  margin: 10vh 0 10vh 0;
  padding: 0.5vh 0.5vw;
}

#start-menu button {
  font-size: 3.5vmin;
  font-family: "Fira Code", monospace;
  color: var(--white);
  text-align: center;
  background-color: transparent;
  border: 0;
  padding: 5px;
  margin: 10px;
}

#start-menu button:hover {
  cursor: pointer;
  color: var(--white);
  background-color: rgba(85, 90, 141, 0.4);
}

.controller {
  width: 15vmin;
  height: 100%;
  margin: 0 2vw 0 2vw;
  display: flex;
  flex-direction: column;
}

.preview-controller {
  width: 20vw;
}

.editor-page .controller {
  width: 15vw;
}

.controller button {
  font-size: 2.5vmin;
  font-family: "Fira Code", monospace;
  color: var(--white);
  text-align: center;
  background-color: transparent;
  border: 0;
  padding: 5px;
  margin: 10px 0 0 3px;
}

.controller button:hover {
  cursor: pointer;
  color: #fff;
  background-color: rgba(85, 90, 141, 0.4);
}

.editor-page button {
  font-size: 0.9vw;
}

.game-board {
  display: flex;
  flex-direction: column;
  opacity: 100%;
  width: 60vmin;
  background-color: rgba(255, 255, 255, 0.05);
  position: relative;
}

#saved-level-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  margin-right: 10%;
}

#saved-level {
  display: inline-flex;
  width: 100%;
  margin-left: 5vh;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  break-after: always;
}

#container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

#preview-container {
  display: inline-flex;
  width: 100%;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0 0 5vh 0;
}

.level-container {
  position: relative;
  margin: 12px 0 0 10px;
  width: 100px;
  height: 120px;
}

.level-container:hover {
  cursor: pointer;
  background-color: var(--light-blue);
}

.level-container:hover .level-title {
  cursor: pointer;
  color: var(--dark-blue);
}

.level {
  width: 100px;
  height: 100px;
}

.incompleted-level {
  filter: blur(10px) brightness(180%);
}

.level-overlay {
  font-size: 5vmin;
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center; /** Y-axis align **/
  justify-content: center; /** X-axis align **/
  backdrop-filter: blur(3px);
  background-color: rgba(103, 92, 105, 0.5);
}

.viz-page .level-overlay {
  background-color: #B33A3A;
}

.level-overlay .overlay-text {
  text-align: center;
  line-height: 1;
  color: var(--white);
  filter: blur(0);
}

.level-container:hover .level-overlay {
  cursor: pointer;
  filter: blur(0);
  color: rgba(0, 0, 0, 0.6);
}

.level-title {
  margin: 10px 0 0 5px;
  color: #a9afdd;
}

.cell-row {
  display: flex;
  flex-direction: row;
}

/* .tile img {
  pointer-events: none;
} */

.cell {
  width: 100%;
  height: 100%;
}

.tile,
.tile img,
.preview-cell img {
  width: 100%;
  height: 100%;
}

.tile:hover {
  cursor: pointer;
  background-color: var(--light-blue);
}

.cell-hint-highlight {
  background-color: #ffa3a3;
}

#footer {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 5px;
  background-color: rgba(85, 90, 141, 0.4);
  color: #f1f8ff;
  text-align: center;
}

a {
  text-decoration: none;
  color: #54b3d6;
}

a:hover {
  cursor: pointer;
  color: #fff;
}

@media (max-height: 420px) {
  #footer {
    display: none;
  }
}

/* slider - start */

input[type="range"] {
  -webkit-appearance: none;
  background-color: transparent;
}

input[type="range"]::-webkit-slider-runnable-track {
  height: 0.3vw;
  background: #bbb;
  border: none;
  border-radius: 3px;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: none;
  height: 0.8vw;
  width: 0.8vw;
  border-radius: 50%;
  background: rgb(85, 90, 141);
  transform: translate(0, -25%);
}

input[type="range"]:focus {
  outline: none;
}

input[type="range"]:focus::-webkit-slider-runnable-track {
  background: #ccc;
}

/* firefox slider */

input[type=range]::-moz-range-track {
  height: 0.3vw;
  background: #bbb;
  border: none;
  border-radius: 3px;
}

input[type=range]::-moz-range-thumb {
  border: none;
  height: 1vw;
  width: 1vw;
  border-radius: 50%;
  background: rgb(85, 90, 141);
  transform: translate(0, -10%);  
}

input[type=range]:-moz-focusring {
  outline: none;
}

input[type=range]:focus::-moz-range-track {
  background: #ccc;
}

/* slider - end */

.slider-container {
  line-height: 1;
  margin: 3px 0 3px 0;
}

.slider-text {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.slider {
  width: 100%;
  height: 30px;
}

.slider-label {
  font-size: 1.5vmin;
  color: var(--white);
  margin-right: 3px;
}

.slider-value {
  font-size: 2vmin;
  color: var(--white);
  transform: translate(5px, 1px);
}

.page-container {
  width: 60vmin;
}

.page-title {
  font-size: 4vh;
  line-height: 1;
}

.page-content {
  font-size: 2vh;
  line-height: 1.2;
  margin: 2vh 0 0 0;
}

.page-content p {
  margin: 0 0 15px 0;
}

/* selector */

.selector-controller {
  width: 100%;
  margin: 0 0 2vh 0;
}

.tile-selector .tile {
  pointer-events: none;
  border: 4px solid var(--bg);
  /* background-color: none; */
}

.tile-checkbox {
  width: 100%;
  height: 100%;
  background-color: var(--light-blue);
  filter: brightness(0.8);
}

.tile-checkbox:hover {
  cursor: pointer;
  filter: brightness(0.5);
}

.unchecked {
  filter: grayscale(1) brightness(0.7);
}

.unchecked:hover {
  cursor: pointer;
  filter: grayscale(1);
  background-color: var(--light-blue);
}