@import "reset.css";
@import "colors.css";
@import "fonts.css";
@import "container.css";
@import "shiki.css";

:root {
    --font-family: 'Atkinson Hyperlegible Next', sans-serif;
    --mono-font-family: 'Atkinson Hyperlegible Mono', monospace;
    --border-width: 3px;
}

html {
    font-family: var(--font-family);
    background-color: var(--uchu-yang);
}

body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    display: grid;
    grid-template-rows: auto 1fr auto;
}

main {
    background-image:
            url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23FFFFFF' fill-opacity='0.1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),
        linear-gradient(to bottom right,var(--uchu-blue-9),var(--uchu-blue-8));
    background-blend-mode: overlay;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family);
    margin-block-start: 0;
    margin-block-end: 0.5em;
    padding: 0;
    font-weight: 900;
    text-wrap: balance;
    line-height: 1;
    text-transform: uppercase;
}

h1 {
    font-size: 3.815rem;
}

h2 {
    font-size: 3.052rem;
}

h3 {
    font-size: 2.441rem;
}

h4 {
    font-size: 1.953rem;
}

h5 {
    font-size: 1.563rem;
}

h6 {
    font-size: 1.25rem;
}

p {
    font-size: 1rem;
    text-wrap: pretty;
}

small {
    font-size: 0.8rem;
}

article, .card {

    padding-block: 1em;
    padding-inline: 3em;
    margin: 2em auto;
    position: relative;
    isolation: isolate;

    &::before {
        --extra-width: calc(var(--border-width) * 2);
        content: '';
        position: absolute;
        background-color: var(--uchu-yang);
        inset: 0;
        border: var(--border-width) solid var(--uchu-yin-9);
        z-index: -1;
    }

    &::after {
        --extra-width: calc(var(--border-width) * 2);
        content: '';
        position: absolute;
        background: var(--uchu-blue-5);
        background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23000000' fill-opacity='1' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");
        background-blend-mode: overlay;
        height: 100%;
        width: 100%;
        border: var(--border-width) solid var(--uchu-yin-9);
        top: 10px;
        left: 10px;
        z-index: -2;
    }
}

@media (max-width: 576px) {
    article {
        padding-inline: 1em;
    }
}

pre, code {
    font-family: var(--mono-font-family);
}

pre {
    padding: 1em;
    border: 1px solid var(--uchu-yellow-5);
    overflow: scroll;
    margin-block-end: 1em;
}

ul, ol {
    padding-inline-start: 1em;
    margin-block-end: 1em;

    a {
        color: var(--uchu-blue-7);
        text-decoration: none;

        &:hover {
            text-decoration: underline;
        }
    }
}

p {
    margin-block-end: 1em;


}

code {
    position: relative;
}

:not(pre) > code::after {
    content: '';
    position: absolute;
    top: -2px;
    right: -3px;
    left: -3px;
    bottom: 0;
    background-color: var(--uchu-gray-1);
    z-index: -1;
    border-radius: 2px;
}

hr {
    margin-block-end: 1em;
    border: 2px solid var(--uchu-yin-2);
}

header {
    background: var(--uchu-yang);
    border-bottom: var(--border-width) solid var(--uchu-yin-9);

    nav {
        a {
            font-weight: 900;
            text-wrap: balance;
            line-height: 1;
            text-transform: uppercase;
            text-decoration: none;
            color: var(--uchu-yin-9);
            font-style: italic;
        }
    }
}

footer {
    background: var(--uchu-yang);
    border-top: var(--border-width) solid var(--uchu-yin-9);
}

.container .content {
    padding-block: 1em;
    padding-inline: 3em;
}