* {
    /* height & width now includes border & padding */
    box-sizing: border-box;
    text-align: center;
    font-size: 14px;
    font-family: 'Rubik Mono One', monospace;
  }

  body {
    height: 100vh;
    margin: 0;
    background-color: rgb(33, 58, 33);
    display: flex;
    justify-content: center;
  }


  section {
    background-color: rgb(157, 157, 157);
  }

/** Start elements */
  section.welcome{
    background-color: #a5a5a5a4;
    padding: 1em
  }

  button.welcome {
    width: 33%;
    padding: 1em 0;
    font-weight: bold;
    margin: 1em 0 0 0
  }

  button.incipere {
    font-family: 'Quattrocento', serif;
    font-weight: bold;
  }

  h1 {
    font-size: 3em;
    font-family: 'Rubik Mono One', monospace;
  }

  h2 {
    font-size: 1.5em
  }

  /* Values for buttons on normal mode should equate to the keyboard code */
  .narrowMode {
    display: none
  }

/** Main elements  */
  .dropGrid {
    height: 100%;
    aspect-ratio: 0.5;
    background-color: black;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin-bottom: 1em;
  }

  .dropCell {
    margin: 0;
    aspect-ratio: 1;
    color: rgb(70, 70, 70, 0)
  }

  div {
    border: solid;
    border-width: 1px;
    border-color: rgb(43, 43, 43)
  }

/** Sidebar and contents */
  .sidebar {
    background-color: darkgray;
    height: 100%;
    width: 50%;
    max-width: 350px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .sidebar > * {
    margin: 0.5em 1em;
    
  }

  .sidebar p {
    background-color: cadetblue;
    margin: 0;
    padding: 0.5em;
    min-height: 4em;
    text-align: center;
  }

  .logo {
    width: 60%;
    align-self: center;
  }


  .controls button {
    font-size: 0.6em;
    padding: 0;
    height: 100%
  }

  button span{
    font-size: 1em;
  }

  .controls {
    display: grid;
    grid-template-columns: 35% 15% 15% 35%;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
    text-align: center;
    align-items: center;
    grid-gap: 3px;
  }

  .metrics {
    display: flex;
    justify-content: space-between;
  }

  .metrics * {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%
  }

  .futureGrids {
    /* display: flex;
    justify-content: space-around; */
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-rows: 15% 85%;
    align-items: center;
    justify-content: center;
  }

  .futureGrid {
    background-color: black;
    width: 80%;
    margin: 1em 1em;
    aspect-ratio: 1;
    display: flex;
    flex-wrap: wrap;
    color: rgba(0,0,0,0)
  }

  .classicalJokes {
    display: none
  }

  /**! Make the top 4 * width cells hidden with hidden attribute */
  .holdingGrid {
    display: none
    /* background-color: peachpuff; */
  }

/** Assignable classes for pieces: */

  .piece.typeStraight{
    background-color: aqua;
  }
  
  .piece.typeReverseL{
    background-color: blue;
  }
  .piece.typeL{
    background-color: orange;
  }
  .piece.typeSquare{
    background-color: yellow;
  }
  .piece.typeZ{
    background-color: red;
  }
  .piece.typeT{
    background-color: purple;
  }
  .piece.typeReverseZ{
    background-color: greenyellow;
  }

  @media screen and (max-width: 800px) {

    /* Values for buttons on narrow mode should equate to the function performed */
  .narrowMode {
    display: block
  }

  .normalMode {
    display: none
  }

    body {
      display: grid;
      grid-template-rows: 70% 20%
    }
  
    main {
      align-self: center;
      justify-self: center;
    }

    h1 {
      font-size: 2em;
    }
  
    .logo, .credits {
      display: none
    }
    /* .credits {
      display: none
    } */
  
    .sidebar {
      width: 100vh;
      flex-direction: row-reverse;
      justify-content: space-between;
    }
  
    .sidebar * {
      margin: 0.5em 0.2em
    }
  
    .sidebar p {
      padding: 0.1em
    }
  
    .metrics {
      flex-direction: column;
    }
  
    .metrics * {
      font-size: 1em;
      width: 98%;
    }

    .metrics p {
      min-height: 2em
    }
  
    .futureGrids {
      margin: 0;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
    }
  
    .futureGrids p {
      display: none
    }
  
    .futureGrid {
      margin: 0.1em 0.5em;
      max-height: 50%
    }
  
    .controls p {
      display: none;
      /* padding: 0.5em; */
      margin: 0.5em 0.5em
    }
  
    .controls {
      display: grid;
      grid-template-rows: 19% 19% 19% 19% 19%;
      grid-template-columns: 50% 50%;
    }
  }

/** Utilised in classical.css file instead
  /* @media screen and (min-width: 1200px) {
    .classicalBody{
      background-image: url(../assets/colosseum.jpg);
      background-size: cover;
      background-repeat: no-repeat
    }
  } */
  

  /* Attribution to add to body when page wide enough: */
  /* Photo by <a href="https://unsplash.com/@bdv91?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Dmitry Bukhantsov</a> on <a href="https://unsplash.com/photos/the-inside-of-an-old-building-with-a-lot-of-windows-DexkTCvt-eA?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Unsplash</a>
   */