:root {
    /* font-size: 16px; */
    font-family: Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    transform: 300ms;

    --border-color: #fafafa;
    --border-width: 0.1rem;
    --border-width-sides: 0 var(--border-width) 0 var(--border-width);
    --border: var(--border-width) solid var(--border-color);
    --color-one: #28343a;
    --color-two: #3A2834;
    --color-three: #343A28;
}
* {
    box-sizing: border-box;
}

body {
    background-color: #0a0a0a;
    color: #fafafa;
    margin: 0.1rem;
}

h1,h2, h3 {
    text-align: center;
    margin: 0;
}
h2 {
    position: absolute;
    top: -1rem;
    left: 1rem;
    background-color: #0a0a0a;
    border: solid white;
    border-width: var(--border-width-sides);
    border-radius: 5px;
    width: fit-content;
    padding: 0 0.5rem;
}

a {
    color: #fafafa;
}

nav {
    position: absolute;
    top: 0.25rem;
    right: 0.5rem;
    
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

ol {
    border: var(--border);
    border-radius: 10px;
    list-style: none;
    padding: 0;
    background-color: #1e1d1d;
    opacity: 1;
    background-image: repeating-radial-gradient( circle at 50% 50%, transparent 0, #1e1d1d 24px ), repeating-linear-gradient( var(--color-three), var(--color-three) );
    
    display: flex;
    justify-content: space-around;

    li {
        margin: 0;
        padding: 0.5rem 0.25rem;
        flex: 1;
    }
}

article {
    margin: 2rem auto;
    border: var(--border);
    border-radius: 10px;
    padding: 0rem 0.5rem 0.5rem;
    position: relative;
    text-align: center;
    max-width: 50rem;
}

.info-boxes {
    margin-top: 0.5rem;
    display: flex;
    justify-content: space-between;
    gap: 5%;
    line-height: 1.3;

    * {
        padding: 0;
        margin: 0;
    }
    div {
        border-radius: 5px;
        padding: 0 0.5rem;
        flex: 1;
        max-width: 15rem;
        margin: 0px auto;
        border: var(--border);
        border-width: var(--border-width-sides);
        
        :first-child {
            border-bottom: 1px solid gray;
            font-weight: bold;
        }
    }       
}
.info-scale {
    display: flex;
    justify-content: center;
    gap: 3dvw;
    > {
        flex: 1;
    }
}

.table-wrapper {
    border: var(--border);
    border-radius: 10px;
    margin-bottom: 1rem;
    overflow: hidden;

    display: flex;
    flex-wrap: wrap;
    
    >:first-of-type {
        background-color: var(--color-one);
        background-image: 
        linear-gradient(135deg, #1e1d1d 25%, transparent 25%),
        linear-gradient(45deg, #1e1d1d 25%, transparent 25%),
        linear-gradient(45deg, var(--color-one) 50%, transparent 25%),
        linear-gradient(-45deg, #1e1d1d 50%, transparent 25%);
        background-size: 3.95rem 3.95rem;
        background-repeat: round;
    }
    >:last-of-type {
        background-color: var(--color-two);
        background-image: 
        linear-gradient(-135deg, #1e1d1d 25%, transparent 25%),
        linear-gradient(-45deg, #1e1d1d 25%, transparent 25%),
        linear-gradient(-45deg, var(--color-two) 50%, transparent 25%),
        linear-gradient(45deg, #1e1d1d 50%, transparent 25%);
        background-size: 3.95rem 3.95rem;
        background-repeat: round;
    }
}

table {
    flex: 1;

    table-layout: fixed;
    border-collapse: collapse;
    text-align: center;

    td {
        padding: 0 3px;
        line-height: 2;
    }

}

@media screen and (max-width: 500px) {
    .table-wrapper, ol {
        margin: 0 -0.52rem;
    }

    .info-boxes {
        gap: 0%;

        div {
            margin: 0px;
            border-radius: 0px;
            border-color: #b8b8b8;
        }
        > :first-child {
            margin-left: -0.5rem;
            border-left-width: 0px;
        }
        > :last-child {
            margin-right: -0.5rem;
            border-right-width: 0px;
        }
    }
}