*
{
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}
body
{
  background: #444444;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
#mainWrapper
{
  text-align: center;
  width: 350px;
  padding: 25px;
  margin: 10px auto;
  background: white;
  box-shadow: 0 0 50px 15px black;
}
#justAnotherContainer
{
  width: 100%;
  height: 100%;
  position: relative;
}
h1
{
  border-bottom: 1px solid black;
}
h2
{
  margin-top: 5px;
}
#container
{
  width: 300px;
  height: 300px;
  position: relative;
  margin: 10px auto;
}
#simon {
  display: grid;
  display: flex;
  flex-wrap: wrap;
  border: 10px solid black;
  width: 100%;
  height: 100%;
  border-radius: 100%;
  overflow: hidden;
}
/*
  The blockage box's sole purpose is to create an invisible block
  over the Simon game that prevents the user from being able to
  click on any of the colored buttons while the computer is
  showing the pattern. This prevents a lot of issues with the
  user clicking while the computer is generating the pattern.
  When the user can play, the display is "none".
  When the user can't play, the display is "block".
*/
#blockage
{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  background-color: #44444400;/*Prevent block from being visible*/
  z-index: 10;
}
.button {
  width: 50%;
  height: 50%;
  cursor: pointer;
}
.button#green, .button#yellow
{
  border-right: 2.5px solid black;
}
.button#red, .button#blue
{
  border-left: 2.5px solid black;
}
.button#green, .button#red
{
  border-bottom: 2.5px solid black;
}
.button#yellow, .button#blue
{
  border-top: 2.5px solid black;
}

#green 
{
  background-color: rgb(0, 180, 0);
}
#green.active, #green:active
{
  background-color: rgb(0, 255, 0);
  background: radial-gradient(rgb(0, 255, 0) 20%, rgb(0, 180, 0));
}

#red 
{
  background-color: rgb(180, 0, 0);
}
#red.active, #red:active
{
  background-color: rgb(255, 0, 0);
  background: radial-gradient(rgb(255, 0, 0) 20%, rgb(180, 0, 0));
}

#yellow 
{
  background-color: rgb(180, 180, 0);
}
#yellow.active, #yellow:active
{
  background-color: rgb(255, 255, 0);
  background: radial-gradient(rgb(255, 255, 0) 20%, rgb(180, 180, 0));
}

#blue 
{
  background-color: rgb(0, 0, 180);
}
#blue.active, #blue:active
{
  background-color: rgb(0, 0, 255);
  background: radial-gradient(rgb(0, 0, 255) 20%, rgb(0, 0, 180));
}

#start-btn {
  margin-top: 20px;
  font-size: 18px;
  cursor: pointer;
  margin: auto;
  display: block;
  padding: 10px;
}
p
{
  margin-top: 10px;
}

#warning
{
  width: 100%;
  height: 100%;
  padding: 25px;
  position: absolute;
  top: 0;
  left: 0;
  background-color: white;
  z-index: 10;
  display: none;
}
@media only screen and (min-width: 768px)
{
  #mainWrapper
  {
    width: 450px;
  }
  #container
  {
    width: 400px;
    height: 400px;
  }
}
@media only screen and (max-height: 650px)
{
  #mainWrapper
  {
    height: 100%;
    padding: 0px;
  }
  #warning
  {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #simon {
    display: none;
  }
}