/*----------------------------*\
  1. MAIN SETUP
\*----------------------------*/
@import url("https://fonts.googleapis.com/css?family=Alfa+Slab+One|VT323");
div {
  box-sizing: border-box; }

body {
  background: #eacda3;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to left, #eacda3, #d6ae7b);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to left, #eacda3, #d6ae7b);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  height: 100vh; }

.unclickable {
  cursor: default;
  pointer-events: none; }

.game-btn {
  cursor: pointer; }

.modal {
  background: rgba(51, 51, 51, 0.9);
  font-family: 'VT323', monospace;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 2; }

.modal h1 {
  color: #DC0D29;
  font-size: 5em; }

.hidden {
  display: none; }

/*----------------------------*\
  2. GAME
\*----------------------------*/
.game {
  background: #333;
  border-radius: 100%;
  box-shadow: 0px 0px 15px rgba(0, 2, 34, 0.6);
  display: flex;
  flex-wrap: wrap;
  max-width: 484px;
  max-height: 484px;
  height: 100%;
  width: 100%; }

.top-left,
.top-right,
.bottom-left,
.bottom-right {
  border: 12px solid #333;
  width: 50%;
  height: 50%; }

.top-left {
  background: #00A74A;
  border-top-left-radius: 100%; }

.top-right {
  background: #9F0F17;
  border-top-right-radius: 100%;
  margin: 0; }

.bottom-left {
  background: #CCA707;
  border-bottom-left-radius: 100%; }

.bottom-right {
  background: #094A8F;
  border-bottom-right-radius: 100%; }

/*----------------------------*\
  3. CONTROLS
\*----------------------------*/
.middle {
  border: 12px solid #333;
  text-align: center;
  background: #ECE7EE;
  border-radius: 100%;
  position: relative;
  top: -75%;
  left: 25%;
  width: 50%;
  height: 50%;
  z-index: 1; }

.middle h1 {
  font-family: 'Alfa Slab One', cursive;
  font-size: 3em;
  margin-bottom: 0; }

/*----------------------------*\
  4. STRICT LED
\*----------------------------*/
.led-row {
  display: flex;
  justify-content: flex-end; }

.led-light {
  background: #32050C;
  height: 8px;
  width: 8px;
  border: 2px solid #222;
  border-radius: 100%;
  margin-right: 12.5%;
  margin-bottom: 1%; }

.led-on {
  background: #DC0D29; }

/*----------------------------*\
  5. DISPLAY
\*----------------------------*/
.row {
  display: flex;
  align-items: baseline;
  justify-content: center; }

.row > div,
.row > span {
  margin: 0 auto; }

.row > span {
  margin-right: 5%; }

.row > span:first-child {
  margin-right: 4%; }

.row > span:nth-child(2) {
  margin-right: -6%; }

.display {
  display: inline-block;
  background: #32050C;
  border: 4px solid #222;
  border-radius: 10px;
  color: #430710;
  font-family: 'VT323', monospace;
  font-size: 2em;
  height: 40px;
  width: 60px; }

/*----------------------------*\
  6. BUTTONS
\*----------------------------*/
.btn {
  background: #FC0102;
  border: 4px solid #333;
  border-radius: 100%;
  box-shadow: 0px 2px 3px #222;
  cursor: pointer;
  display: inline-block;
  width: 25px;
  height: 25px; }

.btn:last-child {
  background: yellow; }

.row span,
.switch-row {
  font-family: Arial;
  font-size: .75em; }

/*----------------------------*\
  7. POWER SWITCH
\*----------------------------*/
.switch-row {
  display: flex;
  align-items: baseline;
  justify-content: center;
  height: 40px; }

.switch-row span {
  margin: 2%; }

.slot {
  background: #222;
  border-radius: 2px;
  display: flex;
  margin-top: 10%;
  width: 40px;
  height: 20px; }

.switch {
  background: #3193DE;
  border: 1px solid #222;
  border-radius: 4px;
  cursor: pointer;
  height: 20px;
  width: 18px; }

/*----------------------------*\
  9. MEDIA QUERIES
\*----------------------------*/
@media only screen and (max-width: 475px) {
  .middle h1 {
    font-size: 2em; }

  .led-light {
    margin-right: 11%; } }

/*# sourceMappingURL=simon.css.map */