@import url('https://unpkg.com/normalize.css') layer(normalize);

@layer normalize, base, parts, main;

@layer base {
    :root {
        --logo_blue_rgb : 164, 196, 236;
        --logo_brown_rgb: 100,  60,  28;
        --logo_white_rgb: 250, 250, 250;
        --logo_green_rgb: 116, 164, 108;

        --logo_blue : rgb( var( --logo_blue_rgb  ) );
        --logo_brown: rgb( var( --logo_brown_rgb ) );
        --logo_white: rgb( var( --logo_white_rgb ) );
        --logo_green: rgb( var( --logo_green_rgb ) );
    }

    html {
        scroll-behavior: smooth;
        font-family    : 'Radley', sans-serif;
        font-weight    : 450;
        font-size      : 16px;
        line-height    : 1.5em;

        @media ( max-width: 360px ) { zoom: 0.9 }
        @media ( max-width: 330px ) { zoom: 0.8 }
        @media ( max-width: 300px ) { zoom: 0.7 }
        @media ( max-width: 270px ) { zoom: 0.6 }
        @media ( max-width: 215px ) { zoom: 0.5 }
        @media ( max-width: 200px ) { zoom: 0.4 }

        body {
            margin    : 2em;
            background: linear-gradient(
                90deg,
                rgba( var( --logo_green_rgb ), 0.25 )   0%,
                rgba( var( --logo_blue_rgb  ), 0.5  ) 100%
            );
        }
    }

    a {
        color          : blue;
        text-decoration: none;
        border-bottom  : 1px dotted blue;

        &:hover {
            text-decoration: underline;
            border-bottom  : 1px dotted transparent;
        }

        &:visited {
            color: darkblue;
        }

        &:visited:hover {
            color: blue;
        }
    }

    h1, h2, h3, h4, h5, h6 {
        font-family: 'Charm', serif;
    }

    .nowrap {
        white-space: nowrap;
    }

    .right {
        text-align: right;
    }

    a.button {
        background-color: var( --highlight_background );
        color           : black;
        text-decoration : none;
        padding         : 0.25em 0.5em;
        margin          : 0 1em;
        border-radius   : 0.5em;
        border          : 1px solid transparent;
        box-shadow      : var( --nav_box_shadow );
        line-height     : 2em;

        &:hover {
            color       : var( --link_color );
            border-color: var( --link_color );
        }
    }
}

