body{
  background: #0b0d26;
  width: 100%;
  height: 100vh;
  margin: 0;
  position: relative;
}

.bg{ /*Background image*/ 
  width: 100%;
  height: 100vh;
  background: #061640;
  background-image: url(https://media.giphy.com/media/3qePHOEQYRPDG/giphy.gif); /*Background image is commented out during development*/
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  opacity: .4;
  position: fixed;
  left: 0;
  right: 0;
  z-index: -1;
  -webkit-filter: blur(5px); -moz-filter: blur(5px); -o-filter: blur(5px); -ms-filter: blur(5px); filter: blur(5px);
}

/*--------------------------------------------------------------
  ## Main Container
--------------------------------------------------------------*/
.container { /*Main game container*/
  position: relative;
  max-width: 100vh;
  margin: auto;
}

/*--------------------------------------------------------------
  ## Main Container >>    ### Header
--------------------------------------------------------------*/
header{ /*Header containing the blue option boxes and Game title h1*/
  display: flex;
  justify-content: space-around;
  flex-wrap: nowrap;
  align-items: center;
}
/*--------------------------------------------------------------
  ## Main Container >>    ### Wrapper
--------------------------------------------------------------*/
.wrapper { /* Contains the diamonds and 'You Win' message*/
  position: relative;
  height: 50%;
  max-width: 700px;
  min-height: 400px;
  margin: auto;
  display: flex;
}

/*--------------------------------------------------------------
# Text / Font
--------------------------------------------------------------*/

body{
  font-family: 'Dosis', sans-serif;
  color: #fff;
}

/*--------------------------------------------------------------
  ## 'Hit the Diamond' (Game title h1)
--------------------------------------------------------------*/
#gameTitle{
  background-image: url(http://hd.wallpaperswide.com/thumbs/abstract_wallpaper_for_mac-t2.jpg);
  background-size: cover;
  filter: brightness(1.5) drop-shadow(-2px 2px 0px rgba(255,255,255,1));
  color: #b95087;
  -webkit-text-fill-color: transparent; text-fill-color: transparent;
  background: -webkit-linear-gradient(transparent, transparent), url(http://hd.wallpaperswide.com/thumbs/abstract_wallpaper_for_mac-t2.jpg);
  background-size: cover;
  background: -o-linear-gradient(transparent, transparent);
  -webkit-background-clip: text; background-clip: text;
  font-size: 5em;
  text-align: center;
  margin: 0; 
  padding: .5em;
}

/*--------------------------------------------------------------
  ## 'You Win'
--------------------------------------------------------------*/
#winMessage {
  text-transform: uppercase;
  text-align: center;
  text-shadow: 0px 0px 10px #ffffff;
  font-size: 10em;
  vertical-align: middle;
  margin: auto;
  position: relative;
  padding: 0;
  transition: .75s;
  opacity: 0;
  z-index: -1;
  line-height: 1em;
}

/*--------------------------------------------------------------
# Diamonds
--------------------------------------------------------------*/

/*Contains the large diamond shape (#diamonds) which in turn contains the four smaller diamonds*/
#diamond_container { 
  position: absolute;
  width: 50%;
  height: 50%;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}

/* Big diamond shaped box which contains all 4 diamonds */
#diamonds {
  position: absolute;
  z-index: 5;
  left: 0; right: 0;
  top: 0; bottom: 0;
  margin: auto;
  width: 100%;
  height: 0;
  padding: 50% 0;
  text-align: center;
  -ms-transform: rotate(45deg);  -moz-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);  transform: rotate(45deg);
}


/* General Diamond styles */
.diamond {
  position: absolute;
  width: 49%;
  height: 49%;
  transition: .5s;
  box-sizing: border-box;
  cursor: pointer;
}

/* We can't animate smoothly to different gradient backgrounds so 
  we have a .cover div element on top that we just fade in and out
  for a glowing effect*/
.diamond .cover {
  border-radius: inherit;
  background-image: linear-gradient(#ccc, #fff);
  content: '';    
  display: block;
  height: 100%;
  position: absolute;
  top: -2px; left: -2px; /* Offset glovwing border */
  opacity: 0;
  width: 100%;
  box-sizing: content-box;
  transition: opacity 0.45s;
}

.diamond:hover .cover {
  opacity: 1;
}

.diamond.glowing .cover {
  -webkit-animation: smoothFade 1s;
     -moz-animation: smoothFade 1s;
          animation: smoothFade 1s;
}

/*--------------------------------------------------------------
  ## White Diamond
--------------------------------------------------------------*/
/*White Diamond Default*/
#white-diamond {
  left: 0;
  top: 0;
  border: 2px solid #fff;
  background: rgba(255, 255, 255, 0.71);
  background: -webkit-radial-gradient(rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0.91));
  background: radial-gradient(rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0.91));
  box-sizing: border-box;
  transition: .3s;
}

