.top-tray, .bottom-tray, .button-grid, .board {
  display: grid;
}

.fen-container, .light-square, .dark-square, .global-container, .perfect-center, .checkbox-container, .align-center, .justify-center {
  display: flex;
}

.justify-center, .fen-container, .light-square, .dark-square, .global-container, .perfect-center {
  justify-content: center;
}

.checkbox-container, .align-center, .fen-container, .light-square, .dark-square, .global-container, .perfect-center {
  align-items: center;
}

@font-face {
  font-family: "Roboto";
  src: url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
}
@font-face {
  font-family: "Open Sans";
  src: url("https://fonts.googleapis.com/css2?family=Open+Sans&display=swap");
}
.fen-label, .label {
  font-family: "Roboto", sans-serif;
  font-size: min(2.5vw, 2.5vh);
  color: #f0f0f0;
}

.form-select, .button-nav, .button-control, .fen-input, .text {
  font-family: "Roboto", sans-serif;
  font-size: min(2.4vw, 2.4vh);
  color: #f0f0f0;
}

.button-nav, .button-control, .button-background, img, .pointer {
  cursor: pointer;
}

.button-nav, .button-control, .button-background, select:focus, input[type=text]:focus {
  outline: none;
}

body {
  background-color: #181818;
}

input[type=text]:focus {
  border-color: #a8a8a8;
}

.button-nav:disabled, .button-control:disabled, .button-background:disabled {
  cursor: default;
}

.invisible, [v-cloak] {
  visibility: hidden;
}

.global-container {
  width: 100%;
  height: 100%;
}

.right-container {
  margin: 0 0 0 15px;
}

.button-background {
  margin: 0 0 0 5px;
  border: none;
  padding: 0;
  background-color: transparent;
}

.fen-label {
  margin: 0 10px 0 0;
}

.fen-input {
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 4px;
  background-color: #303030;
  color: #f0f0f0;
  width: 100%;
}

.board {
  gap: 0 0;
  grid-template-columns: repeat(8, min(7.5vw, 7.5vh));
  grid-template-rows: repeat(8, min(7.5vw, 7.5vh));
}

.light-square {
  background-color: #f9f6d6;
}

.dark-square {
  background-color: #c88e3b;
}

.board-piece {
  height: 100%;
}

.bottom-tray, .top-tray {
  gap: 0 0;
  grid-template-columns: repeat(8, min(7.5vw, 7.5vh));
  grid-template-rows: min(7.5vw, 7.5vh);
  border: 1px solid transparent;
  border-radius: 2px;
  background-color: #6e6e65;
}

.top-tray {
  margin: 0 0 8px 0;
}

.bottom-tray {
  margin: 8px 0 0 0;
}

.tray-selected {
  background-color: #079ede;
}

.form-container {
  padding: 2px 0 10px 10px;
  background-color: #202020;
}

.subsection {
  padding: 8px 0 8px 0;
}

.form-select {
  margin: 0 10px 0 10px;
  color: black;
}

.castle-container {
  display: inline-block;
  margin: 0 10px 0 0px;
}

.fen-container {
  margin: 30px 0 0 0;
}

.button-nav {
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 3px 6px 3px 6px;
  background-color: #019443;
}

.button-nav:disabled {
  background-color: grey;
}

.button-grid {
  gap: 0 0;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: min(3.6vw, 3.6vh);
  background-color: #303030;
}

.button-container {
  text-align: center;
}

.button-control {
  border: none;
  padding: 0;
  background-color: transparent;
}