@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

nav ul {
    display: flex;
    padding: 0rem;
    margin-bottom: 5vh;
    border-radius: 0px;
    border: outset 10px white;
    margin-left: auto;
    margin-right: auto;
    width: 40vw;
}

nav li{
    flex: auto;
    padding:0.5rem;
    margin:0.5rem;
    text-align: center;
    font-family: 'Press Start 2P', cursive;
    font-size: 100%;
    color: white;
}

.active{
    color: magenta;
    font-size: 150%;
}


body{
    font-family: 'VT323', monospace;
    line-height: 4vh;
    padding-bottom: 2vh;
    background-color: rgb(43, 43, 43);
    color: white;
    font-size: 145%;

}

.word{
    display: none;
}

.box{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 1rem;
    margin: 1rem;
    border-radius: 10px;
    width: 40vw;
}

.flex-item:hover .word{
    display: inline;
}

.flex-item:hover .comma{
    display:none;
}

.flex-item:hover .period{
    display:none;
}

.flex-item:hover .colon{
    display:none;
}

.flex-item:hover .question{
    display:none;
}

.flex-item:hover .exclamation{
    display:none;
}

.flex-item:hover .colon{
    display:none;
}

.flex-item:hover .quotation{
    display:none;
}

.flex-item:hover .apostrophe{
    display:none;
}

.flex-item:hover .semicolon{
    display:none;
}





.flex-item-selected:hover .word{
    display: inline;
}

.flex-item-selected:hover .comma{
    display:none;
}

.flex-item-selected:hover .period{
    display:none;
}

.flex-item-selected:hover .colon{
    display:none;
}

.flex-item-selected:hover .question{
    display:none;
}

.flex-item-selected:hover .exclamation{
    display:none;
}

.flex-item-selected:hover .colon{
    display:none;
}

.flex-item-selected:hover .quotation{
    display:none;
}

.flex-item-selected:hover .apostrophe{
    display:none;
}

.flex-item-selected:hover .semicolon{
    display:none;
}

.flex-item-selected{
 width: 90vw;
 border: outset 5px white;
 padding: 0.5rem;
 margin-left: auto;
 margin-right: auto;
}

.flex-item{
 padding:0.5rem;
 margin:0rem;
 width: 40vw;
 border: outset 5px white;
 margin-left: auto;
 margin-right: auto;
}

.word{
    display: none;
}

.exclamation{
    color:rgb(255, 242, 0);
    font-family: 'Press Start 2P', cursive;
    line-height: 1vh;
}

.period{
    color: blueviolet;
    font-family: 'Press Start 2P', cursive;
    line-height: 1vh;
}

.quotation{
    color: rgb(113, 255, 210);
    font-family: 'Press Start 2P', cursive;
    line-height: 1vh;
}

.semicolon{
    color:rgb(255, 140, 0);
    font-family: 'Press Start 2P', cursive;
    line-height: 1vh;
}

.comma{
    color:red;
    font-family: 'Press Start 2P', cursive;
    line-height: 1vh;
}

.colon{
    color: magenta;
    font-family: 'Press Start 2P', cursive;
    line-height: 1vh;
}

.apostrophe{
color:blue;
font-family: 'Press Start 2P', cursive;
line-height: 1vh;
}

.question{
    color: yellowgreen;
    font-family: 'Press Start 2P', cursive;
    line-height: 1vh;
}

.symbol{
    padding: 8vh;
    margin-left: vw;
    text-align: right;
    font-size: 500%;
    color: magenta;
    font-family: 'Press Start 2P', cursive;
    bottom: 0;
    right: 0;
    position: fixed;
}

a:link { text-decoration: none; 
    color: magenta;}


a:visited { text-decoration: none;
    color: magenta;}


a:hover { text-decoration: none;
    color: magenta;
    font-size: 105%;}


a:active { text-decoration: none; 
    color: magenta;}

    @media (max-width: 600px) {
        body{
            padding-left: 0vw;
        }
        .symbol{
            padding:1vh;
            padding-bottom: 6vh;
        }
        nav ul{
            width:60vw;
        }
        nav li{
            font-size: 70%;
        }
        .active{
            font-size: 90%;
        }
    }