body {
    background: #555;
    font-family: sans-serif;
    font-size: 24px;
    padding: 0;
    margin: 0;
}

.wrapper {
    min-width: 22.5rem;
    max-width: 90%;
    margin: auto;
    padding: 2rem 1rem 2rem 1.5rem;
    background: #fff;
    box-shadow: 2px 2px 2px 2px hsla(0, 0%, 0%, .2);
    min-height: 96vh;
    /* flex-direction: column; */
}

h2 {
    text-align: center;
    text-shadow: 2px 2px 2px hsla(0, 0%, 0%, .2);
}
h3 {
    text-align: center;
}
ul {
    list-style: none;
}

li {
    margin-bottom: 1rem;
}
a {
    text-shadow: 1px 1px 3px hsla(0, 0%, 0%, .2);
    text-decoration: none;
    color: darkslateblue;
    text-decoration: transparent wavy underline;
    transition: all .4s ease-in-out .1s;
}

a:hover {
    transition: all .4s ease-in-out .1s;
    text-decoration: darkslateblue wavy underline;
}

.red {
    color: #800;
}
.back {
    background: hsla(0, 0%, 0%, .2);
    border: none;
    position: fixed;
    cursor: pointer;
    bottom: 2rem;
    --s: 6rem;
    width: var(--s);
    height: var(--s);
    line-height: var(--s);
    text-align: center;
    border-radius: 50%;
    right: 2rem;
    text-decoration: none;
    color: #fefefe;
}

.back:hover {
    background: hsla(0, 0%, 0%, .8);
    box-shadow: 2px 2px 2px 2px hsla(0, 0%, 0%, .2);
    text-decoration: none;
}

.back:active {
    background: hsla(0, 0%, 0%, .8);
    box-shadow: 1px 1px 1px 1px hsla(0, 0%, 0%, .4);
    text-decoration: none;
}

section {
    max-width: 70rem;
}

pre {
    background: #0B1015;
    color: gold;
    font-family: monospace;
    padding: 1rem;
    box-shadow: 2px 2px 2px 2px hsla(0, 0%, 0%, .4);
}

p {
    text-indent: 2rem;
}