body {
    background: rgb(0, 0, 0);
    color: azure;
    
    z-index: 10;
    
    
}
.test {   
font-size: 10px; 
text-align: center;
color: rgb(31, 203, 42);
position: relative;
text-shadow: rgb(64, 255, 21) 1px 0 10px;
justify-content: center;
} 
h1 {
    font-size: 40px;
    font-style: oblique;
    font-stretch: expanded;
    font-family: fantasy;
    text-align: center;
    color: rgb(31, 203, 42);
    text-shadow: rgb(64, 255, 21) 1px 0 10px;
    position: relative;
    left: 20%;

    
}   
h2 {
    font-size: 2rem;
    font-style: normal;
    font-family: monospace;
    word-spacing: 5px;
    text-align: justify;
    text-shadow: 1px 1px 2px red, 0 0 1em blue, 0 0 0.2em blue;
    position: relative;
    display: block;
    padding-left: 5%;
    padding-right: 5%;
}
h3 {
    font-size: 2rem;
    font-style: normal;
    font-family: monospace;
    word-spacing: 1,5px;
    text-align: justify;
    text-shadow: 1px 1px 2px red, 0 0 1em blue, 0 0 0.2em blue;
    position: relative;
    display: block;
    padding-left: 5%;
    padding-right: 5%;
    padding-top: 5%;
}
h5 {
    font-size: 2rem;
    font-style: normal;
    font-family: monospace;
    word-spacing: 5px;
    text-align: justify;
    text-shadow: 1px 1px 2px red, 0 0 1em blue, 0 0 0.2em blue;
    position: relative;
    display: block;
    padding-left: 5%;
    padding-right: 5%;
    padding-bottom: 5%;
}
h4 {
    font-size: 2rem;
    font-style: normal;
    font-family: monospace;
    text-align: justify;
    word-spacing: 5px;
    text-shadow: 1px 1px 2px red, 0 0 1em blue, 0 0 0.2em blue;
    position: relative;
    display: block;
    padding-left: 5%;
    padding-right: 5%;
}
span{
    position: relative;
}

.vignette img {
    display : none;
    z-index: -10;
}

.vignette:hover img {
position: absolute;
display: flex;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-height: 300px;
max-width: 300px;


}

.vignette{
    color: rgb(31, 203, 42);
}