:root {
    --header-img:url(../contour-may-03.svg);
    --lc-right-img:url(../navah_vertical.png);
    --lc-left2-img:url(../navah_welsh.png);
    --bar-menu-mg:.2rem 0;
    --the-bg:#fff;
    --mid-col:40rem;
    --border-radius:6px;
    --box-shadow:2px;
    --title-font-size:.8rem;
    --title-padding:.2rem .4rem;
    --mb-navah-size:.8rem;
    --mb-link-size:.6rem;
    --row-gap:0;
    --col-gap:.3rem;
    --dash:1px;
    --dash-frac:20%;
    --dash-width:9px;
    --lc-title-size:.8rem;
    --lc-font-size:.6rem;
    --lc-lh:.8rem;
    --pcard-column-gap:.5rem;
    --pcard-padding:.9rem .9rem .3rem;
    --pcard-cat-size: .6rem;
    --pcard-title-size:1rem;
    --pcard-text-size:.65rem;
    --contact-card-width:100%;
    --contact-width:100%;
    --border:#303030;
    --text-color:#303030;
    --box-shadow-color:#282828;
    --hover-tab-color:#e0a903;
    }

    body {
    background:var(--the-bg);
    color:var(--border);
    overflow-y:scroll;
    font:12px Montserrat
    }

    * {
    box-sizing:border-box;
    margin:0
    }

    a {
    color:var(--border);
    text-decoration:none
    }

    sub,sup {
    font-size:75%;
    line-height:0;
    position:relative;
    vertical-align:baseline
    }

    sub {
    bottom:-.25em
    }

    .grid {
    display:grid;
    grid-column-gap:var(--col-gap);
    grid-row-gap:var(--row-gap);
    grid-template-columns:minmax(0px,1fr) minmax(0,var(--mid-col)) minmax(0,var(--mid-col)) minmax(0,var(--mid-col)) minmax(0,var(--mid-col)) minmax(0px,1fr);
    grid-template-rows:auto auto auto 1fr;
    height:100%;
    margin:auto
    }

    .mid {
    background:#fff;
    border:1px solid var(--border);
    border-color:var(--border);
    border-radius:var(--border-radius);
    grid-row-end:3;
    grid-row-start:2
    }

    .mid:nth-child(2) {
    grid-column-start:2;
    grid-column-end:3
    }

    .mid:nth-child(3) {
    grid-column-start:3;
    grid-column-end:4
    }

    .mid:nth-child(4) {
    grid-column-start:4;
    grid-column-end:5
    }

    .mid:nth-child(5) {
    grid-column-start:5;
    grid-column-end:6
    }

    .panel {
    grid-column-end:6;
    grid-column-start:2;
    grid-row-end:4;
    grid-row-start:3;
    margin-top:1.5rem;
    width:100%
    }

    .header {
    grid-column-end:7;
    grid-column-start:1
    }

    .header-bg {
    background:var(--header-img) #fff;
    background-repeat:no-repeat;
    background-size:100% auto;
    border:1px solid transparent;
    margin-bottom:-2rem
    }

    .tag-wrap {
    margin-bottom:0.8rem;
    margin-right:0.8rem;
    margin-top:0.8rem;
    visibility:hidden
    }

    .header-tag {
    background:var(--hover-tab-color);
    border:1px solid var(--border);
    display:inline-block;
    margin:.2rem;
    padding:0 5px;
    transform:skew(-15deg,0deg);
    font:0.8rem/1.2rem Montserrat
    }

    .header-tag p {
    font-weight:500;
    transform:skew(15deg,0deg)
    }

    .bar-menu {
    display:grid;
    grid-template-columns:auto auto;
    grid-template-rows:auto;
    margin:var(--bar-menu-mg);
    padding:0;
    text-align:right
    }

    .bar-menu a {
    color:var(--text-color);
    text-decoration:none;
    font:var(--mb-link-size) "Space Mono"
    }

    .navah {
    grid-column-end:2;
    grid-column-start:1;
    margin:auto 0;
    padding-left:calc(var(--border-radius) / 2);
    text-align:left
    }

    .navah a {
    font-size:var(--mb-navah-size)
    }

    .home {
    grid-column-end:4;
    grid-column-start:3
    }

    .home a {
    margin-left:20px
    }

    .home input {
    border:1px solid var(--border);
    border-radius:1px;
    color:var(--text-color);
    font-size:.6rem;
    padding-left:.3rem
    }

    /* .card {
    margin-bottom:0
    } */

    .card-title {
    display:block;
    padding:var(--title-padding);
    padding-bottom:5px;
    text-align:left
    }

    .card-title a {
    color:var(--text-color);
    display:block;
    text-decoration:none;
    font:var(--title-font-size) "Space Mono"
    }

    .card-text {
    color:var(--text-color);
    display:none;
    overflow:hidden;
    padding:.4rem .5rem;
    text-overflow:ellipsis;
    white-space:nowrap;
    font:0.7rem Montserrat
    }

    .panel p {
    margin:.5rem 0
    }

    .pbody-wrap {
    display:grid;
    grid-row-gap:1.5rem;
    grid-template-columns:90%;
    justify-content:center
    }

    .pbody {
    display:grid;
    grid-column-gap:var(--pcard-column-gap);
    grid-row-gap:1.5rem;
    grid-template-columns:100%;
    grid-template-rows:auto;
    justify-content:center;
    margin:0 auto;
    margin-bottom:1rem
    }

    .pcard {
    background:#fff;
    border:1px solid var(--border);
    border-radius:var(--border-radius);
    display:grid;
    grid-template-columns:100%;
    grid-template-rows:0 auto auto auto
    }

    .pcard h3 {
    background:var(--hover-tab-color);
    display:inline-block;
    margin:-.2rem .3rem;
    padding:2px;
    font:var(--pcard-cat-size) "Space Mono"
    }

    .pcard h2 {
    margin:.3rem .3rem;
    padding:0;
    font:var(--pcard-title-size) "Space Mono"
    }

    .pcard-dash {
    background-image:linear-gradient(to right,transparent var(--dash-frac),var(--border) 0%);
    background-position:top;
    background-repeat:repeat-x;
    background-size:var(--dash-width) var(--dash);
    height:var(--dash);
    margin:0 .3rem
    }

    .pcard-body {
    grid-column:1 / 2;
    margin:0;
    padding:var(--pcard-padding)
    }

    .pcard p {
    font-size:var(--pcard-text-size);
    line-height:calc(var(--pcard-text-size) * 1.2);
    margin:0 0.3rem;
    padding:0
    }

    .pcard p>a:hover {
    background:linear-gradient(to bottom,var(--hover-tab-color) 0%,var(--hover-tab-color) 100%);
    background-position:0 100%;
    background-repeat:repeat-x;
    background-size:4px 100%;
    color:#4d4d4d;
    text-decoration:none;
    transition:background-size .4s
    }

    .pcard-image {
    grid-column:1 / 2;
    height:5rem;
    width:100%
    }

    .pcard-link {
    align-items:center;
    color:#000;
    cursor:pointer;
    display:flex;
    grid-column:1 / 2;
    justify-content:center;
    margin:auto;
    padding:0.3rem 0;
    text-align:center;
    user-select:none;
    font:500 16px "Space Mono"
    }

    .pcard-link:hover {
    color:#4d4d4d;
    cursor:pointer
    }


    .iconify {
    height:20px;
    width:20px
    }

    .rhs {
    border-radius:var(--border-radius);
    grid-column:1 / 2;
    height:auto;
    padding:0 1.8rem
    }

    .rhs h2 {
    font-family:"Space Mono";
    margin:.3rem .3rem;
    margin-top:2rem;
    padding:0;
    font:var(--pcard-title-size) "Space Mono"
    }

    .mini-gallery {
    display:grid;
    grid-column-gap:1rem;
    grid-template-columns:38% 38%;
    grid-template-rows:auto;
    justify-content:center
    }

    .landing-grid {
    display:grid;
    grid-column-gap:.7rem;
    grid-template-columns:60% 35%;
    grid-template-rows:auto;
    margin:auto
    }

    .landing-card {
    padding:.2rem
    }

    .landing-card h2 {
    margin:0;
    margin-top:.5rem;
    padding:0;
    font:var(--lc-title-size) "Space Mono"
    }

    .divider {
    background-image:linear-gradient(to right,transparent var(--dash-frac),var(--border) 0%);
    background-position:top;
    background-repeat:repeat-x;
    background-size:var(--dash-width) var(--dash);
    height:var(--dash);
    margin:.7rem auto;
    width:80%
    }

    .lc-left {
    grid-column:1 / 2;
    grid-row:1 / 2;
    margin-left:.5rem
    }

    .lc-right {
    background-image:var(--lc-right-img);
    background-position:center-top;
    background-repeat:no-repeat;
    background-size:contain;
    grid-column:2 / 3;
    grid-row:1 / 2;
    text-align:center
    }

    .landing-grid2 {
    background:#fff;
    border-radius:var(--border-radius);
    display:grid;
    grid-column-gap:.3rem;
    grid-template-columns:30% 1fr;
    grid-template-rows:auto;
    padding:.8rem
    }

    .lc-left2 {
    background-image:var(--lc-left2-img);
    background-position:center-top;
    background-repeat:no-repeat;
    background-size:100% auto;
    grid-column:1 / 2;
    grid-row:1 / 2
    }

    .lc-right2 {
    grid-column:2 / 3;
    grid-row:1 / 2;
    padding:10px
    }

    .sci-grid {
    background:#fff;
    border-radius:var(--border-radius);
    display:grid;
    grid-column-gap:.3rem;
    grid-template-columns:90%;
    grid-template-rows:auto;
    justify-content:center;
    padding:0 .8rem
    }

    .sci-left {
    grid-column:1 / 2;
    grid-row:1 / 2
    }

    .sci-right {
    grid-column:1 / 2;
    grid-row:2 / 3;
    padding:10px
    }

    .sci-grid-full {
    background:#fff;
    border-radius:var(--border-radius);
    display:grid;
    grid-column-gap:.3rem;
    grid-template-columns:100%;
    grid-template-rows:auto;
    justify-content:center;
    margin-bottom:0;
    padding:0 .8rem
    }

    .sci-right-full {
    grid-column:1 / 2;
    grid-row:1 / 2;
    padding:10px
    }

    .contact-card {
    background:#fff;
    border-radius:var(--border-radius);
    margin:auto;
    margin-bottom:1rem;
    padding:1rem;
    width:var(--contact-card-width)
    }

    .contact-card h2 {
    display:block;
    margin:auto;
    padding:0;
    width:var(--contact-width);
    font:var(--lc-title-size) "Space Mono"
    }

    .contact-divider {
    background-image:linear-gradient(to right,transparent var(--dash-frac),var(--border) 0%);
    background-position:top;
    background-repeat:repeat-x;
    background-size:var(--dash-width) var(--dash);
    height:var(--dash);
    margin:.7rem auto;
    width:var(--contact-width)
    }

    .contact-card p {
    font-size:var(--lc-font-size);
    line-height:var(--lc-lh);
    margin:auto;
    width:var(--contact-width)
    }

    .contact-form {
    display:grid;
    grid-template-columns:1fr 3fr;
    grid-template-rows:auto;
    margin:auto;
    width:100%
    }

    .contact-left,.contact-right {
    margin:auto
    }

    .contact-left {
    margin-right:2px;
    grid-column:1 / 2
    }

    .contact-right {
    margin-left:2px;
    grid-column:2 / 3
    }

    .contact-left label,.contact-right label {
    font:.8rem "Space Mono"
    }

    .contact-right input,.contact-left input {
    border:1px solid var(--border)
    }

    .contact-left input[type="checkbox"] {
    background:red;
    border:1px solid var(--border)
    }

    .contact-left input[type="submit"] {
    border:1px solid var(--border);
    border-radius:var(--border-radius);
    width:50%
    }

    .contact-right textarea {
    border:1px solid var(--border);
    border-radius:var(--border-radius);
    grid-column:2 / 3
    }

    .shaded-tab {
    background-color:var(--hover-tab-color)
    }

    .mid-moved {
    position:relative;
    top:3px;
    left:3px;
    background-color:var(--hover-tab-color)
    }

    #lightbox {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-color:#000000b3;
    text-align:center
    }

    #lightbox p {
    text-align:right;
    color:#fff;
    margin-right:20px;
    font-size:12px
    }

    #lightbox img {
    box-shadow:0 0 25px #111;
    margin-top:15%;
    max-height:60%;
    max-width:80%
    }

    .divider-dash,.smooth {
    display:none
    }

    .pbody-wrap-left,.pbody-wrap-right {
    grid-column:1 / 2
    }

    .pcard p>a,.lc-link,.email-link {
    background:linear-gradient(to bottom,var(--hover-tab-color) 0%,var(--hover-tab-color) 100%);
    background-position:0 100%;
    background-repeat:repeat-x;
    background-size:4px 2px;
    font-weight:500;
    text-decoration:none
    }

    .lc-link:hover,.email-link:hover {
    background:linear-gradient(to bottom,var(--hover-tab-color) 0%,var(--hover-tab-color) 100%);
    background-position:0 100%;
    background-repeat:repeat-x;
    background-size:4px 100%;
    color:#4d4d4d;
    text-decoration:none;
    transition:background-size .3s
    }

    .landing-card p,.lc-right2 p,.sci-right p,.sci-right-full p {
    font-size:var(--lc-font-size);
    line-height:var(--lc-lh)
    }

    .lc-right2 h2,.sci-right h2,.sci-right-full h2 {
    margin:0;
    padding:0;
    font:var(--lc-title-size) "Space Mono"
    }

    .contact input,.contact textarea {
    margin:10px 0;
    padding:8px;
    width:100%
    }

    @media only screen and (min-width: 600px) {
    :root {
    --lc-right-img:url(../navah_horizontal.png);
    --lc-left2-img:url(../navah_mirror.gif);
    --bar-menu-mg:.5rem .1rem;
    --the-bg:#e2e2e2;
    --mid-col:12rem;
    --border-radius:10px;
    --title-font-size:1.2rem;
    --title-padding:.4rem .5rem;
    --mb-navah-size:1rem;
    --mb-link-size:.8rem;
    --row-gap:.7rem;
    --col-gap:.7rem;
    --dash-frac:30%;
    --dash-width:6px;
    --lc-title-size:1rem;
    --lc-font-size:.7rem;
    --lc-lh:.9rem;
    --pcard-column-gap:1.5rem;
    --pcard-padding:.9rem .8rem .5rem;
    --pcard-cat-size:.7rem;
    --pcard-title-size:1.1rem;
    --pcard-text-size:.7rem;
    --pcard-link-padding1:.3rem;
    --pcard-link-padding2:0;
    --contact-card-width:80%;
    --contact-width:95%
    }

    .header {
    grid-column-end:6;
    grid-column-start:2
    }

    .header-bg {
    -moz-box-shadow:var(--box-shadow) var(--box-shadow) 0 0 var(--box-shadow-color);
    -webkit-box-shadow:var(--box-shadow) var(--box-shadow) 0 0 var(--box-shadow-color);
    border:1px solid var(--border);
    border-radius:var(--border-radius);
    box-shadow:var(--box-shadow) var(--box-shadow) 0 0 var(--box-shadow-color);
    margin-bottom:0;
    text-align:right
    }

    .tag-wrap {
    visibility:visible
    }

    .navah {
    grid-column-end:2;
    grid-column-start:1
    }

    .contact-form {
    width:60%
    }

    .mid {
    -moz-box-shadow:var(--box-shadow) var(--box-shadow) 0 0 var(--box-shadow-color);
    -webkit-box-shadow:var(--box-shadow) var(--box-shadow) 0 0 var(--box-shadow-color);
    box-shadow:var(--box-shadow) var(--box-shadow) 0 0 var(--box-shadow-color);
    margin-top:0;
    grid-row-end:4;
    grid-row-start:2
    }

    .mid:active {
    box-shadow:1px 1px 0 var(--box-shadow-color);
    transform:translate(3px,3px)
    }

    .panel {
    grid-row-end:5;
    grid-row-start:4;
    margin-top:.8rem
    }

    /* .card {
    border:none
    } */

    .card-title {
    border-top-left-radius:15px;
    border-top-right-radius:15px;
    color:var(--text-color);
    overflow:hidden;
    padding-bottom:3px;
    text-align:left;
    text-overflow:ellipsis;
    white-space:nowrap
    }

    .divider-dash {
    background-image:linear-gradient(to right,transparent var(--dash-frac),var(--border) 0%);
    background-position:top;
    background-repeat:repeat-x;
    background-size:var(--dash-width) var(--dash);
    display:block;
    height:var(--dash);
    height:2px;
    margin:0 .5rem
    }

    .card-text {
    display:block
    }

    .pbody-wrap {
    grid-column-gap:var(--pcard-column-gap);
    grid-template-columns:48% 48%;
    justify-content:center
    }

    .pbody-wrap-left {
    grid-column:1 / 2
    }

    .pbody-wrap-right {
    grid-column:2 / 3
    }

    .pcard {
    border:0
    }

    .landing-grid {
    grid-column-gap:.9rem;
    grid-template-columns:1fr 1fr;
    grid-template-rows:auto
    }

    .lc-right {
    background-size:contain;
    grid-column:2 / 3;
    grid-row:1 / 2;
    margin:1rem
    }

    .landing-grid2 {
    grid-template-columns:50% 1fr
    }

    .sci-grid {
    display:grid;
    grid-template-columns:50% 1fr;
    grid-template-rows:auto;
    margin-bottom:1rem;
    padding:.8rem
    }

    .sci-right {
    grid-column:2 / 3;
    grid-row:1 / 2
    }

    .sci-grid-full {
    margin-bottom:1rem;
    padding:.8rem
    }

    .card-hover {
    background:var(--hover-tab-color);
    transition:all .2s linear 0s
    }

    .shaded-tab {
    border:1px solid var(--border);
    border-radius:var(--border-radius);
    background-color:var(--hover-tab-color)
    }

    .mid-moved {
    background-color:var(--hover-tab-color);
    box-shadow:1px 1px 0 var(--box-shadow-color)
    }

    .lc-left,.sci-left {
    grid-column:1 / 2;
    grid-row:1 / 2
    }
    }

    @media screen and (min-width : 768px) {
    #lightboxoverlay .fa-times {
    width:100%;
    height:100%;
    font-size:30px
    }

    #lightboxoverlay .fa-times:before {
    line-height:50px
    }

    #lightboxoverlay img {
    max-height:80%;
    margin-top:5%
    }
    }