@layer parts {
    :root {
        --link_color          : blue;
        --nav_target          : var( --logo_blue );
        --highlight_background: var( --logo_white );
        --nav_background      : rgba( 50, 50, 50, 0.5 );
        --nav_box_shadow      : 0px 0px 4px 2px var( --nav_background );

        --form_element_border_color: rgba( var( --logo_brown_rgb ), 0.33 );
    }

    dialog#notice {
        border          : 2px solid var( --form_element_border_color );
        border-radius   : 1em;
        background-color: rgb( 255, 200, 200 );
        max-width       : calc( 100vw - 4em );
        margin-top      : 3em;
        font-weight     : bold;
        font-size       : 1.25em;

        form {
            margin-top: 1em;
            text-align: right;

            button {
                border          : 1px solid var( --logo_brown );
                border-radius   : 0.25em;
                cursor          : pointer;
                background-color: var( --logo_white );

                &:hover {
                    border-color: var( --form_element_border_color );
                }
            }
        }
    }

    header {
        img {
            border-radius : 2em;
            vertical-align: middle;
            box-shadow    : var( --nav_box_shadow );
            float         : left;
        }

        h1 {
            font-size    : 300%;
            line-height  : 1em;
            margin-left  : 2.5em;
            margin-bottom: 0;
        }

        h2 {
            font-size    : 200%;
            line-height  : 1em;
            margin-top   : 0.5em;
            margin-left  : 4em;
            margin-bottom: 1em;
        }

        p {
            margin-top   : 0.5em;
            margin-left  : 8em;
            margin-bottom: 1em;
            font-style   : italic;
        }

        p.application {
            font-size  : 1.25rem;
            margin-left: 5.5em;
            font-style : normal;
        }
    }

    aside.contact {
        --icon_size: 2em;

        position        : fixed;
        bottom          : 1em;
        right           : 1em;
        line-height     : 1em;
        white-space     : nowrap;
        letter-spacing  : -1em;
        background-color: var( --highlight_background );
        padding         : calc( var( --icon_size ) / 8 );
        border-radius   : var( --icon_size );
        box-shadow      : var( --nav_box_shadow );

        a {
            display      : inline-block;
            width        : calc( var( --icon_size ) * 1.25 );
            height       : calc( var( --icon_size ) * 1.25 );
            border-radius: var( --icon_size );
            margin       : calc( var( --icon_size ) / 16 );
            color        : blue;
            border       : none;

            &:hover {
                background-color: var( --nav_background );
            }

            span {
                font-size  : var( --icon_size ) !important;
                margin-left: 0.125em;
                line-height: 1.25em !important;
            }
        }
    }

    input#nav_toggle {
        display: none;
    }

    nav {
        --transition_time: 1s;
        --link_margin    : 0.125em;

        z-index: 1;

        progress {
            z-index         : 2;
            opacity         : 0;
            position        : fixed;
            top             : 0;
            left            : 0;
            width           : 100%;
            height          : 0.5em;
            border-radius   : 0;
            border          : 0;
            background-color: var( --nav_background );

            &::-webkit-progress-value {
                background-color: var( --nav_target );
            }

            &::-moz-progress-bar {
                background-color: var( --nav_target );
            }

            transition: opacity var( --transition_time ) ease;
        }

        & > a {
            img {
                vertical-align: middle;
                width         : 2em;
                height        : 2em;
                border-radius : 0.5em;
                margin-bottom : 0.25em;
                margin-right  : var( --link_margin );
                border        : 1px solid transparent;

                &:hover {
                    border-color: var( --link_color );
                }
            }
        }

        ul {
            display             : inline-block;
            list-style-type     : none;
            padding-inline-start: 0;

            li {
                a {
                    background-color: var( --nav_target );
                    color           : black;
                    text-decoration : none;
                    padding         : 0 0.5em;
                    border-radius   : 0.5em;
                    border          : 1px solid transparent;
                    transition      :
                        box-shadow       var( --transition_time ) ease,
                        background-color var( --transition_time ) ease;

                    &:hover {
                        color       : var( --link_color );
                        border-color: var( --link_color );
                    }

                    &.shown {
                        background-color: var( --highlight_background );
                        box-shadow      : var( --nav_box_shadow );
                    }
                }
            }
        }

        &.sticky {
            progress {
                opacity: 1;
                cursor : pointer;
            }
        }
    }

    @media ( min-width: 501px ) {
        nav {
            transition   : background-color var( --transition_time ) ease;
            border-radius: 1em 0 0 1em;
            text-align   : right;
            padding      : 0.125em 1em;
            margin       : -1.125em -2em -0.125em -1em;
            line-height  : 2em;

            label[for="nav_toggle"] {
                display: none;
            }

            & > a {
                opacity   : 0;
                visibility: hidden;
                transition:
                    opacity    var( --transition_time ) ease,
                    visibility var( --transition_time ) ease;
            }

            ul {
                margin-top   : 0.5em;
                margin-bottom: 0.5em;

                li {
                    margin-left : var( --link_margin );
                    margin-right: var( --link_margin );
                    display     : inline-block;

                    &:last-child {
                        margin-right: 0;
                    }
                }
            }

            &.sticky {
                position        : fixed;
                top             : 0.5em;
                right           : 0;
                background-color: var( --nav_background );
                border-radius   : 0 0 0 1em;
                padding         : 0 1em;
                margin          : 0;

                & > a {
                    opacity   : 1;
                    visibility: visible;
                }
            }
        }
    }

    @media ( max-width: 500px ) {
        header {
            min-height  : 8em;
            margin-right: 1em;

            p {
                margin-top: 1em;
            }
        }

        aside.contact {
            right: auto;
            left : 1em;
        }

        nav {
            font-size                : 1.25em;
            position                 : fixed;
            top                      : 0;
            right                    : 0;
            background-color         : var( --logo_white );
            box-shadow               : var( --nav_box_shadow );
            padding                  : 0em 1em 0.25em 1em;
            border-bottom-left-radius: 1em;
            visibility               : hidden;

            progress {
                visibility: visible;
            }

            label[for="nav_toggle"] {
                visibility: visible;
                position  : fixed;
                top       : 0;
                right     : 0;
                padding   : 0.75em 0.75em 0.25em 0.75em;
                cursor    : pointer;

                span {
                    font-size: 1.5em !important;
                    color    : blue;
                }
            }

            & > a {
                display            : block;
                width              : min-content;
                border-bottom-color: transparent;
                margin-top         : 1em;
                margin-bottom      : -0.5em;
            }

            ul {
                li {
                    &:not( :last-child ) {
                        margin-bottom: 1em;
                    }
                }
            }
        }

        input#nav_toggle:checked ~ nav {
            visibility: visible;
        }

        input#nav_toggle:not( :checked ) ~ nav label[for="nav_toggle"] {
            background-color         : var( --logo_white );
            box-shadow               : var( --nav_box_shadow );
            border-bottom-left-radius: 1em;
        }
    }

    @media ( max-width: 450px ) {
        header {
            img {
                float: none;
            }

            h1 {
                min-height: auto;
                margin    : 0.5em 0 0 0;
            }

            h2 {
                min-height: auto;
                margin    : 0.5em 0 1em 0;
            }

            p {
                margin: 1em 0 0 0;
            }

            p.application {
                margin-left: 0;
            }
        }
    }
}

