:root {
  --baseColor: #9b9ac3;
  --secondaryColor: #282781;
  --accentColor: gold;
  --accentColor2: rgb(133, 113, 0);
}
* {
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: var(--baseColor);
  color: var(--secondaryColor);
  text-align: center;
  height: 100%;
}
#highScores,
#chatRoom {
  background-color: var(--secondaryColor);
  height: 100vh;
  overflow-y: auto;
  text-align: center;
}
/* #header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--secondaryColor);
} */
#game {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 1rem;
}
#board {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}
#play {
  background-color: var(--secondaryColor);
  border-color: var(--accentColor);
  color: var(--baseColor);
  font-weight: bold;
  padding: 0 1.5rem;
  border-top: 2px solid var(--accentColor);
  border-left: 2px solid var(--accentColor);
  border-right: 2px solid var(--accentColor2);
  border-bottom: 2px solid var(--accentColor2);
}
#play:hover {
  background-color: var(--baseColor);
  color: var(--secondaryColor);
  cursor: pointer;
  box-shadow: 2px 2px 2px var(--accentColor);
}
#play:active{
    border-top: 2px solid var(--accentColor2);
    border-left: 2px solid var(--accentColor2);
    border-right: 2px solid var(--accentColor);
    border-bottom: 2px solid var(--accentColor);
    box-shadow: 0 0 0
}
#rightColumn {
    align-self: flex-start;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
td {
  border: 1px solid var(--baseColor);
  min-height: 20px;
  min-width: 20px;
  width: 20px;
  height: 20px;
}
#preview td {
border: 1px solid var(--secondaryColor);
background-color: var(--baseColor);
}
table {
  border-spacing: 0;
  box-shadow: 5px 5px 15px var(--secondaryColor);
  background: var(--secondaryColor);
  /* background: -webkit-linear-gradient(
    to left,
    var(--baseColor),
    var(--secondaryColor)
  );
  background: linear-gradient(to left, var(--baseColor), var(--secondaryColor)); */
}
#themes {
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
}
#themes > div {
  width: 30px;
  height: 30px;
  border-top: 2px solid var(--accentColor);
  border-left: 2px solid var(--accentColor);
  border-right: 2px solid var(--accentColor2);
  border-bottom: 2px solid var(--accentColor2);
}
#themes > div:hover {
    box-shadow: 2px 2px 8px var(--accentColor);
  }
#themes > div:active {
    box-shadow: 0 0 0 
  }
#blueBtn {
  background-color: #282781;
  background-image: linear-gradient(to top left, #282781, #282781 50%,#9b9ac3 50%, #9b9ac3 100% )
}
#blueBtn:hover {
  background-color: #9b9ac3;
  cursor: pointer;
}
#redBtn {
  background-color: #4e0e0e;
  background-image: linear-gradient(to top left, #4e0e0e, #4e0e0e 50%,#c39a9a 50%, #c39a9a 100% )
}
#redBtn:hover {
  background-color: #c39a9a;
  cursor: pointer;
}
#greenBtn {
  background-color: #0e4e10;
  background-image: linear-gradient(to top left, #0e4e10, #0e4e10 50%,#9ac3a8 50%, #9ac3a8 100% )
}
#greenBtn:hover {
  background-color: #9ac3a8;
  cursor: pointer;
}
#grayBtn {
  background-color: #2a2a2a;
  background-image: linear-gradient(to top left, #2a2a2a, #2a2a2a 50%,#bdbdbd 50%, #bdbdbd 100% )
}
#grayBtn:hover {
  background-color: #bdbdbd;
  cursor: pointer;
}
.red {
  background-image: url('https://github.com/danielforkner/tetris/blob/main/img/red.png?raw=true');
  /* background-image: url('img/red.png'); */
  background-color: red;
  background-size: cover;
}
.green {
  background-image: url('https://github.com/danielforkner/tetris/blob/main/img/green.png?raw=true');
  background-color: green;
  background-size: cover;
}
.blue {
  background-image: url('https://github.com/danielforkner/tetris/blob/main/img/blue.png?raw=true');
  /* background-image: url('img/blue.png'); */
  background-color: blue;
  background-size: cover;
}
.orange {
  background-image: url('https://github.com/danielforkner/tetris/blob/main/img/orange.png?raw=true');
  background-color: rgb(239, 173, 48);
  background-size: cover;
}
.purple {
  background-image: url('https://github.com/danielforkner/tetris/blob/main/img/purple.png?raw=true');
  background-color: purple;
  background-size: cover;
}
.yellow {
  background-image: url('https://github.com/danielforkner/tetris/blob/main/img/yellow.png?raw=true');
  background-color: yellow;
  background-size: cover;
}