:root {

    /**
     * colors
     */
  
    /* solid */
  
    --onyx: hsla(240, 1%, 17%, 0.75);
    --smoky-black: hsl(0, 0%, 7%);
    --dusty-blue: hsl(217, 33%, 53%);
    --shadow: 0 16px 30px hsla(0, 0%, 0%, 0.25);
    --frosty-white: hsl(0, 0%, 96%);

    /* gradient */

    --bg: linear-gradient(to right, var(--smoky-black) , var(--dusty-blue) , var(--smoky-black));
  
  }
  
  body { background: var(--bg); }

.h1 {
    font-family: 'Poppins', sans-serif;
    color: var(--frosty-white);
    font-size: 48px;
    text-align: center;
    margin: 0;
    padding: 0;
}

.a {
    font-family: 'Poppins', sans-serif;
    color: var(--frosty-white);
    font-size: 48px;
    text-align: center;
    margin: 0;
    padding: 0;
}

.board {
    width: 40%;
    margin: auto;
    border: 4px solid var(--frosty-white);
    position: fixed;
    top: 8%;
    left: 5%;
    bottom: 5%;
    justify-content: center;
    align-items: center;
    display: flex;
    padding: 2%;
    background: var(--onyx);
    backdrop-filter: blur(10px);
    border-radius: 12px 0 0 12px;
    cursor: pointer;
    border-style: solid hidden solid solid;
}

.info {
    font-family: 'Poppins', sans-serif;
    color: var(--frosty-white);  
    width: 40%;
    margin: auto;
    font-size: 32px;
    border: 4px solid var(--frosty-white);
    position: fixed;
    top: 8%;
    left: 49.25%;
    bottom: 5%;
    padding: 2%;
    background: var(--onyx);
    backdrop-filter: blur(10px);
    border-radius: 0 12px 12px 0;
    border-style: solid solid solid hidden;  
}

/* Add your other CSS rules here */

/* Style the select container */
.info select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: var(--onyx);
  backdrop-filter: blur(10px);
  border-radius: 48px;
  border: 4px solid var(--frosty-white);
  box-shadow: var(--shadow);
  color: var(--frosty-white);
  font-size: 32px;
  width: 30%;
  padding: 12px;
  cursor: pointer;
}

.move-history {
    min-height: 60%;
    max-height: 60%;
    overflow-y: scroll;
    width: 100%;
    font-family: 'Poppins', sans-serif;
    font-size: 20px;
    background: var(--onyx);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    border: 4px solid var(--frosty-white);
    box-shadow: var(--shadow);
    color: var(--frosty-white);
}