@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&family=Murecho:wght@100..900&display=swap');

@media only screen and (max-width: 1024px) {
    :root {
        --title-font-color: #FFFFFF;
        --heading-font-color: #202020;
        --main-font-coor: #606060;
        --hovered-link-font-color: #4040E0;

        color: var(--main-font-coor);
        font-family: "Josefin Sans", "Murecho", sans-serif;
        font-size: 20px;
        font-weight: 300;

        box-sizing: border-box;
    }

    body {
        text-shadow: 0.1rem 0.1rem 0.5rem #F0C0E0;

        margin: 0;
        padding: 0;
        background-color: #FFFFFF;
    }

    a {
        color: var(--main-font-coor);
        text-decoration-thickness: 0.05rem;
    }

    a:hover {
        color: var(--hovered-link-font-color);
        text-decoration-style: wavy;
    }

    hr {
        display: none;
    }

    div.title-and-navi {
        --title-and-navi-height: max(36rem, 100lvh);
    }

    header {
        --header-margin: 5rem;
        --title-text-shadow:
            0 0 1rem var(--main-font-coor),
            0 0 0.5rem var(--main-font-coor),
            0.1rem 0.1rem 0.05rem #000000;

        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr;

        height: 100lvh;

        background-color: #E0E0E0;
        background-image: url("background.jpg");
        background-position: center;
        background-size: cover;
    }

    header h1 {
        color: var(--title-font-color);
        font-size: 3.5rem;
        font-weight: normal;
        letter-spacing: 0.25rem;
        text-align: center;
        text-shadow: var(--title-text-shadow);

        margin: auto 0;
    }

    header p {
        color: var(--title-font-color);
        font-size: 1.2rem;
        font-weight: 400;
        text-align: center;
        text-shadow: var(--title-text-shadow);
        vertical-align: bottom;

        margin: auto 0;
    }

    div.navi {
        margin: 3rem 1em;
        background-color: #FFFFFF;
    }

    nav.language {
        position: absolute;
        top: 1rem;
        right: 1rem;
    }

    nav.language ul,
    nav.language li {
        display: block;
    }

    nav.language ul {
        margin: 0;
        padding: 0;
    }

    nav.language li {
        color: var(--title-font-color);
        font-size: 1rem;
        text-align: right;
        text-shadow:
            0.1rem 0.1rem 0.2rem #202020,
            0.1rem 0.1rem 0.1rem #202020;

        margin: 0;
        padding: 0;
    }

    nav.language li a {
        color: var(--title-font-color);
    }

    nav.language li a:hover {
        color: var(--hovered-link-font-color);
    }

    li.language-selected {
        font-weight: bold;
    }

    li.language-selected::before {
        content: "▶";
    }

    nav.links h2 {
        display: none;
    }

    section.for {
        margin: 2rem 1rem;
        padding: 0 0 0 1rem;
    }

    section.for h3 {
        color: var(--heading-font-color);
        font-size: 1.2rem;
        font-weight: normal;
        letter-spacing: 0.1rem;

        margin: 0 0 0 -1rem;
    }

    p.version {
        margin: 1rem 0;
    }

    ul.github {
        margin: 1rem 0;
        padding: 0;

        list-style-type: none;
    }

    ul.github li {
        margin: 1rem 0;
    }

    div.features {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 1rem;
    }

    section.feature {
        margin: 1rem 0;
    }

    section.feature h4 {
        color: var(--heading-font-color);
        font-size: 1.1rem;
        font-weight: normal;

        margin: 0;
        border: 0.05rem #C0C0C0;
        border-style: none none solid none;
    }

    section.feature h4 a {
        color: var(--heading-font-color);
        text-decoration: none;
    }

    section.feature h4 a:hover {
        color: var(--hovered-link-font-color);
        text-decoration: underline;
        text-decoration-thickness: 0.05rem;
        text-decoration-style: wavy;
    }

    section.feature ul {
        margin: 0.5rem 0;
        padding: 0 0 0 1rem;

        list-style-type: none;
    }

    section.feature li {
        margin: 1rem 0;
    }

    p.license {
        text-align: center;

        margin: 1rem 0;
    }

    main {
        margin: 3rem 0;
    }

    main h2 {
        color: var(--heading-font-color);
        font-size: 1.2rem;
        font-weight: normal;
        letter-spacing: 0.1rem;
        text-align: center;

        margin: 0;
    }

    section.library {
        margin: 2rem 1rem;
        padding: 2rem;
        border: 0.05rem solid #C0C0C0;
        border-radius: 0.5rem;
    }

    section.library h3 {
        color: var(--heading-font-color);
        font-size: 1.1rem;
        font-weight: normal;
        letter-spacing: 0.1rem;

        margin: 0;
    }

    section.library p {
        margin: 1rem 0;
    }

    p.description[lang="en"] {
        text-align: left;
    }

    p.description[lang="ja"] {
        text-align: justify;
        text-justify: inter-ideograph;
    }

    p.available-for {
        text-align: right;

        margin: 0;
    }

    p.available-for span {
        display: none;
    }

    p.available-for a {
        color: #FFFFFF;
        font-size: 0.75rem;
        text-decoration: none;

        margin: 0;
        padding: 0.2rem 0.5rem;
        background-color: #808080;
        border-style: none;
        border-radius: 1rem;
    }

    footer {
        margin: 5rem 0 2rem 0;
    }

    address {
        font-style: normal;
        text-align: center;
    }

}