body {
  margin: 0;
  font-family: Helvetica;
}

/*============================================================
                           NAVBAR
============================================================*/

.navbar {
  overflow: hidden;
  background-color: #000;
  font-family: Helvetica;
  font-weight: bold;
  position: fixed;
  width: 100%;
}

.ghostnav {
  background-color: #000;
  font-family: Helvetica;
  font-weight: bold;
  color: #fff;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.navbar a {
  float: left;
  color: #fff;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.navbar a:hover {
  background-color: #f00;
  color: white;
}

.navbar .active {
  background-color: #ff0000;
  color: black;
}

.navbar .right {
  float: right;
}

/*============================================================
                           HEADER
============================================================*/

.header {
  padding: 50px; 
  text-align: center;
  background-color: red;
}

/*Bigger Header*/
.header h1 { 
  font-family: Arial;
  font-size: 48px;
  font-weight: bold;
}

/*Smaller Header*/
.header p { 
  font-family: Arial;
  font-size: 24px;
  font-weight: bold;
}

/*============================================================
                            BODY
============================================================*/

.row {
  display: flex;
  flex-wrap: nowrap;
}

.side {
  flex: 5%;
  background-color: #e7e7e7;
  padding: 20px;
}

.center {
  flex: 80%;
  background-color: white;
  padding: 20px;
  text-align: center;
}

@media screen and (max-width: 300px) {
  .side { 
    flex: 0;
  }
  .center {
    flex: 100%;
  }
}

/*============================================================
                           FOOTER
============================================================*/

.footer {
  padding: 20px;
  text-align: center;
  background: #ccc;
}

.footer p {
  font-family: Arial;
  font-size: 10px;
}

/*============================================================
                         HOME PAGE
============================================================*/

.menuContainer {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  padding: 5px;
}

.menuContainer .menuItem {
  background-color: #f1f1f1;
  height: 200px;
  width: 200px;
  margin: 5px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}

/*============================================================
                            SIMON
============================================================*/

.simonGame {
  margin: auto;
  border-spacing:20px;
}

.simonButton {
  width:80px;
  height:80px;
}

.simon .stats {
  text-align: center;
  height: 125px;
  word-wrap: break-word;
}

#newGame {
  font-family: Helvetica;
  background-color: #f00;
  border: none;
  color: white;
  padding: 10px 15px;
  text-align: center;
  text-decoration: none;
  font-size: 15px;
  cursor: pointer;
  visibility: visible;
}

#newGame:hover {
  background-color: #d00;
}

#redButton {
  background-color:#f00;
  border: 10px solid black;
}

#yellowButton {
  background-color:#ff0;
  border: 10px solid black;
}

#greenButton {
  background-color:#0f0;
  border: 10px solid black;
}

#blueButton {
  background-color:#00f;
  border: 10px solid black;
}

/*============================================================
                            MEMORY
============================================================*/

.deck {
  margin: 0 auto;
  background-color: #c0c0c0;
  width: 400px;
  height: 400px;
  padding: 10px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
}

.deck .card {
  width: 80px;
  height: 80px;
  background-color: #909090;
  margin: 10px;
  text-align: center;
  font-size: 48px;
  font-family: Arial;
  font-weight: bold;
  line-height: 80px;
  /*
  visibility: hidden;
  padding: 5px;
  */
}

.deck .card .content {
  visibility: hidden;
}

.deck .flipped {
  background-color: #808080;
}

/*============================================================
                            GAME
============================================================*/

#game {
  border: 1px solid black;
}

.gameContainer {
  text-align: center;
}

/*============================================================
                     LOGIN/SIGNUP PAGE
============================================================*/

.login, .signup {
  margin: auto;
  margin-bottom: 20px;
  background-color: #e7e7e7;
  padding: 10px;
  width: 40%;
}

.login {
  height: 153px;
}

.signup {
  height: 298px;
}

@media screen and (max-width: 1064px) {
  .login, .signup {
    width: 329px;
  }
}

.login h1, .signup h1 {
  font-family: Arial;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  margin-top: 0;
  margin-bottom: 15px;
}

.login .inputField, .signup .inputField {
  font-family: Helvetica;
  font-size: 16px;
  margin: 0;
}

.login form, .signup form {
  margin-top: 5px;
  margin-bottom: 5px;
}

.login input, .signup input {
  float: right;
}

.error {
  font-family: Courier;
  font-size: 13px;
  margin: 0;
  color: red;
}

.errorContainer {
  margin: 0;
  width: 70%;
  float: left;
}

.login button, .signup button {
  font-family: Helvetica;
  background-color: #777;
  border: none;
  color: white;
  padding: 10px 15px;
  text-align: center;
  text-decoration: none;
  font-size: 15px;
  cursor: pointer;
  float: right;
}

.login button:hover, .signup button:hover {
  background-color: #555;
}

.login button:active, .signup button:active {
  background-color: #333;
}