@font-face{
  font-family: "digital";
  src: url("https://cornyoffthecob.neocities.org/DigitalNormal-xO6j.otf") format("opentype");
}

#secret { display: none;
}


html
{
  background-color: black;
  height: 200vh;
}


body {
  border: green 3px dotted;
  color: white;
  font-family: digital;
  padding: 1em;
  line-height: 1.7em;
}

ul li:nth-child(odd) {
  content: "❧ "; 
  color: gold;
  text-shadow: 1px 1px 2px blue;
}

ul li:nth-child(even) {
  content: "★ "; 
  color: royalblue;
  text-shadow: 1px 1px 1px gold;
}

.mid {
  position: absolute;
  bottom: -2em;
}

.corner {
  top: 40em;
  background-color: rgba(0, 0, 200, 0.3);
  position: absolute;
  left: 3em;
  border:  #A0740A 3px inset;
  line-height: 0;
  border-radius: 10px;
}

.corner img {
  width: 9em;
  padding: 0.5em;
  border: rgba(192, 192, 192, 0.8) 2px inset;
      border-radius: 20px;
}

.corner2 {
   top: 40em;
  background-color: rgba(0, 0, 200, 0.3);
  position: absolute;
  right: 3em;
  border:  #A0740A 3px inset;
  line-height: 0;
  border-radius: 10px;

}

.corner2 img {
  padding: 0.5em;
    width: 9em;
      border: rgba(192, 192, 192, 0.8) 2px inset;
      border-radius: 20px;
 }



.press {
  width: 6rem;
  height: 3rem;
  background-color: goldenrod;
  color: white;
  text-shadow: navy 1px 1px 3px;
  display: inline-block;
}

.press p {
  padding-left: 1em;
}
.press:hover {
  cursor: pointer;
}



.press2
{width: 8rem;
  height: 4rem;
  background-image: linear-gradient(to bottom right, palegoldenrod, darkgoldenrod);
    color: white;
  text-shadow: navy 3px 3px 3px;
  border-radius: 20px;
    display: inline-block;

}


.press2 p {
  padding: 0.5em;
}

.press2:hover {
  cursor: pointer;
  border: 0.5px blueviolet inset;
    animation-name: jig;
    animation-duration: 4s;
    animation-fill-mode: forwards;


}

.press2:hover p {
  animation-name: jig2;
  animation-duration: 4s;
  animation-fill-mode: forwards;
  
}
@keyframes jig
{
  0% {transform: translate(0); }
  100% {transform: translate(0, 0.5em);   text-shadow: blueviolet 3px 3px 3px;}
  }
  
  @keyframes jig2
{
  50% {transform: translate(0); }
  0%, 100% {transform: translate(0, -1em);   text-shadow: blueviolet 3px 3px 3px;}
  }
  
@keyframes textwiggle
{ 
  0%   { opacity: 0% ;}
  100% {opacity: 100%; }
  
}

.move span {
 animation-name: textwiggle;
animation-duration: 3s;
animation-fill-mode: backwards;
}


.move span:nth-child(1)   {
  animation-delay: 0.2s;
}
.move span:nth-child(2)   {
  animation-delay: 0.4s;
}
.move span:nth-child(3)   {
  animation-delay: 0.6s;
}
.move span:nth-child(4)   {
  animation-delay: 0.8s;
}
.move span:nth-child(5)   {
  animation-delay: 1s;
}
.move span:nth-child(6)   {
  animation-delay: 1.2s;
}
.move span:nth-child(7)   {
  animation-delay: 1.4s;
}
.move span:nth-child(8)   {
  animation-delay: 1.6s;
}
.move span:nth-child(9)   {
  animation-delay: 1.8s;
}
.move span:nth-child(10)   {
  animation-delay: 2s;
}
.move span:nth-child(11)   {
  animation-delay: 2.2s;
}
.move span:nth-child(12)   {
  animation-delay: 2.4s;
}



.move2 span {
 animation-name: textwiggle;
animation-duration: 5s;
animation-fill-mode: backwards;
}


.move2 span:nth-child(1)   {
  animation-delay: 2.6s;
}
.move2 span:nth-child(2)   {
  animation-delay: 2.8s;
}
.move2 span:nth-child(3)   {
  animation-delay: 3s;
}
.move2 span:nth-child(4)   {
  animation-delay: 3.2s;
}
.move2 span:nth-child(5)   {
  animation-delay: 3.4s;
}
.move2 span:nth-child(6)   {
  animation-delay: 3.6s;
}
.move2 span:nth-child(7)   {
  animation-delay: 3.8s;
}
.move2 span:nth-child(8)   {
  animation-delay: 4s;
}
.move2 span:nth-child(9)   {
  animation-delay: 4.2s;
}
.move2 span:nth-child(10)   {
  animation-delay: 4.4s;
}
.move2 span:nth-child(11)   {
  animation-delay: 4.6s;
}
.move2 span:nth-child(12)   {
  animation-delay: 4.8s;
}
.move2 span:nth-child(13)   {
  animation-delay: 5s;
}
.move2 span:nth-child(14)   {
  animation-delay: 5.2s;
}
.move2 span:nth-child(15)   {
  animation-delay: 5.4s;
}
.move2 span:nth-child(16)   {
  animation-delay: 5.6s;
}
.move2 span:nth-child(17)   {
  animation-delay: 5.8s;
}
.move2 span:nth-child(18)   {
  animation-delay: 6s;
}
.move2 span:nth-child(19)   {
  animation-delay: 6.2s;
}
.move2 span:nth-child(20)   {
  animation-delay: 6.4s;
}
.move2 span:nth-child(21)   {
  animation-delay: 6.6s;
}
.move2 span:nth-child(22)   {
  animation-delay: 6.8s;
}
.move2 span:nth-child(23)   {
  animation-delay: 7s;
}
.move2 span:nth-child(24)   {
  animation-delay: 7.2s;
}