@font-face {
    font-family: 'Press Start 2P';
  src: url(PressStart2P-Regular.ttf);
}
.unselpage {
            font-size: 9px;
            cursor: pointer;
            padding: 9px;
            color: #fff;
            font-family: 'Press Start 2P', cursive;
            background-color: #008CBA;
            text-shadow: 5px 5px 5px black;
            border-radius: 5px;
            opacity: 0.80;
            border-color:#FF6F6F;
            box-shadow: 0 12px 16px 0 rgba(0,0,0,0.11), 0 17px 50px 0 rgba(0,0,0,0.9);
            transition: 0.8s;
}
.unselpage:hover {
            background-color: DarkCyan;
            border-radius: 2px;
            opacity: 0.90;
}
.selpage {
            font-size: 9px;
            cursor: pointer;
            padding: 9px;
            color: #fff;
            font-family: 'Press Start 2P', cursive;
            background-color: #008b8b;
            text-shadow: 5px 5px 5px black;
            border-radius: 3px;
            opacity: 0.83;
            border-color:#FF6F6F;
            box-shadow: 0 12px 16px 0 rgba(0,0,0,0.11), 0 17px 50px 0 rgba(0,0,0,0.9);
            transition: 0.4s;
}
.selpage:hover {
            background-color: Teal;
            border-radius: 2px;
            opacity: 0.90;
}
.nav {
    background-color: MediumAquamarine;
    opacity: 0.90;
    border-color: LightSalmon;
    border-style: double;
    border-radius: 10px;
}
.aa {
  visibility: hidden;
}
        h1 {
  color: Orange;
            font-size: 20px;
            text-shadow: 5px 5px 5px gray;
            font-family: 'Press Start 2P', cursive;
}
        h2 {
  color: Orange;
            font-size: 17px;
            text-shadow: 5px 5px 5px gray;
            font-family: 'Press Start 2P', cursive;
}
        .button {
            background-color: #008CBA;
            color: #fff;
            font-family: 'Press Start 2P', cursive;
            border-radius:10px;
            text-shadow: 5px 5px 5px gray;
            border-color:#FF6F3F;
            box-shadow:inset 0 -0.6em 1em -0.35em rgba(0,0,0,0.17),inset 0 0.6em 2em -0.3em rgba(255,255,255,0.15),inset 0 0 0em 0.05em rgba(255,255,255,0.12);
            font-size: 9px;
            cursor: pointer;
            padding: 9px;
            opacity: 0.70;
            box-shadow: 0 12px 16px 0 rgba(0,0,0,0.8), 0 17px 50px 0 rgba(0,0,0,0.6);
  transition: 0.9s;
        }
        .button:hover {
  background-color: #008b8b;
            text-shadow: 5px 5px 5px black;
            border-radius: 3px;
            opacity: 0.86;
            border-color:#FF6F6F;
            box-shadow: 0 12px 16px 0 rgba(0,0,0,0.11), 0 17px 50px 0 rgba(0,0,0,0.9);
}
        .center {
            text-align: center;
        }
.textInput {
    box-shadow:inset 0 -0.6em 1em -0.35em rgba(0,0,0,0.17),inset 0 0.6em 2em -0.3em rgba(255,255,255,0.15),inset 0 0 0em 0.05em rgba(255,255,255,0.12);
    background-color: #008CBA;
    border-radius:10px;
    padding: 7.3px;
    border-color:#FF6F3F;
    color: #fff;
    text-shadow: 5px 5px 5px gray;
    font-family: 'Press Start 2P', cursive;
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.8), 0 17px 50px 0 rgba(0,0,0,0.6);
    transition: 0.9s;
    opacity: 0.79;
}
.textInput:hover {
    background-color: #008b8b;
}
.textInput::placeholder {
  color: orange;
  opacity: 1;
}
audio::-webkit-media-controls-panel {
                background-color: LightSalmon;
    opacity: 0.7;
    transition: 0.9s;
}
audio::-webkit-media-controls-panel:hover {
                background-color: PeachPuff;
}