html {
  box-sizing: border-box
}

/* The Universal Selector */
*, /* All elements*/
*::before, /* All ::before pseudo-elements */
*::after { /* All ::after pseudo-elements */
  /* height & width will now include border & padding by default
     but can be over-ridden as needed */
  box-sizing: inherit;
}

/* resets font size to be 62.5% of the user preference - 
     in most browser configurations this will be 10px */
:root {  
  --background: rgb(137, 47, 47);
  --font-color: rgb(50, 50, 50);
  --title-color: rgb(182, 119, 68);
  --title-font: 'Faster One', cursive;
  --box-color: rgb(163, 117, 117);
  --key-main: rgba(212, 212, 212, 0.738);
  --sans-serif: 'Encode Sans', sans-serif;
  --correct: rgb(58, 107, 58);
  --almost: rgb(190, 109, 63);
  --miss: rgb(141, 141, 141);
  font-size: 62.5%;
}

body {
  background-color: var(--background);
  /* Use a system font, if none are available use an available sans-sarif font */
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
        Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  margin: 0;
  /* max-height: 90vh; */
}

.progress {
  font-family: var(--sans-serif);
  height: 2vmin;
  margin: 15px;
  background-color: var(--key-main);
  font-size: 1.5vmin;
}

h1 {
  font-family: var(--title-font);
  font-size: 11vmin;
  text-shadow: 3px 4px 1px var(--key-main);
  color: var(--almost);
  align-items: center;
}

main {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  color: var(--font-color);
  max-height: 90vh;
}

p {
  font-size: 3vmin;
  text-align: center;
}

#button-zone {
  display: flex;
  flex-direction: row;
  height: 25px;
  padding: 0 0 0 0;
  margin: 10px 10px 0 0 ;
  font-family: var(--sans-serif);
  justify-content: right;
  
}

.btn {
  background-color: var(--key-main);
}

.modal-content {
  background-color: var(--key-main);
  color: var(--font-color);
  font-family: var(--sans-serif);
  border-radius: 15px
}

#pick-word-number {
  background-color: var(--key-main);
}

.row {
  display: flex;
}

.k-row {
  display: flex;
}

.key {
  background-color: var(--key-main);
}

.toast {
  font-family: var(--sans-serif);
  background-color: var(--key-main);
}

.square {
  color: var(--box-color);
  border: 2px solid var(--box-color);
}

.row > div {
  margin: .3vmin;
  width: 10vmin;
  height: 10vmin;

  font-family: var(--sans-serif);
  font-size: 5vmin;
  line-height: 9vmin;
  text-align: center;
}

.k-row > div {
  font-family: var(--sans-serif);
  font-size: 2vmin;
  color: var(--font-color); 
  line-height: 6vmin;
  text-align: center;
  margin: .4vmin;
  height: 6vmin;
  width: 7vmin;
  border-radius: 7px;
}

.miss {
  background-color: var(--miss);
  border-color: var(--miss);
  color: var(--font-color);
}

.almost {
  background-color: var(--almost);
  border-color: var(--almost);
  color: var(--font-color)
}

.correct {
  background-color: var(--correct);
  border-color: var(--correct);
  color: var(--font-color)
}

.shadow {
  box-shadow: 0 1vmin 1vmin 0 rgba(41, 41, 41, 0.75) !important;
}

#clipboard-button {
  background-color: var(--correct);
}

#new-game-modal-button {
  background-color: var(--almost);
}

#enter, #delete {
width: 10vmin;
}

#kr1 {
  margin-top: 1vmin;
  margin-left: 1.8vmin;
}

#kr2 {
  margin-left: 5.5vmin;
}

#kr3 {
  margin-left: 1.7vmin;
}


/* 768px is a common "breakpoint" width for tablets */
@media only screen and (max-width: 660px) {
  body {
    /* tablet - two column display */
    background-color: var(--background);
    min-height: 100vh;
    min-width: 100%;
  }

  .square {
    color: var(--box-color);
    border: 2px solid var(--box-color);
  }

  h1 {
    margin-top: 0;
    font-size: 16vmin;
  }

  .row > div {
    margin: .2vmin;
    width: 15vmin;
    height: 15vmin;
  
    font-family: var(--sans-serif);
    font-size: 7vmin;
    text-align: center;
    line-height: 15vmin;
  }

  .k-row > div {
    font-family: var(--sans-serif);
    font-size: 3vmin;
    color: var(--font-color); 
    line-height: 13vmin;
    margin: .4vmin;
    height: 13vmin;
    width: 9vmin;
    border-radius: 7px;
  }

  #enter, #delete {
    width: 12vmin;
    }

  .miss {
    background-color: var(--miss);
    border-color: var(--miss);
    color: var(--font-color);
  }
  
  .almost {
    background-color: var(--almost);
    border-color: var(--almost);
    color: var(--font-color)
  }
  
  .correct {
    background-color: var(--correct);
    border-color: var(--correct);
    color: var(--font-color)
  }

  #kr1 {
    margin-top: 1vmin;
    margin-left: .2vmin;
  }

  #kr3 {
    margin-left: 2vmin;
  }
}