@import "./reset.css";
@import "./variables.css";


html {
  font-size: 16px;
}

body {
  font-family: "Montserrat", sans-serif;
}

main {
  display: flex;
  justify-content: center;
  align-items: center;
}

body {
  background-image: url(https://img1.goodfon.com/original/1920x1200/b/59/stol-starina-retro-cveta.jpg);
}

.startGameButton {
	box-shadow: 0px 1px 0px 0px #1c1b18;
	background:linear-gradient(to bottom, #eae0c2 5%, #ccc2a6 100%);
	background-color:#eae0c2;
	border-radius:14px;
	border:2px solid #333029;
	display:inline-block;
	cursor:pointer;
	color:#505739;
	font-family:Arial;
	font-size:14px;
	font-weight:bold;
	padding:15px 50px;
	text-decoration:none;
	text-shadow:0px 1px 34px #ffffff;
}
.startGameButton:hover {
	background:linear-gradient(to bottom, #ccc2a6 5%, #eae0c2 100%);
	background-color:#ccc2a6;
}
.startGameButton:active {
	position:relative;
	top:1px;
}

.chessboard {
  height: var(--chessboard-height);
  width: var(--chessboard-width);
  margin-top: 10rem;
  box-shadow: 90px 90px 40px rgba(20, 17, 17, 0.822);
}

.field {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}

.field-container {
  height: 100%;
  width: 100%;
  display: grid;
  grid-template-columns: var(--label-ratio) repeat(8, var(--field-width));
  grid-template-rows: repeat(8, var(--field-height)) var(--label-ratio);
}

.field:nth-child(odd) {
  background-color: var(--black-field-background);
}

.field:nth-child(even) {
  background-color: var(--white-field-background);
}

.highlight {
  background: linear-gradient(rgba(206, 220, 14, 0.5), rgba(224, 193, 19, 0.767)),
  linear-gradient(white, white); /* first bg is on top of this */
}

.number-label {
  display: flex;
  justify-content: center;
  align-items: center;
}

.number-label, .letter-label {
  background: linear-gradient(rgb(255, 255, 255), rgba(80, 79, 67, 0.767)),
  linear-gradient(white, white); /* first bg is on top of this */
}

[class$="-label"] {
  /* font-size: 1rem; */
  text-align: center;
}

[data-coordinate$="-8"] {
  border-top: 1px solid rgb(150, 150, 150);
}

[data-coordinate$="-1"] {
  border-bottom: 1px solid rgb(150, 150, 150);
}

[data-coordinate^="A"] {
  border-left: 1px solid rgb(150, 150, 150);
}

[data-coordinate^="H"] {
  border-right: 1px solid rgb(150, 150, 150);
}

img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  margin: 0 auto;
  padding: 10%;
}

.pawn-black {
  background-image: url("../images/pawn-black.png");
}

.rook-black {
  background-image: url("../images/rook-black.png");
}

.knight-black {
  background-image: url("../images/knight-black.png");
}

.bishop-black {
  background-image: url("../images/bishop-black.png");
}

.queen-black {
  background-image: url("../images/queen-black.png");
}

.king-black {
  background-image: url("../images/king-black.png");
}

.pawn-white {
  background-image: url("../images/pawn-white.png");
}

.rook-white {
  background-image: url("../images/rook-white.png");
}

.knight-white {
  background-image: url("../images/knight-white.png");
}

.bishop-white {
  background-image: url("../images/bishop-white.png");
}

.queen-white {
  background-image: url("../images/queen-white.png");
}

.king-white {
  background-image: url("../images/king-white.png");
}