@layer main {
    main {
        padding-bottom: 4em;

        & > article {
            font-size    : 20px;
            line-height  : 1.5em;
            padding-top  : 1.5em;
            margin-bottom: -1em;

            &:first-child {
                padding-top: 0;
            }

            &:last-child {
                margin-bottom: 0;
            }
        }

        --main_left_indent: 1em;

        padding-left: var( --main_left_indent );

        h1 { margin-left: calc( -0.7 * var( --main_left_indent ) ) }
        h2 { margin-left: calc( -0.6 * var( --main_left_indent ) ) }
        h3 { margin-left: calc( -0.5 * var( --main_left_indent ) ) }
        h4 { margin-left: calc( -0.4 * var( --main_left_indent ) ) }
        h5 { margin-left: calc( -0.3 * var( --main_left_indent ) ) }
        h6 { margin-left: calc( -0.2 * var( --main_left_indent ) ) }

        &.application {
            margin-left: -1em;
        }

        dl {
            dt {
                font-size: 1.125em;
            }

            dd:not(:first-child) {
                margin-top: 0.5em;
            }

            dd:not(:last-child) {
                margin-bottom: 1.25em;
            }
        }

        table {
            border-spacing: 0;

            th,
            td {
                padding: 0.25em 0.5em;
                border: 1px solid black;
            }

            th {
                background-color: var( --logo_blue );
            }

            td {
                background-color: var( --logo_white );
            }

            --cell_border_radius: 1em;

            thead tr:first-child th:first-child {
                border-top-left-radius: var( --cell_border_radius );
            }

            thead tr:first-child th:last-child {
                border-top-right-radius: var( --cell_border_radius );
            }

            tbody tr:last-child td:first-child {
                border-bottom-left-radius: var( --cell_border_radius );
            }

            tbody tr:last-child td:last-child {
                border-bottom-right-radius: var( --cell_border_radius );
            }

            thead tr:not(:first-child) th,
            tbody tr td {
                border-top-color: transparent;
            }

            thead tr th:not(:last-child),
            tbody tr td:not(:last-child) {
                border-right-color: transparent;
            }

            @media ( max-width: 550px ) { & { font-size: 90%; line-height: 1.25em } }
            @media ( max-width: 500px ) { & { font-size: 80%; line-height: 1.25em } }
            @media ( max-width: 450px ) { & { font-size: 70%; line-height: 1.25em } }
            @media ( max-width: 400px ) { & { font-size: 60%; line-height: 1.25em } }
        }

        form {
            legend,
            fieldset,
            textarea,
            input[type=text],
            input[type=submit] {
                border: 1px solid var( --form_element_border_color );
            }

            textarea:hover,
            input[type=text]:hover,
            input[type=submit]:hover {
                border-color: var( --logo_blue );
            }

            textarea:focus,
            input[type=text]:focus {
                outline: 1px solid var( --logo_blue );
            }

            fieldset {
                border-radius: 0.5em;
                margin-bottom: 1em;
                width        : fit-content;
            }

            legend,
            textarea,
            input[type=text],
            input[type=submit] {
                border-radius: 0.25em;
            }

            legend,
            input[type=text] {
                background-color: var( --logo_white );
            }

            legend {
                padding    : 0 0.25em;
                line-height: 1.25em;
            }

            label {
                --label_indent: 1em;
                text-indent   : calc( -1 * var( --label_indent ) );
                padding-left  : var( --label_indent );
                display       : block;
            }

            input[type=text] {
                width: 7.5em;
            }

            input[type=radio],
            input[type=submit] {
                cursor: pointer;
            }

            input[type=submit] {
                background-color: var( --logo_blue );
            }

            textarea {
                display: block;
                width  : calc( 100vw - 5em );
                height : 8em;
            }
        }
    }

    article:first-child {
        --image_width: min( calc(33vw), 16em );

        clear: both;

        div {
            display       : inline-block;
            vertical-align: top;
            width         : calc( 100vw - var( --image_width ) - 8em );
        }

        div.image {
            margin-left: 1.5em;
            margin-top : 1.5em;
            width      : min-content;

            img {
                width        : var( --image_width );
                border-radius: 2em;
            }
        }

        @media ( max-width: 700px ) {
            div {
                display: inline;
            }

            div.image {
                margin-top: 2.5em;
                float     : right;
            }
        }
    }

    article#contact {
        div {
            display       : inline-block;
            vertical-align: middle;
        }

        div.image {
            margin-right: 1.5em;

            img {
                width       : 18em;
                border-radius: 2em;
            }
        }

        @media ( max-width: 530px ) {
            div.image {
                img {
                    width: calc( 100vw - 5em );
                }
            }

            div p b {
                display   : block;
                margin-top: 0.5em;
            }
        }

        a.icon {
            display       : inline-block;
            border        : none;
            border-radius : 1em;
            padding       : 0.25em;
            font-size     : 2em;
            box-shadow    : var( --nav_box_shadow );
            vertical-align: middle;
            margin-right  : 0.25em;

            span {
                font-size: 1em !important;
            }

            background-color: var( --logo_white );

            &:hover {
                box-shadow: none;
                background-color: var( --nav_background );
            }
        }
    }
}