body {
background-color: #232323;
margin: 0;
font-family: "Optima", "Avenir";
}

.white {
  background-color: #ffffff;
}

.black {
  color: #222222;
}


.ctnimg {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
}

.aimg {
 margin: 0 20px;
 max-width: 420px;
 display: block;
 padding: 0;
}

.write {
  color: #232323;
  font-family: Optima;
  font-size: 18px;
  padding: 20% 0;
  text-align: center;
}

hr {
  color: #232323;
}

.gbtn {
  display: block;
  width: 50%;
  margin: 0 auto;
  background-color: #1860c0;
  color: white;
  font-family: Optima;
  text-transform: none;
  border-radius: 6.5%;
  border: none;
  font-size: 20px;
  padding: .5%;
}

.gabtn {
  margin: 100px 0 10px auto;
  display: block;
  background-color: #232323;
  color: white;
  text-decoration: underline;
  font-family: Optima;
  text-transform: none;
  border-radius: 6.5%;
  border: none;
  font-size: 12px;
}

.instructions {
  display: block;
  margin: 100px auto 20px 0;
  color: #aaaaaa;
  font-family: Optima;
  text-transform: none;
  font-size: 12px;
}

.R {
  color: #ff0000;
}

.G {
  color: #00ff00;
}

.B {
  color: #0000ff;
}


.square {
width: 30%;
background-color: purple;
padding-bottom: 30%;
float: left;
margin: 1.66%;
border-radius: 50%;
transition: background 0.6s;
-webkit-transition: background 0.6s;
-moz-transition: background 0.6s;
}

div.square:active {
width: 27%;
}


.bg {
  display: block;
  width: 98%;
  margin: 0 auto;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: -999;
  position: absolute;
-webkit-animation-duration: 10s;
-moz-animation-duration: 10s;
-o-animation-duration: 10s;
  animation-duration: 10s;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-o-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes fadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
}@-moz-keyframes fadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
}@-o-keyframes fadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
}
         
@keyframes fadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

.fadeIn {
  -webkit-animation-name: fadeIn;  
  -moz-animation-name: fadeIn;  
  -o-animation-name: fadeIn;
    animation-name: fadeIn;
}

.lgcontainer {
  margin: 10px auto;
  max-width: 900px;
}

#container {
margin: 20px auto;
max-width: 600px;
}

.containerB {
  margin: 10px auto;
  max-width: 900px;
  
}

.space {
  margin: 10px;
  text-align: center;
}

.letter {
    font-size: 120%;
    color: white;
    position: absolute;
    left: -100px;
    width: 200px;
    height: 200px;
    -webkit-animation: slide 0.5s forwards;
    -webkit-animation-delay: 0s;
    animation: slide 0.5s forwards;
    animation-delay: 0s;
}
@-webkit-keyframes slide {
    100% { left: 50%; }
}
@-moz-keyframes slide {
    100% { left: 50%; }
}
@keyframes slide {
    100% { left: 50%; }
}

.bletter {
  color: steelblue;
  font-size: 600%;
  font-weight: 600;
}

.cletter {
  color: steelblue;
  font-size: 400%;
  font-weight: 600;
}

.gelo {
  color: white;
  position: relative;
  text-align: center;
  font-size: 500%;
  animation-delay: 3s;
  font-family: 'Nothing You Could Do', cursive;
  font-weight:800;
-webkit-animation-duration: 20s;
-moz-animation-duration: 20s;
-o-animation-duration: 20s;
  animation-duration: 20s;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-o-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes fadeInd {
  0% {opacity: 0;}
  100% {opacity: 1;}
}@-moz-keyframes fadeInd {
  0% {opacity: 0;}
  100% {opacity: 1;}
}@-o-keyframes fadeInd {
  0% {opacity: 0;}
  100% {opacity: 1;}
}
         
@keyframes fadeInd {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

.fadeInd {
  -webkit-animation-name: fadeInd;  
  -moz-animation-name: fadeInd;  
  -o-animation-name: fadeInd;
    animation-name: fadeInd;
}

.rgb {
  color: white;
  font-family: 'Chewy', cursive;
  text-align: center;
  font-size: 800%;
  animation-delay: 1s;
-webkit-animation-duration: 7s;
-moz-animation-duration: 7s;
-o-animation-duration: 7s;
  animation-duration: 7s;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-o-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes colors {
  0% {color: #ffffff;}
  25% {color: #ff0000;}
  50% {color: #00ff00;}
  75% {color: #0000ff;}
  100% {color: #ffffff;}
}@-moz-keyframes colors {
  0% {color: #ffffff;}
  25% {color: #ff0000;}
  50% {color: #00ff00;}
  75% {color: #0000ff;}
  100% {color: #ffffff;}
}@-o-keyframes colors {
  0% {color: #ffffff;}
  25% {color: #ff0000;}
  50% {color: #00ff00;}
  75% {color: #0000ff;}
  100% {color: #ffffff;}
}
         
@keyframes colors {
  0% {color: #ffffff;}
  25% {color: #ff0000;}
  50% {color: #00ff00;}
  75% {color: #0000ff;}
  100% {color: #ffffff;}
}

.colors {
  -webkit-animation-name: colors;  
  -moz-animation-name: colors;  
  -o-animation-name: colors;
    animation-name: colors;
}


.imagesA {
margin: 20px auto;
max-width: 600px;
}

.imagesB {
margin: 20px auto;
max-width: 600px;
}

.imagesC {
margin: 20px auto;
max-width: 600px;
}

.imagesD {
margin: 20px auto;
max-width: 600px;
}

.imagesE {
margin: 20px auto;
max-width: 600px;
}

h1 {
color: white;
font-family: "Trebuchet";
text-align: center;
background: steelblue;
margin: 0;
font-weight: 400;
/*text-transform: uppercase;*/
line-height: 1.1;
padding: 20px 0;
}

.display-off {
  display: none;
}

.display-on {
  display: block;
}


#stripe {
background-color: white;
height: 30px;
text-align: center;
color: black;
}

#btm-stripe {
  margin-top: 120px;
  height: 50px;
  font-size: 3vmax;
}

.selected {
background: #1860c0;
color: white;
}

#colorDisplay {
font-size: 4vmax;
text-transform: uppercase;
}

#gametitle  {
  font-size:1.5vmax;
}

button {
border: none;
background: none;
text-transform: uppercase;
height: 100%;
font-weight: 700;
color: steelblue;
letter-spacing: 1px;
font-size: inherit;
transition: all 0.3s;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
}

button:hover {
color: white;
background: steelblue;
font-size: 120%;
border: 1px steelblue #808080;
border-radius: 20px;
transition: 
            color 1s ease-in-out,
            font-size 500ms ease-in-out,
            background 500ms ease-in-out,
            border 500ms ease-in-out,
            border-radius 700ms ease-in-out;
}

#message {
display: inline-block;
width: 100%;
}

.correct {
  color: white;
  font-family: Optima;
  font-size: 25px;
  margin: 0 auto;
  white-space: nowrap;
  overflow: hidden;
  width: 20em;
  text-align: center;
  animation: type 2s steps(100); 
}

@keyframes type{ 
  from { width: 0; } 
} 

@keyframes blink{
  to{opacity: .0;}
}