@import "fonts/iosevka/index.css";

@import "controls.css";
@import "keyboard.css";
@import "visualizers.css";


/***********************************************************
 * RESET STYLING
 */


*
{
    box-sizing : border-box;
    margin     : 0;
    padding    : 0;
    font       : inherit;
    color      : currentColor;
    fill       : currentColor;
    background : none;
    border     : 0 solid currentColor;
}


B,
STRONG
{
   font-weight : bolder;
}


EM,
I
{
    font-style : italic;
}



/***********************************************************
 * PAGE STYLING
 */


HTML
{
    /* Fallback padding */
    padding        : var(--page--padding);
    /* For device screens with curved corners or weird cutouts */
    padding-top    : max(var(--page--padding), env(safe-area-inset-top));
    padding-left   : max(var(--page--padding), env(safe-area-inset-left));
    padding-right  : max(var(--page--padding), env(safe-area-inset-right));
    padding-bottom : max(var(--page--padding), env(safe-area-inset-bottom));

    color      : var(--page--fg);
    background : var(--page--bg);

    font-family : "Iosevka", monospace;
    font-weight : 400;
}


BODY
{
    display        : flex;
    flex-direction : column;
    gap            : 1rlh;
}


.page-header
{
    display : grid;
    grid-template-rows: repeat(2, auto);
    grid-template-columns: 1fr auto;
    grid-template-areas:
        'intro intro'
        'scope power';
    gap : 2ch;
}

.page-header__left
{
    grid-area : intro;

    margin-left  : auto;
    margin-right : auto;
}

.page-header__center
{
    grid-area : scope;
}

.page-header__right
{
    grid-area : power;
}

@media screen and (min-width: 768px)
{
    .page-header
    {
        grid-template-rows: auto;
        grid-template-columns: auto 1fr auto;
        grid-template-areas:
            'intro scope power';
    }
}