@layer  layout {
    @font-face {
        font-family: "Inclusive Sans";
        src: url(../fonts/InclusiveSans-Regular.woff2) format('woff2'),
        url(../fonts/InclusiveSans-Regular.woff) format('woff');
        font-weight: normal;
        font-style: normal;
        font-display: swap;
    }

    @font-face {
        font-family: "Literata";
        src: url(../fonts/Literata-Regular.woff2) format('woff2'),
        url(../fonts/Literata-Regular.woff) format('woff'),
        url(../fonts/Literata-Regular.ttf) format('truetype');
        font-display: swap;
    }
    :root {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        all: unset;
    }

    header {
        display: flex;
        flex-direction: column;
        margin-top: 0;
        nav {
            min-width: 30rem;
            width: 100%;
            height: 6dvh;
            margin: 0;
            padding: 0;

            ul {
                display: flex;
                flex-direction: row;
                justify-content: space-evenly;
            }

            li {
                list-style: none;
                min-width: fit-content;
                flex: 1;
                text-align: center;
                margin: 0 1dvh;
            }
        }
            input {
                visibility: hidden;
            }
        }
    body{
        margin:0;
    }
    h1, h2{
        font-family: "Literata", serif;
        > a {
            font-size: unset;
            font-family:unset;
        }
    }
    a,p {
        font-size: 1rem;
        font-family: "Inclusive Sans", sans-serif;
        line-height:  1.6rem;

    }
    project-container{
        margin-inline-start: 1dvw;
        width: 100%

    }
    project-card{
        display: grid;
        grid-template-columns: 25% 75%;
        grid-template-rows: 3fr;
        -grid-auto-flow: column;
        picture > img{
            max-width: 200px;
            grid-column-start: 1;
            grid-row-start: 1;
            grid-row-end: 3;
        }
        h2{
            grid-row-start:1;
        }

        p{
            grid-row-start:2;
            +p{
                grid-row-start:3;
            }
        }


      div{
          grid-column-start: 2;
          border: 1px dashed green;
      }

    }



    footer {
        margin-block-start: 2.5rem;
        padding: 2.5em 0em;
        width: 100%;

        p {
            text-align: center;
        }

        -background-color: rgba(104, 114, 87, 70);
    }
    #home {
        -text-align: center;
        font-optical-sizing: auto;
        height: 90dvh;
        margin-block-start: 6%;

        #top-content {
            max-width: 41em;
            margin: auto;
            margin-block-end: 4%;
        }
        #home-columns {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            grid-template-rows: auto;
            border: 1px dotted pink;
            margin-inline: 12em;

        }

        h1 {
            font-size: 2rem;
        }

        h2 {
            font-size: 1.5rem;
        }

        p {
            font-size: 1rem;
            font-family: "Inclusive Sans", sans-serif;
        }
       #home-chat{
           border: 1px dashed green;
           text-align: center; 
       }

    }

        a{
            font-size: 1rem;
            font-family: "Inclusive Sans", sans-serif;
        }






    }

    #about {
        margin-inline-start: 1dvw;


        h1 {
            font-size: 2rem;
            text-align: center;
        }
        li{
            color: var(--text-color, white);
        }
        p, a {
            font-family: "Inclusive Sans", sans-serif;
        }

        .grid-content {
            text-align: start;
            display: grid;
            grid-template-columns: 30% 70%;
            @media (max-width: 1024px) {
                grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
            }
        }

        aside {
            grid-column-start: 1;
            margin-inline: 3dvw;

            img {
                min-width: 200px;
                width: 15dvw;
                display: block;
                margin: auto;
            }


        }

        .not-aside {
            margin-inline:3dvw;
            max-width: 35rem;
        }

        @media (max-width: 860px) {
            .not-aside {
                grid-row-start: 2;
            }
        }

        .not-aside {
            -grid-column-start: 2;
            text-overflow: ellipsis;
            overflow: hidden;
        }

        img {
            width: 15dvw;
        }
    }

    #now {
        p{font-family: "Inclusive Sans", sans-serif;}
        p, a, li {
            color: var(--text-color, white);
            font-family: "Inclusive Sans", sans-serif;
        }
        #now-header{
            margin-inline: 6%;
        }
       section{
           margin-inline: 6%;
       }

        img {
            height: 30dvh;
        }
    }

    #projects {
        --global-left-margin: 9vw;

        h1{
            margin-inline-start: var(--global-left-margin, 3vw);

        }
        p, a {
            margin-inline-start: var(--global-left-margin, 3vw);
            font-family: "Inclusive Sans", sans-serif;
        }

        #project-container, ul {
            list-style: none;
            border: 1px solid var(--nav-color, white);
            margin-inline-start: var(--global-left-margin, 3vw);
            justify-content: start;
            padding-inline-start: none;

            
        }


    }

    #404 {
        h1 {
            font-size: 2rem;
        }

        p {
            font-size: 1.5rem;
        }

        p, a {
            font-family: "Inclusive Sans", sans-serif;
        }
    }

    #resume {
        main {
            margin: 0 auto;
            max-width: 38em;
            padding: 50px;
            hyphens: auto;
            overflow-wrap: break-word;
            text-rendering: optimizeLegibility;
            font-kerning: normal;

            li{
                list-style: none;
            }
        }
        h1, h2 {font-family: serif;}

        body > ul {
            width: 100%;

            > li {
                list-style-type: none;

                ul > li {
                    list-style-type: disc;
                }
            }

        }

        ol, ul {
            padding-inline-start: 1.7em;
            margin-top: 1em;
        }

        li > ol, li > ul {
            margin-top: 0;
        }

        p {
            margin: 1em 0;
        }

        h1, h2, h3, h4, h5, h6 {
            margin-top: 1.4em;
        }

        h5, h6 {
            font-size: 1em;
            font-style: italic;
        }

        h6 {
            font-weight: normal;
        }

        table {
            margin: 1em 0;
            border-collapse: collapse;
            width: 100%;
            overflow-x: auto;
            display: block;
            font-variant-numeric: lining-nums tabular-nums;
        }

        table caption {
            margin-bottom: 0.75em;
        }

        tbody {
            margin-top: 0.5em;
        }

        th {
            padding: 0.25em 0.5em;
        }

        td {
            padding: 0.125em 0.5em 0.25em 0.5em;
            width: 50%;
        }

        header {
            margin-bottom: 4em;
            text-align: center;
        }

        span.smallcaps {
            font-variant: small-caps;
        }

        div.columns {
            display: flex;
            gap: min(4vw, 1.5em);
        }

        div.column {
            flex: auto;
            overflow-x: auto;
        }

        div.hanging-indent {
            margin-left: 1.5em;
            text-indent: -1.5em;
        }

        /* The extra [class] is a hack that increases specificity enough to
           override a similar rule in reveal.js */

        div {
            text-align: left;
        }

        @media (max-width: 600px) {
            body {
                font-size: 0.9em;
                padding: 12px;
            }

            h1 {
                font-size: 1.8em;
            }
        }
        @media print {
            body {
                font-size: 12pt;
            }

            p, h2, h3 {
                orphans: 3;
                widows: 3;
            }

            h2, h3, h4 {
                page-break-after: avoid;
            }
        }

    }

    legend {
        color: white;
    }

    label {
        color: white;
    }

    fieldset {
        display: flex;
        flex-direction: column-reverse;
    }

    input[required] + label, textarea[required] + label {
        &::after {
            content: "*" / "Required";
        }
    }

}


    /*Insert media query for small screens (width< 30rem) to create hamburglar menu*/
    @media (max-width: 1024px) {

    }






