/*basicreset{{{*/
:root {
  --color1: rgb(2, 21, 38);
  --color2: rgb(3, 52, 110);
  --color2v: rgb(0, 48, 104);
  --color3: rgb(110, 172, 218);
  --color4: rgb(226, 226, 182);
  --color5: rgb(0, 128, 128);
  --color6: rgb(64, 224, 208);
  /* font-family: Helvetica; */
  font-family: Inter, sans-serif;
  color:grey;
}

body {
  background-color: var(--color1);
  height: 100%;

  /* merge into one selector */
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  /* merge into one selector */
  margin: 0;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;

  /* maintain aspect-ratio */
  object-fit: cover;
}

input,
button,
textarea,
select {
  font: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

#root,
#__next {
  isolation: isolate;
}

ul {
  padding: 0;
}

li {
  list-style-type: none;
}

/*}}}*/

body{
  display:flex;
  justify-content:space-around;
  align-items:center;
  height:100vh;
}

.board{
  display:flex;
  flex-flow:column;
  width:500px;
  height:500px;
  aspect-ratio:1/1;
  background-color:var(--color1);
  gap:10px;
}

.blockRow{
  flex:1;
  display:grid;
  gap:10px;
  grid-template-columns: repeat(3,1fr);
  grid-auto-flow: column
}

.block{
  background-color: blue;
  display:flex;
  justify-content: center;
  align-items: center;
}

.block:hover{
  background-color: red;
}
.block:active{
  background-color: green;
}

.section{
  display:grid;
  gap:20px;
  justify-content: center;
  text-align: center;
 }

.playerBoard{
  background-color:var(--color3);
  width:20%;
  aspect-ratio:8/9;
}

.playerName{
  color: white;
  font-size: 1em;
  text-align: center;
  padding:5px;
}

.playerScore{
  color: white;
  text-align: center;
  padding:5px;
}
.playerScore,
.playerName{
  font-size: clamp(1vw, 2vw + 1rem, 20rem);
 }
 /*TODO: Find a way to move the player board into bottom
  * if it turned too small, or any other way that would
  * look better on smaller window*/