body {
  background-image: url(../img/tetris-background1-test3.jpg);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-color: black;
  min-height: 100vh;
}

.container {
  background-color: black;
  margin-top: -1%;
}

@font-face {
  font-family: buttons;
  src: url(../fonts/PressStart2P.ttf);
}

@font-face {
  font-family: tetris;
  src: url(../fonts/Minecrafter.Reg.ttf);
}

.center {
  text-align: center;
}

.push-left {
  margin-left: 30%;
}

/*Start of Start Menu*/

.title-box {
  display: inline-block;
  background-color: gray;
  margin-left: 17%;
}

.start-menu {
 /*background-color: gray;*/
 te
}

.box-pop2 {
  border-top: 10px solid white;
  border-left: 10px solid lightgray;
  border-right: 8px solid darkgray;
  border-bottom: 8px solid black;
}

#title {
  font-size: 15vh;
  margin-bottom: -40px;
  text-align: center;
  margin-left: 30px;
  margin-right: 30px;
}

.start-button-box {
  margin-left: 36%;
  display: inline-block;
  background-color: gray;
}

#start-button {
  margin-right: 10px;
  margin-left: 10px;
  font-size: 3.5vh;
  background-color: black;
}

.start-controls-box {
  display: inline-block;
  margin-left: 15%;
  background-color: black;
  /*margin-left: -10px;
  margin-right: -10px;*/
}

#start-controls-box {
  margin-left: 20px;
  margin-right: 20px;
}

.arrow-keys {
  height: 6vh;
}

#spacebar {
  height: 7vh;
}

.arrow-keys-text {
  display: inline-block;
}

/*End of Start Menu*/

/*Start of Board*/
.board {
 display: none;
 margin-left: 8%;
 margin-top: 3%;
}


.cell[cellType = "I"] {
  background-color: Blue;
  border-top: 4px solid #9eabff;
  border-left: 4px solid #9eabff;
  border-right: 3px solid #08005b;
  border-bottom: 3px solid #08005b;
}
.cell[cellType = "T"] {
  background-color: Green;
  border-top: 4px solid #71f76a;
  border-left: 4px solid #71f76a;
  border-right: 3px solid #053a00;
  border-bottom: 3px solid #053a00;
}
.cell[cellType = "O"] {
  background-color: Orange;
  border-top: 4px solid #ffdca5;
  border-left: 4px solid #ffdca5;
  border-right: 3px solid brown;
  border-bottom: 3px solid brown;
}
.cell[cellType = "L"] {
  background-color: #ffe716;
  border-top: 4px solid lightyellow;
  border-left: 4px solid lightyellow;
  border-right: 3px solid #727004;
  border-bottom: 3px solid #727004;
}
.cell[cellType = "J"] {
  background-color: Red;
  border-top: 4px solid pink;
  border-left: 4px solid pink;
  border-right: 3px solid #7a0c00;
  border-bottom: 3px solid #7a0c00;
}
.cell[cellType = "S"] {
  background-color: Purple;
  border-top: 4px solid #d78ad8;
  border-left: 4px solid #d78ad8;
  border-right: 3px solid #4c0134;
  border-bottom: 3px solid #4c0134;
}
.cell[cellType = "Z"] {
  background-color: Cyan;
  border-top: 4px solid white;
  border-left: 4px solid white;
  border-right: 3px solid #007282;
  border-bottom: 3px solid #007282;
}


.col-md-1 {
  background-color: black;
  width: 7%;
  height: 4.5vh;
}

.leftEdge, .rightEdge, .topEdge, .bottomEdge {
  background-color: grey;
  border-left: 5px solid white;
  border-top: 5px solid white;
  border-right: 3px solid black;
  border-bottom: 3px solid black;
}
/*.leftEdge {
  border-left: 5px solid white;
}

.topEdge {
  border-top: 5px solid white;
}

.rightEdge,  {
  border-right: 3px solid black;
}

.bottomEdge {
  border-bottom: 3px solid black;
}*/

/*End of Board*/

/*Start of Score Sidebar*/
.col-md-3 {
  text-align: center;
  display: none;
  margin-top: 2.4%;
  border: 6px solid gray;
  background-color: gray;
  /*opacity: .7;*/
}
.next-block-shown {
  width: 15%;
  height: 3vh;
}
#nextBlock {
  margin-bottom: -5%;
}
.left-edge-next-block {
  margin-left: 32%;
}
.box-prep {
  background-color: gray;
  /*opacity: .7;*/
}

.box-prep2 {
  background-color: black;
}

.box-pop {
  border-top: 4px solid white;
  border-left: 4px solid lightgray;
  border-right: 3px solid darkgray;
  border-bottom: 3px solid black;
}

.sidebar-top-left-border {

}

.sidebar-bottom-right-border {

}

#blockS {
  height: 9vh;
}

.miniTitle {
  background-color: black;
  border: 3px solid gray;
  font-size: 5vh;
}

.score-2 {
  background-color: black;
}

.rows-cleared {
  background-color: black;
}

.next-block-box {
  background-color: black;
  padding: 5px;
}

#reset {
  background-color: black;
}

#music {
  background-color: black;
}

#pause {
  background-color: black;
}
/*End of Score Sidebar*/


/*Start TETRIS Coloring*/
.t1, .t2, .e, .r, .i, .s {
  font-family: tetris;
}


.red, .orange, .yellow, .green, .blue, .purple {
  font-family: buttons;
}

/*.font-buttons {

}*/

.font-size-1-5vh {
  font-size: 1.5vh;
}

.t1, .red {
  color: red;
}

.e, .orange {
  color: orange;
}

.t2, .yellow {
  color: yellow;
}

.r, .green {
  color: green;
}

.i, .blue {
  color: blue;
}

.s, .purple {
  color: purple;
}
/*End TETRIS Coloring*/


/*Start of Pause Menu*/
.red-button {
  background-color: red;
  color: black;
  font-family: buttons;
}

.unpause-box {
  display: inline-block;
  background-color: gray;
  margin-left: 34%;
}

.pause-text {
  margin-top: 10px;
  margin-left: 5px;
  margin-right: 5px;
  background-color: green;
  color: black;
}

.orange-button {
  background-color: orange;
  color: black;
  font-family: buttons;
}

.yellow-button {
  background-color: yellow;
  color: black;
  font-family: buttons;
}

.green-button {
  background-color: green;
  color: black;
  font-family: buttons;
}

.blue-button {
  background-color: blue;
  color: black;
  font-family: buttons;
}

.purple-button {
  background-color: purple;
  color: black;
  font-family: buttons;
}
.text-pause {
  display: none;
  /*text-align: center;*/
  color: green;
  font-family: buttons;
}

#pause-size {
  font-size: 22vh;
}
#controls {
  display: none;
}

.red-text {
  background-color: black;
  color: red;
  font-family: buttons;
}

#copyright {
  position: absolute; bottom: 5px;
}

/*Game Over Screen*/
#game-over {
  display: none;
  text-align: center;
  /*background-color: gray;*/
}

.game-over-title-box {
  display: inline-block;
  background-color: gray;
  /*margin-left: 17%;*/
}

#game-over-title {
  margin-left: 30px;
  margin-right: 30px;
}

.game-over-score {
  background-color: gray;
  margin-left: 30%;
}

.game-over-title {
  background-color: black;
  font-size: 12vh;
}

.col-md-4 {
  background-color: gray
  /*margin-top: 10px;*/
}