@layer theme {
    :root{
        /*color palette*/
        --off-black: #2e2e2f;
        --army-green: #687257ff;
        --honeydew: #EBF5DE;
        --olive: #C0C77A;
        --red: #FF6161;

        /*page defaults */
        --nav-color:var(--honeydew, #EBF5DE);
        --nav-btn-color: var(--honeydew, #EBF5DE);
        --bg-color: #2e2e2f;
        --heading-color: #EBF5DE;
        --text-color: white;
        --nav-link-color: var(--off-black, #2e2e2f;)
        --link-color: #C0C77A;
        --footer-text-color: #C0C77A;
        --form-validation-error-color: #FF6161;
    }
    body[data-theme="light"] {
        --nav-color: #FCF4E1;
        --bg-color: #FCF4E1;
        --heading-color: #5A716A;
        --text-color: #2e2e2f;
        --link-color: #0341A5;

            .toggle-label{
                background-color: #ECE4D1;
                margin-left: 60px;
            }

            .toggle-label:after {
                background-color: white;
                transform: translateX(100%);
                left: 10px;
            }
    }

    header {
        width: 100dvw;
        label svg{
            display: block;
            position: absolute;
            z-index:100;
            &.sun{
                left: 90px;
            }
            &.moon{
                left: -40px;
            }

        }
        .toggle-label {
            display: block;
            position: relative;
            height: 2em;
            width: 5em;
            border-radius: 3em;
            background-color: #3e3e3f;
            margin: 1em 90px;
            transition: background-color 0.3s;

            &:after {
                content: "";
                width: 2em;
                height: 2em;
                border-radius: 100%;
                background-color: black;
                position: absolute;
                top: 0px;
                left: 5px;
            }
        }
        nav {
            background-color: var(--nav-color, #687257ff);
            li{
                background-color: var(--nav-btn-color, #687257ff);
            }
            a {
                color: var(--nav-link-color, #687257ff);
            }
        }
    }
    body {
        background-color: var(--bg-color, #2e2e2f) ;
    }
    h1, h2, h3 {
        color: var(--heading-color,#EBF5DE);
        > a {
            color: unset;
        }
    }

    output, p {
        color: var(--text-color,#EBF5DE);
    }
    output{
        display: block;
        border: 2px dotted #EBF5DE;
        width: 100dvw;
        height: 2em;
    }

    a{
        color:  var(--link-color, #C0C77A);
    }

    footer > p {
        color: var(--footer-text-color, lightgray);
    }
/*needs media query to set fallback*/
  .empty{
      color: var(--bg-color, #2e2e2f)
  }

    #home {
        button{
            all:unset;
            border-radius: 3%;
            background-color: var(--honeydew, #EBF5DE);
            h2{color: var(--off-black, #2e2e2f)}
            width: 20em;
        }
    }
    #resume {
        --resume-text-color: white;
        html{
            background-color: #fdfdfd;
        }
        main{
            border: 2px dashed var(--heading-color);
            width: max-content;

            td, li, a{
                color: var(--resume-text-color, white);
            }

        }

        @media print {
            --resume-text-color: black;
            html {
                background-color: white;
            }

            main{
                border: none;
            }
            h1, h2, h3, h4, h5, h6, p {
                color: var(--resume-text-color, black);
            }
            .math{
                color: var(--resume-text-color, black);
            }

            header, footer{
                display: none;
            }
        }
    }


        table{
            color: var(--resume-text-color, white);
        }
        tbody {
            border-top: 1px solid var(--resume-text-color, white);
            border-bottom: 1px solid var(--resume-text-color, white);
        }
        th {
            border-top: 1px solid var(--resume-text-color, white);
        }
        .math{
            color: var(--resume-text-color, white);
        }

        input[required]:invalid + label, textarea[required]:invalid + label{

            &::after {
                color: var(--form-validation-error-color, tomato);
            }
        }

        input:user-invalid, textarea:user-invalid {
            border: 2px dashed var(--form-validation-error-color, tomato);
        }

        form {
            button {
                background-color: var(--nav-color, DarkOliveGreen);
                color: white;
                border-color:var(--heading-color);
                margin-block-start: 1em;
                border-radius: 5%;
                font-size: 1.5em;
                font-family: "Inclusive Sans", sans-serif;}
            .warning{
                border: 2px solid yellow;
            }
        }


    project-card{
        img{ border: 2px solid var(--honeydew, #EBF5DEFF)}
    }


    }