/*
///////////////
// HTML Tags //
///////////////
*/

* {
  margin: 0;
  padding: 0;
  font-size: 12px;
}

body {
   background-color: steelblue;
   font-family: 'Roboto', sans-serif;
}

button {
  width: 8rem;
  height: 2rem;
}


#container {
  display:flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: space-evenly;
  width: 75rem;
  height:100vh;
  margin: 0 auto 0 auto;
}


/*
////////////////////
// Left Container //
////////////////////
*/

#left-container {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}

#logo {
  width: 15rem;
  height: 7.5rem;
  font-size: 2rem;
  text-align:center;
}

#current-number-wrap {
  width: 10rem;
}

#numbers-drawn {
  width: 100%;
  height: 1rem;
  font-weight: bold;
  color: black;
  text-align: center;
  margin-bottom: .5rem;
}

#current-number {
  width: 100%;
  height: 10rem;
  font-size: 4rem;
  font-weight: bold;
  color: black;
  background-color: tan;
  border: 2px black solid;
  display: flex;
  justify-content: center;
  align-items: center;
}

#game-wrap {
  width: 10rem;
  height: 10rem;
  border: 2px black solid;
}

#game {
  display:flex;
  flex-wrap:wrap;
  width:10rem;
  background-color: ivory;
}

#game div {
  width:2rem;
  height:2rem;
}

#score {
  width: 15rem;
  height: 2rem;
  background-color: tan;
}

/*
//////////////////////
// Center Container //
//////////////////////
*/

#center-container {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

#numbers-wrap {
  display:flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width:100%;
}

#number-header {
  width:1.5rem;
  height:7.5rem;
  background-color:black;
  display: flex;
  flex-direction: column;
}

#number-header div {
  width: 1.5rem;
  height: 1.5rem;
  font-size: 1rem;
  font-weight: bold;
  text-align: center;
  color: lemonchiffon;
  display: flex;
  justify-content: center;
  align-items: center;
}

#numbers {
  display:flex;
  flex-wrap:wrap;
  background-color:black;
  width:22.5rem;
  color:darkslategrey;
}

#numbers div {
  width:1.5rem;
  height:1.5rem;
  font-size:1rem;
  font-weight:bold;
  display: flex;
  justify-content: center;
  align-items: center;
}

#button-wrap {
  display:flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
  width:100%;
}


#card-wrap {
  border: 2px solid black;
}

#card-header {
  height:3rem;
  display: flex;
  flex-wrap: wrap;
}

#card-header div {
  width: 5rem;
  height: 3rem;
  font-size: 2rem;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
}

#card {
  width: 25rem;
}

#card div {
  width:5rem;
  height:5rem;
  font-size:2rem;
  font-weight:bold;
  display: flex;
  justify-content: center;
  align-items: center;
}


/*
/////////////////////
// Right Container //
/////////////////////
*/

#right-container {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  width: 15rem;
}

#opponent1-wrap {
  border: 2px solid black;
  width: 10rem;
}

#opponent1-header {
  height:1.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

#opponent1-card {
  width: 10rem;
}

#opponent1-card div {
  width:2rem;
  height:2rem;
  font-size:1rem;
  font-weight:bold;
  text-align:center;
  display: flex;
  justify-content: center;
  align-items: center;
}

#opponent2-wrap {
  border: 2px solid black;
  width: 10rem;
}

#opponent2-header {
  height:1.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

#opponent2-card {
  width: 10rem;
}

#opponent2-card div {
  width:2rem;
  height:2rem;
  font-size:1rem;
  font-weight:bold;
  text-align:center;
  display: flex;
  justify-content: center;
  align-items: center;
}

#opponent3-wrap {
  border: 2px solid black;
  width: 10rem;
}

#opponent3-header {
  height:1.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

#opponent3-card {
  width: 10rem;
}

#opponent3-card div {
  width:2rem;
  height:2rem;
  font-size:1rem;
  font-weight:bold;
  text-align:center;
  display: flex;
  justify-content: center;
  align-items: center;
}


/*
/////////////
// Classes //
/////////////
*/

.card-header-class {
  background-color:firebrick;
  border-bottom: 2px black solid;
}

.card-class {
  display:flex;
  flex-wrap:wrap;
  background-color:tan;
}

.free-space {
}

.card-hover {
  background-color:lemonchiffon;
}

.card-click {
  background-color:#78bc61;
}

.called-number {
  color:lemonchiffon;
}

.new-number {
  color:orange;
}