styles.css

body{
    display: flex;
    flex-direction: column;
    align-items: center;
}
h3{
    text-align: center;
    color: orange;
}
h1{
    text-align: center;
    color: red;
    /* text-shadow:
        1px 1px 0 black,
        -1px 1px 0 black,
        -1px -1px 0 black,
        1px -1px 0 black,
        1px 0px 0 black,
        0px 1px 0 black,
        -1px 0px 0 black,
        0px -1px 0 black; */
}
h2{
    text-align: center;
    font-size: 2em;
    color: orangered;
    /* text-shadow:
        1px 1px 0 dimgray,
        -1px 1px 0 dimgray,
        -1px -1px 0 dimgray,
        1px -1px 0 dimgray,
        1px 0px 0 dimgray,
        0px 1px 0 dimgray,
        -1px 0px 0 dimgray,
        0px -1px 0 dimgray; */
}
a {
    text-decoration: none;
    color: black;
    background-color: dimgray;
    border-radius: 10px;
    padding: 5px;
    margin: 3px;
}
a:hover {
    color: whitesmoke;
}
.enigma{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.title{
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: 1.5em;
    margin-bottom: 0.25em;
}
h4{
    margin: 0;
    margin-right: 0.5em;
}
p{
    margin: 0;
}
.finished{
    height: 2.5em;
}
.not-finished{
    height: 2.5em;
}
#finish-code{
    text-align: center;
    margin-top: 2.5em;
    margin-bottom: 5em;
    font-size: x-large;
    font-weight: bold;
    color: green;
}
footer{
    margin-top: 3em;
}