/*White Diamond Glowing*/
#white-diamond .cover {
  background: #ffffff;
  -moz-box-shadow: 2px 1px 45px -3px rgba(255,255,255,1);
  box-shadow: 2px 1px 45px -3px rgba(255,255,255,1);
  border: 2px solid #fff;
}
/*--------------------------------------------------------------
  ## Yellow Diamond
--------------------------------------------------------------*/
/*Yellow Diamond Default*/
#yellow-diamond {
  right: 0;
  top: 0;
  background: #ece273;
  background: rgba(236, 226, 115, 71);
  border: 2px solid #fff79f;
  background: -webkit-radial-gradient(rgba(239, 232, 149, 0.4), 
                                      rgba(233, 226, 147, 0.85));
}
/*Yellow Diamond Glowing*/
#yellow-diamond .cover {
  background: #fff79f;
  border: 2px solid #fffde7;
  background: -webkit-radial-gradient(rgb(255, 255, 255), rgb(255, 245, 135));
  box-shadow: 2px 1px 45px -3px #fffcdc;
}

/*--------------------------------------------------------------
  ## Blue Diamond
--------------------------------------------------------------*/
/*Blue Diamond Default*/
#blue-diamond {
  left: 0;
  bottom: 0;
  background: #92edf0;
  background: rgba(146, 237, 240, 71);
  border: 2px solid #92edf0;
  background: -webkit-radial-gradient(rgba(146, 237, 240, 0.33), 
    rgba(146, 237, 240, 0.85));
}
/*Blue Diamond Glowing*/
#blue-diamond .cover {
  background: #92edf0;
  border: 2px solid #5efaff;
  background: -webkit-radial-gradient(rgb(255, 255, 255), rgb(146, 237, 240));
  box-shadow: 2px 1px 45px -3px rgb(198, 245, 247);
}

/*--------------------------------------------------------------
  ## Pink Diamond
--------------------------------------------------------------*/
/*Pink Diamond Default*/
#pink-diamond {
  right: 0;
  bottom: 0;
  border: 2px solid #ef82c5;
  background: #ef82c5; /*Fallback: Solid Pink color*/
  background: rgba(239, 130, 197, 71); /*Fallback: Semi-transparent Pink color*/
  background: -webkit-radial-gradient(rgba(239, 130, 197, 0.33), /*Prefixed for Webkit: Radial gradient with mostly transparent center*/
    rgba(239, 130, 197, 0.85));
  background: radial-gradient(rgba(239, 130, 197, 0.33),  /* Standard Syntax: Radial gradient with mostly transparent center*/
    rgba(239, 130, 197, 0.85));
}
/*Pink Diamond Glowing*/
#pink-diamond .cover {
  background: #f9d4eb;
  border: 2px solid #f9d4eb;
  background: -webkit-radial-gradient(rgb(255, 255, 255), rgb(239, 130, 197));
  box-shadow: 2px 1px 45px -3px rgb(239, 130, 197);
}


/*--------------------------------------------------------------
# Controls / Options (Blue boxes)
--------------------------------------------------------------*/
.controls {
  padding: 1em 0;
  text-align: center;
  background: #6ab2bf;
  background: -webkit-radial-gradient(rgba(0, 247, 255, 0), rgba(0, 247, 255, 0.42));
  border: 1px solid #7bccd5;
  box-sizing: border-box;
  width: 180px;
}

.option { /* Mini Boxes within controls*/
  /* Ex: "★
       FORGIVING" */
  text-align: center;
  flex-wrap: wrap;
  cursor: pointer;
  opacity: .25;
  transition: .3s;
  display: inline-flex;
  margin: 0px; 
  box-sizing: border-box;
  width: 49%;
  min-width: 60px;
}

.option:hover {
  opacity: 1;
}

/*--------------------------------------------------------------
 # Controls / Options >>   ## Icon
--------------------------------------------------------------*/
.option i {
  text-align: center;
  width: 100%;
  display: block;
  font-size: 3em;
  font-style: normal;
}

