:root {
    --foreground: #000000;
    --background: #ffffff;
    --accent-1: #c0c0c0;
    --accent-2: #404040;
    --accent-3: #808080;
    --accent-4: #202020;
    --tester: #22c55e;
    --example: #f59e0b;
}

@media (prefers-color-scheme: dark) {
    :root {
        --foreground: #ffffff;
        --background: #000000;
        --accent-1: #202020;
        --accent-2: #808080;
        --accent-3: #404040;
        --accent-4: #c0c0c0;
        --tester: #09451f;
        --example: #757703;
    }
    
    img.module-icon.invertable {
        filter: grayscale(100%) invert(100%);
    }
}

@media (prefers-color-scheme: light) {
    :root {
        --foreground: #000000;
        --background: #ffffff;
        --accent-1: #f0f0f0;
        --accent-2: #404040;
        --accent-3: #808080;
        --accent-4: #202020;
        --tester: #22c55e;
        --example: #e5f50b;
    }
}

* {
    font-family: monospace;
}

body {
    background-color: var(--accent-1);
    color: var(--foreground);
    display: flex;
    flex-direction: column;
    align-items: center;
}
header {
    margin-top: 0.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

main {
    display: flex;

    padding: 0 10rem;

    flex-wrap: wrap;
    flex-direction: column;

    justify-content: center;
    align-items: stretch;
}

h2 {
    margin: 2rem 0 1rem 0;
}

div.package{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    background-color: var(--background);
    padding: 1rem 0;
    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
}

div.package2 {
    display: flex;

    margin-top: 2rem;

    border: 1px solid var(--foreground);
    border-radius: 1rem;
    
    flex-direction: column;
    align-items: stretch;
    
    >h1 {
        margin: 0;
        padding: 1rem ;
        background-color: #7f7fff;
        text-align: center;
        border-top-left-radius: 1rem;
        border-top-right-radius: 1rem;
    }
}


article.module {
    display: flex;
    width: 25rem;
    
    flex-direction: column;

    padding: 1rem;
    margin: 1rem;

    border: 1px solid var(--foreground);
    box-shadow: var(--foreground) 0rem 0rem 0;
    background-color: var(--accent-1);
    border-radius: 0.5rem;

    transform: translateY(0.5rem);
    transition: 0.5s;
    transition-timing-function:ease-in-out;

    .module-icon-wrap {
        padding: 0.5rem;
        border-radius: 0.5rem;
        max-width: 64px; 
        max-height: 64px;
        border: var(--foreground) 2px solid;
        box-shadow: var(--foreground) 0rem 0rem 0;
        transition: 0.5s;
        background-color: var(--background);
        transform: translateY(0px);
    }

    .module-icon-wrap:hover {
        padding: 0.5rem;
        border-radius: 0.5rem;
        max-width: 64px; 
        max-height: 64px;
        border: var(--foreground) 2px solid;
        box-shadow: var(--accent-3) 0.5rem 0.5rem 0;
        transform: translateY(-0.5rem);
    }

    img.module-icon{
        width: 48px;
        height: 48px;
    }

    header.module {
        margin-top: 0.5rem;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    nav.module{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    figure.example-test{
        display: flex;
        margin-top: 1rem;

        flex-direction: row;
        justify-content: space-evenly;

    
        button {
            color: var(--foreground);
            border: 1px solid var(--foreground);
            border-radius: 0.5rem;

            &.test {
                padding: 1rem;
                background-color: var(--tester);
            }

            &.example {
                padding: 1rem;
                background-color: var(--example);
            }
        }
    }
}

article.module:hover{
    box-shadow: var(--accent-3) 1rem 1rem 0;
    transform: translateY(-0.5rem);
}

.name_description {
    h1, i {
        margin: 0;
    }
    i {
        color: var(--accent-4);
    }
    h2{
        
        padding: 0.333rem 0.5rem;

        border: 1px solid var(--foreground);
        border-radius: 1rem;


        position: absolute;
        top: -1rem;
        right: -1rem;

        margin: 0;
        
        font-size: 2rem;

        background-color: var(--background);

    }
    margin-left: 1.5rem;
    width: 25rem;
}

a {
    text-decoration: none;
    color: blue;
}