@import "../css/shared.css";


body {
    background-color: black;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* padding: 10px; */
}


main {
    width: 100%;
    height: 100%;
    /* max-width: 500px;
    max-height: 500px; */
    display: grid;
    grid-auto-flow: row;
    grid-template-columns: repeat(auto-fill, minmax(10px, 1fr));
    gap: 5px;
    padding: 5px;
    /* background-color: red; */
    /* place-items: center; */
    /* justify-content: center; */
    /* place-content: center; */
    overflow: hidden;

    .block {
        /* flex: 1; */
        /* background-color: orange; */
        /* border: 1px solid black; */
        border-radius: 5px;
        /* aspect-ratio: 1; */
        /* width: 50px; */
        /* height: 50px; */
        width: 100%;
        height: 100%;
    }
}


#controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    padding: 25px 0 50px 0;

    button, select {
        border: 1px solid var(--card);
        color: var(--chart-2);
        background-color: transparent;
        padding: 7px 15px;
        font-weight: 400;
        border-radius: 1px;
        transition: color .2s ease-out, border-color .2s ease-out;
        cursor: pointer;
        text-transform: uppercase;
        font-size: 0.9rem;

        &:hover {
            /* bottom: 2px; */
            /* transform: scaleY(1.1) */
            border-color: var(--input);
            color: var(--chart-1);
        }
    }

    button {
        text-align: center;
        min-width: 100px;
        position: relative;
        /* transition: color .2s ease-out, border-color .2s ease-out; */
        cursor: pointer;

        /* &:hover {
            border-color: var(--input);
            color: var(--chart-1);
        } */
    }
}