snake.scss

@use "sass:color";
@use "sass:math";
@import 'style';

$fieldSize: 20;
#snakeField{
  line-height: 0;
  margin: 20px auto;
  border: 5px solid $color-primary;
  span {
    display: inline-block;
    width: 40px;
    height: 40px;
  }
  .grid:nth-child(even){
    background-color: $bc-discord-3;
  }
  .grid:nth-child(odd){
    background-color: color.adjust($bc-discord-3, $lightness:10%);
  }
  .target {
    background-color: red !important;
  }
  .snake-head {
    background-color: color.adjust($color-primary, $lightness:-10%);
  }
  .snake-body {
    background-color: color.adjust($color-primary, $lightness:-5%);
  }

  .snake-partner-head {
    opacity: 80%;
    background-color: color.adjust(#32a852, $lightness:-10%);
  }
  .snake-partner-body {
    opacity: 80%;
    background-color: color.adjust(#32a852, $lightness:-5%);
  }
}

.no-scroll {
  overflow: hidden;
}

#content {
  display: flex;
}

.snake-textbox{
  width: calc(50% - #{40px * $fieldSize / 2 + 50});
  display: flex;
  justify-content: center;
  align-items: center;

  margin: 0 20px;
  h1 {
    color: $color-text;
  }
}