/*--------------------------------------------------------------
 # Controls / Options >>   ## Text
--------------------------------------------------------------*/
/*--------------------------------------------------------------
    ### Header ("Round", "Mode")
--------------------------------------------------------------*/
.controls h3 {margin: 0 auto;}

/*--------------------------------------------------------------
 # Controls / Options >>    ### Under text
--------------------------------------------------------------*/
.option span {
  text-align: center;
  font-size: .8em;
  display: block;
  width: 100%;
}


/*--------------------------------------------------------------
 # Controls / Options >>  ## Active (glowing) class
--------------------------------------------------------------*/
.option.active, #rounds {
    text-shadow: 0px 0px 10px #ffffff;
    opacity: 1;
}

/*--------------------------------------------------------------
 # Controls / Options >>  ## Animated Glowing 'Play' button
--------------------------------------------------------------*/
#replay.playMe { /*When the user first loads the page, the play button will have a glowing/blinking animation until they start the game */
  opacity: 1;
-webkit-animation: miniGlow .75s ease-in-out infinite alternate;
   -moz-animation: miniGlow .75s ease-in-out infinite alternate;
        animation: miniGlow .75s ease-in-out infinite alternate;
}


/*--------------------------------------------------------------
                 # 'You Win' Animation
--------------------------------------------------------------*/

/*--------------------------------------------------------------
 # 'You Win' Animation >>   ## Intro
--------------------------------------------------------------*/
/*--------------------------------------------------------------
 # 'You Win' Animation >>   ## Intro >>    ### Diamonds
--------------------------------------------------------------*/
/* All of the diamonds fade out */
#diamonds.winner .diamond{
  animation: scaleOut .5s ease-in-out;
  -webkit-animation-fill-mode: forwards;
} 

#info.winner {
  animation: fadeOut .5s ease-in-out;
  -webkit-animation-fill-mode: forwards;
}

/* Animation delays for a one-at-a-time effect */
#diamonds.winner #blue-diamond  {animation-delay: 0.0s; }
#diamonds.winner #white-diamond {animation-delay: 0.5s; }
#diamonds.winner #yellow-diamond{animation-delay: 1.0s; }
#diamonds.winner #pink-diamond  {animation-delay: 1.5s; }

/*--------------------------------------------------------------
 # 'You Win' Animation >>   ## Intro >>     ### Win Message
--------------------------------------------------------------*/
#winMessage.winner {
  animation: fadeIn .5s ease-in-out;
  -webkit-animation-delay: 2s;
  -webkit-animation-fill-mode: forwards;
  z-index: 2;
}

/*--------------------------------------------------------------
 # 'You Win' Animation >>   ## Outro
--------------------------------------------------------------*/
/*--------------------------------------------------------------
 # 'You Win' Animation >>   ## Outro >>    ### Diamonds
--------------------------------------------------------------*/
/* After the "You Win" messages fades out the diamonds scale back into view */
#diamonds.winner.outro .diamond{
  opacity: 0;
  transform: scale(0);
  animation: scaleUp .5s ease-in-out;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
} 

/* Animation delays for a one-at-a-time effect */
#diamonds.winner.outro #blue-diamond  {animation-delay: 0.5s;}
#diamonds.winner.outro #white-diamond {animation-delay: 1.0s;}
#diamonds.winner.outro #yellow-diamond{animation-delay: 1.5s;}
#diamonds.winner.outro #pink-diamond  {animation-delay: 2.0s;}

/*--------------------------------------------------------------
 # 'You Win' Animation >>   ## Outro >>    ### Win Message
--------------------------------------------------------------*/
#winMessage.winner.outro { 
  animation: fadeOut .5s ease-in-out;
  animation-delay: 0s;
  -webkit-animation-delay: 0s;
  -webkit-animation-fill-mode: initial;
  animation-fill-mode: initial;
}

#info.winner.outro {
  animation: fadeIn .5s ease-in-out;
  -webkit-animation-fill-mode: forwards;
}


/*--------------------------------------------------------------
 # More Info button
--------------------------------------------------------------*/

#info {
  height: 100px;
  width: 100px;
  vertical-align: middle;
  display: block;
  transform: rotate(45deg);
  margin-left: 20%;
  margin-top: -50px;
  margin-bottom: 20px;
  position: relative;
  bottom: 10px;
  background: -webkit-radial-gradient(rgba(0, 247, 255, 0), rgba(0, 247, 255, 0.42));
  border: 1px solid #7bccd5;
  box-sizing: border-box;
  cursor: pointer;
}

