body{
    display: flex;
    flex-direction: column;
    align-items: center;

    --size-base: 1.2px;
    --color-60p: #F6C057;
    --color-30p: var(--color-60p);
    --code-text: var(--color-03);

    background-color: var(--color-1);
    color: var(--color-00);
}

body > *{
    width: 100%;
    max-width: var(--minmax-large);
}

/* components */

[data-core-button]{
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--gap-small);

    height: var(--size-small);
    width: max-content;
    padding: 0 var(--gap-medium);
    border-radius: calc(var(--size-small) / 2);

    color: var(--color-1);
    --color-link: var(--color-1);
    font-weight: var(--font-medium);
    background-color: var(--color-60p);
}

.main h2{
    margin-top: var(--gap-mega);
    margin-bottom: var(--gap-mega);

    font-size: var(--title-h2);
    font-weight: var(--font-bold);
}

    h2 > span{
        color: var(--color-60p);
    }

/* styles */

/* main header */
.header{
    display: flex;
    justify-content: space-between;
    align-items: center;

    height: var(--size-medium);
    padding: 0 var(--gap-large);
}

    .header > div{
        display: flex;
        align-items: center;
    }

        .header > div > * { flex: none; }
        .header > div > *:first-child { margin-right: var(--gap-medium); }

    .header .logo{
        height: var(--size-normal);
    }

    .header .git{
        height: var(--size-small);
        width: var(--size-small);
        fill: var(--color-60p);
    }

    .header h1{
        font-size: var(--title-h4);
        color: var(--color-60p);
        font-weight: var(--font-medium);
    }


/* main main */
.main{
    display: flex;
    flex-direction: column;

    margin-bottom: var(--gap-mega);
}

    .main > *{
        margin-left: calc(var(--gap-large) * 2);
        margin-right: calc(var(--gap-large) * 2);
        margin-bottom: var(--gap-large);
    }

    .main [data-core-button]{
        align-self: center;
    }

    .main .desc{
        align-self: center;
        text-align: center;
        font-weight: var(--font-medium);

        max-width: var(--minmax-medium);
    }

.demo{
    width: auto;
    height: max-content;
    min-height: var(--size-normal);
    margin-left: var(--gap-large);
    margin-right: var(--gap-large);

    display: flex;
    align-items: stretch;

    font-family: var(--font-mono);
    font-size: var(--text-small);

    border-radius: var(--radius-small);
    overflow: hidden;
}

    .demo > *{
        flex: none;
        width: 50%;

        display: flex;

        overflow: hidden;
    }

        .demo > * > *{
            display: flex;
            flex-direction: column;
            gap: var(--gap-small);
        }

    .demo .num{
        min-width: var(--size-small);
        width: max-content;
        padding: var(--gap-medium) var(--gap-normal);

        color: var(--color-1);
        text-align: right;
        background-color: var(--color-03);
    }

    .demo .content{
        width: 100%;
        padding: var(--gap-medium);
        background-color: var(--color-09);
    }

    .demo p{
        white-space: pre;
    }

    @keyframes cursor {
        0%, 50%{
            opacity: 1;
        }
        100%{
            opacity: 0;
        }
    }

    .demo .before .content p:last-child{
        width: -moz-max-content;
        padding-right: var(--gap-small);
    }
    .demo .before .content p:last-child::after{
        content: "_";
        animation: cursor 1400ms linear infinite;
    }

/* media */

@media screen and (max-width: 1080px) {
    body{
        --gap-base: 1px;
    }
}

@media screen and (max-width: 980px) {
    body{
        --gap-base: 0.8px;
        --title-h2: 5rem;
    }
    .demo{
        flex-direction: column;
    }
    .demo > *{
        width: 100%;
    }
    .demo > *:first-child{
        border-bottom: 2px solid var(--color-03);
    }
    .demo > .before > *,
    .demo > .after > *{
        padding-top: var(--gap-large);
        padding-bottom: var(--gap-large);
    }
}

@media screen and (max-width: 600px) {
    body{
        --size-base: 1px;
        --gap-base: 0.6px;
        --title-h4: 1.6rem;
        --title-h2: 4rem;
    }
    .main > *{
        margin-left: var(--gap-large);
        margin-right: var(--gap-large);
    }
    .demo{
        font-size: 1.2rem;
        border-radius: 0;
        margin-left: 0;
        margin-right: 0;
    }
    .demo > *:first-child{
        border: none;
        margin-bottom: var(--gap-medium);
    }
    .main .desc{
        font-size: var(--text-small);
        font-weight: var(--font-regular);
    }
}

@media screen and (max-width: 415px) {
    .header h1{display: none;}
}