body {
  /*font-family: Times New Roman;*/
  width: 100%;

  margin: 0 auto;
  background: gray;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: row;

}

a {
  text-decoration: none;
  color: white;
}

.first-div,.middle-div,.last-div{
  display: flex;
}

.first-div{
  width: 25%;
  margin: 5px 5px 10px 10px;
  height: 850px;
  overflow: scroll;
}

.last-div {
  width: 25%;
  margin: 5px 10px 10px 5px;
  height: 850px;
  overflow: scroll;
}

.middle-div{
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 50%;
  margin:  20px 5px;
  min-width: 650px;

}

.game-text {
  font-size: 18px;
  color: lightgray;
  text-align: justify;
  opacity: .8
}

#score-container{
  position: relative;
  width: 100%;
  height: 40px;
  text-align: center;
  background: lightgray;
  display: flex;
  justify-content: space-around;
  align-items: center;
  color: black;
  font-weight: bold;
  /*font-size: 20px;*/
  box-shadow: 3px 3px 10px black;
}

#start-button {
  font-size: 20px;
  width: 100px;
  font-weight: bold;
  font-family: inherit;
  padding: 10px;
  margin: 20px;
  border-radius: 3px;
}

#two-rounds-button {
  font-size: 20px;
  font-weight: bold;
  font-family: inherit;
  padding: 10px;
  margin: 20px;
  border-radius: 3px;
}

#four-rounds-button{
  font-size: 20px;
  font-weight: bold;
  font-family: inherit;
  padding: 10px;
  margin: 20px;
  border-radius: 3px;
}

#versus-computer-btn {
  font-size: 20px;
  font-weight: bold;
  font-family: inherit;
  padding: 10px;
  margin: 20px;
  border-radius: 3px;
}

#two-player-btn{
  font-size: 20px;
  font-weight: bold;
  font-family: inherit;
  padding: 10px;
  margin: 20px;
  border-radius: 3px;
}

#begin-two-player {
  font-size: 20px;
  width: 100px;
  font-weight: bold;
  font-family: inherit;
  padding: 10px;
  margin: 20px;
  border-radius: 3px;
}

.nameInput {
  margin: 5px;
  width: 200px
}

.instruction {
  position: relative;
  width: 100%;
  height: 85px;
  text-align: center;
  background: black;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px auto 0 auto;
  color: white;
  font-weight: bold;
  font-size: 35px;
}


.game-board {
  position: relative;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
  height: 602px;
  width: 100%;
  /*margin: 0 380px 0 180px;*/
  flex-wrap: wrap;

}

#code-guess-container {
  height: 502px;
  width: 60%;
  background: white;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-end;

}

.guess-rows {
  width: 100%;
  height: 100px;
  border-top: .5px solid gray;
  background: white;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
}

.guessed-square {
  border: 3px solid lightgray;
  height: 60px;
  min-width: 60px;
  margin: 5px 17px 5px 17px;
}

#code-storage{
  height: 100px;
  width: 60%;
  background: lightgray;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}

#feedback-board {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;
  width: 20%;
  height: 502px;
  background: lightgray;
  color: white;
  border-right: 3px solid black;
}

.feedback-rows {
  width: 100%;
  height: 100px;
  border-top: .5px solid gray;
  background: lightgray;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: row wrap;

}

#feedback-button-container {
  width: 20%;
  height: 100px;
  background: white;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-flow: row wrap;
  border-right: 3px solid black;

}

.feedback-buttons {
  visibility: hidden;
  border: 3px solid lightgray;
  height: 40px;
  min-width: 40px;
  width: 25%;
}

#feedback-empty-button {
  visibility: hidden;
  font-family: inherit;
  font-weight: bold;
  border: 3px solid lightgray;
  height: 40px;
  width: 90px;
}

.feedback-square {
  border: 1px solid white;
  height: 25px;
  min-width: 25px;
  width: 25%;
  margin-left: 10%;
  margin-right: 10%;
  margin-top: 10px;
  margin-bottom: 10px;
}

#black {
  background: black;
}

#gray {
  background: gray;
}

#none {
  background: lightgray;
  border: none;
}

.button-container {
  width: 14%;
  height: 602px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 14px;
  border-left: 3px solid black;
  /*border-right: 3px solid black;*/
}

.buttons {
  border: 3px solid white;
  height: 60px;
  min-width: 60px;
  width: 75%;
  box-shadow: 3px 3px 10px black;
}

#red {
  background: red;
}

#yellow {
  background: yellow;
}

#blue {
  background: blue;
}

#orange {
  background: orange;
}

#green {
  background: green;
}

#purple {
  background: purple;
}

.sequence-square {
  visibility: hidden;
  border: 3px solid white;
  height: 60px;
  width: 60px;
  margin: 5px 17px 5px 17px;
}

.controls {
  position: relative;
  width: 100%;
  height: 100px;
  text-align: center;
  background: black;
  display: flex;
  justify-content: center;
}

#displayCode {
  font-size: 20px;
  font-weight: bold;
  font-family: inherit;
  padding: 10px;
  margin: 20px;
  border-radius: 3px;
}

#next-round-start {
  font-size: 20px;
  font-weight: bold;
  font-family: inherit;
  padding: 10px;
  margin: 20px;
  border-radius: 3px;
}

#play-again {
  font-size: 20px;
  font-weight: bold;
  font-family: inherit;
  padding: 10px;
  margin: 20px;
  border-radius: 3px;
}