* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;

}

html {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100dvh;
    font-size: 12px;
}

h1 {
    padding: 8px;
}


.font-default {
    font-family: 'Courier New', Courier, monospace;
}

body {
    color: white;
    background-color: white;


}

.body-default {
    background-color: lightblue;
    color: #444;
}

main {
    max-width: 1300px;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 8px;
}

p {
    margin: 0.5rem 0;
    text-align: justify;
}

a {
    color: darkslateblue;
}

a:hover {
    color: deeppink;
}

ol {
    list-style: none;
    counter-reset: item;
    padding: 8px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    max-height: 500px;
    column-gap: 50px;
}

li {
    color: transparent;
    max-width: 600px;
    opacity: 1;
}

.li-default {
    color: inherit;
}

ol li {
    counter-increment: item;
    position: relative;
    padding-left: 2rem;
    list-style: none;
}

ol li.li-default::before {
    content: counter(item) ".";
    position: absolute;
    left: 0;
}

.hidden {
    /* height: 0;
    overflow: none;
     */
    /* color: transparent; */
    /* background-color: transparent; */
    opacity: 0;
    transition: opacity 7s ease;
}

.especial {
    color: black;
    transition: color 5s ease;
}

.especial::before {
    color: transparent;
    transition: color 10s ease;
}

.borders {
    border: 2px solid #555;
    border-radius: 3px;
}

.borders-vanished {
    border: 2px solid transparent;
    border-radius: 3px;
    transition: border 30s ease 2s;
}

footer {
    margin: 0px 8px 32px 8px;
}


@media (max-width: 1300px) {

    ol {
        list-style: none;
        counter-reset: item;
        padding: 8px;
        display: block;
        flex-direction: column;
        flex-wrap: none;
        max-height: none;
    }

}

@supports (-moz-appearance: none) {
    html {
        display: table;
        height: 100vh;
        width: 100%;
        font-size: 12px;
    }

    body {
        color: white;
        background-color: white;
        display: table-cell;
        vertical-align: middle;
        text-align: center;
    }
}