#info h3 {
  transform: rotate(-45deg);
  text-align: center;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  vertical-align: middle;
  line-height: 30px;
  color: #fff;
}

/*--------------------------------------------------------------
 # Footer
--------------------------------------------------------------*/

footer {
  background: -webkit-radial-gradient(rgba(0, 247, 255, 0), rgba(239, 130, 197, 0.42));
  border-top: 1px solid #ef82c5;
  /* padding: 0 10vw; */
  box-sizing: border-box;
  max-height: 0px;
  opacity: 0;
  transition: 1s;
  overflow: hidden;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  text-shadow: 0px 0px 10px #000000;
}
footer.visible {
  max-height: 1500px;
  opacity: 1;
}
footer div {
  flex-basis: 50%;
  min-width: 300px;
  box-sizing: border-box;
  padding: 0 1em;
  max-width: 500px;
}

footer a {
    color: #00deb7;
}

ul {
  list-style: none;
  margin-left: 0;
  padding-left: 0;
}

li {
  padding-left: 1em;
  text-indent: -1em;
}

li:before {
  content: "\2605";
  padding-right: 5px;
}

/*--------------------------------------------------------------
 # Media Queries
--------------------------------------------------------------*/
@media(max-width: 750px) {
  header {align-items: stretch; flex-wrap: wrap;}
  footer div {flex-basis: 100%;}
  #gameTitle {
    flex-basis: 100%;
    order: -1;
    font-size: 4em;
  }
  .option   { flex-basis: 48%; width: 48%;}
  .controls { padding: .5em 0; width: 150px;}
  .option i { display: block; font-size: 2em;}
}

@media(min-aspect-ratio: 2/1) and (max-width: 750px){
  #gameTitle {order: 0; padding: 0;}
  container { max-width: 100vw;}
}

@media(max-width: 500px) {
  #gameTitle {
    padding: 0;
    margin: 0 auto;
    font-size: 3em;
  }
 
  .wrapper {
    min-height: 300px;
  }
}

@media(max-height: 500px) and (min-aspect-ratio: 5/4) {
  .container {max-width: 100vw;}
  header {    justify-content: space-between;    margin: 0 20px;}
  .wrapper { max-width: 400px; min-height: 0; }

}

@media(min-aspect-ratio: 2/1) {
  header{flex-wrap: nowrap; justify-content: space-around;}
  .container {max-width: 75vw;}
}

@media(min-width: 1000px) and (min-aspect-ratio: 5/4) {
  header{flex-wrap: nowrap; justify-content: center;}
  .container {max-width: 75vw;}
}


/*--------------------------------------------------------------
 # Animation Keyframes (Definitions)
--------------------------------------------------------------*/

/*--------------------------------------------------------------
   ## smoothFade (used for glowing diamonds)
--------------------------------------------------------------*/
@-webkit-keyframes smoothFade {
    0% {opacity: 0; }
   50% {opacity: 1; }
  100% {opacity: 0; }
}

@keyframes smoothFade {
    0% {opacity: 0; }
   50% {opacity: 1; }
  100% {opacity: 0; }
}

/*--------------------------------------------------------------
   ## fadeIn
--------------------------------------------------------------*/
@-webkit-keyframes fadeIn {
     0% {opacity: 0;}
   100% {opacity: 1;}
}

@keyframes fadeIn {
     0% {opacity: 0;}
   100% {opacity: 1;}
}

/*--------------------------------------------------------------
   ## fadeOut
--------------------------------------------------------------*/
@-webkit-keyframes fadeOut {
    0% {opacity: 1; }
  100% {opacity: 0; }
}

/*--------------------------------------------------------------
   ## scaleOut
--------------------------------------------------------------*/
@-webkit-keyframes scaleOut {
    0% {opacity: 1; transform: scale(1); }
  100% {opacity: 0; transform: scale(0); }
}


/*--------------------------------------------------------------
   ## scaleUp
--------------------------------------------------------------*/
@-webkit-keyframes scaleUp {
    0% { opacity: 0; transform: scale(0); }
  100% { opacity: 1; transform: scale(1); }
}

/*--------------------------------------------------------------
   ## miniGlow (Used for the play button on first run)
--------------------------------------------------------------*/
@keyframes miniGlow {
  from {text-shadow: 0px 0px 1px rgba(255,255,255,0);  }
  to   {text-shadow: 0px 0px 15px #ffffff;}
}