@keyframes keyFade {
 0%   { opacity: 0; }
 25%  { opacity: 1; }
 65%  { opacity: 1; }
 100% { opacity: 0; }
}

@keyframes keyHold {
 0%   { opacity: 0; }
 25%  { opacity: 1; }
 65%  { opacity: 1; }
 100% { opacity: 0; }
}

.key--letter {
 animation-fill-mode: forwards;
}

.key--letter.fade {
 animation-name: keyFade;
 animation-duration: 0.8s;
 animation-timing-function: ease;
}

.key--letter.hold {
 animation-name: keyHold;
 animation-duration: 5s;
 animation-timing-function: ease;
}

#start.blink {
 animation: blink 2s steps(2, start) infinite;
 animation-timing-function: ease;
}
#start:hover {
 animation: none;
}

@keyframes blink {
 0%   { opacity: 0; }
 25%  { opacity: 1; }
 65%  { opacity: 1; }
 100% { opacity: 0; }
}

.fade-in { 
 opacity: 0; 
 animation: fadeIn 1s forwards; 
}
.fade-out { 
 opacity: 1; 
 animation: fadeOut 1s forwards; 
}
@keyframes fadeIn { 
 to { opacity: 1; } 
}
@keyframes fadeOut { 
 to { opacity: 0; } 
}

@media (max-width: 700px) {
 #key,
 #pangrams,
 .level,
 #descriptive-text {
   display: none !important;
 }

 #end { /* create a new div with just # */
   display: block;
 }
 .key--row:nth-of-type(2) {
  padding-top: 0;
}
}

@media (min-width: 701px) {
 #end {
   display: none;
 }
}