body {
    background: url(../bg/spark.gif);
}

main {
    background: #56726da4;
    width: 85vw;
    margin-inline: auto;
    border-radius: 10px;
}

nav {
    text-align: center;
    display: flex;
    margin-top: -15px;
}

nav > button {
    background-color: #439485;
    border-color: #19473F;
    height: 50px;
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    width: 50%;
}

nav > button:hover, nav > button:focus {
    background-color: #57beabaf;
}

sub-main {
    display: grid;
    grid-template-columns: repeat(2, auto);
    padding-block: 15px;
}

article {
    background: #575672;
    width: 85%;
    margin-inline: auto;
    margin-block: 15px;
    padding: 15px;
    border: 5px double #454394;
    border-radius: 20px;
}

article > img {
    max-width: clamp(75%, 300px, 50%);
    display: block;
    margin-inline: auto;
    opacity: 85%;
    border-radius: 10px;
}

.warns {
    padding: 10px;
    text-align: center;
}

.warns img {
    width: 88px !important;
}

.enter {
    display: block;
    margin-inline: auto;
}

#title {
    font-size: 3em;
    padding-top: 15px;
}

h2 {
    text-align: center;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

@media (max-width: 750px) {
    sub-main {
        display: grid;
        grid-template-columns: repeat(1, auto);
        padding-block: 15px;
    }
}