style.css

/* Primary Styles */

    body{
        max-width: 1600px;
        margin: auto;
    }

    a{
        color:#7b869d;
        text-decoration-color:#c4c9d4;
    }

    a:visited{
        color:#7b869d;
        text-decoration:none;
    }

    .note li p:has(> code), .note li:has(> code){
        display:flex;
        text-align:left;
    }

    .pointer:hover{
        cursor: pointer
    }
    /* Navigation Styles */

        header#breadNav{
            width:75%;
            margin:auto;
            text-align:right;
            border-bottom: solid 2px;
            color:#778088;
            padding-bottom:5px;
        }

        header#breadNav h1{
            margin-bottom:0px;
            font-family: Arial, Helvetica, sans-serif;
            font-size:18px;
            font-weight:normal;
            letter-spacing:1px;
            color:#778088;
            float:right;
        }

        header#breadNav h1 a{
            color:#778088;
            text-decoration:none;
            border:0px solid white;
            transition: border-right .25s, color .25s;
            font-weight:normal;
            font-size:16px;
        }

        header#breadNav h1 a:hover{
            border-right:5px solid white;
            color: #535a5f;
        }

        header#breadNav h1 a.currentLink:hover{
            border-right:0px;
            color:#778088;
            cursor:default;
        }

    /* --- --- --- */

/* --- ---- --- */

/* Index Styles */

    #homeWrapper{
        width:100%;
        margin:auto;
        max-width:800px;
        min-width:260px;
    }

    /* Navigation Styles */

        #homeWrapper nav{
            width:75%;
            margin:auto;
        }

        #homeWrapper nav div{
            margin:5%;
            margin-bottom:15px;
            border:solid white 0px;
            transition: border-left 1s;
            width:97%;
            font-family:sans-serif;
            letter-spacing:2px;
            color:#778088;
        }

        #homeWrapper nav div a{
            display:flex;
            align-items: center;
            font-size:28px;
            text-decoration:none;
            width:100%;
        }

        #homeWrapper nav div.writing{
            border-left: solid 3px #778088;
            /*padding-left:20px;*/
            padding-left:3%;
        }

        #homeWrapper nav div.writing ul{
            margin:0px;
            display:flex;
            font-size:16px;
            padding:0px;
            flex-wrap:wrap;
        }

        #homeWrapper nav div.writing p{
            font-size:12px;
            margin-left:10px;
        }

        #homeWrapper.descriptive nav div.writing p{
            letter-spacing:3.5px;
            color: #6c7893;
        }

        #homeWrapper nav div.writing ul li{
            list-style-type:none;
            margin-left:5px;
            background-color:#f2f2f2;
            text-align:center;
            margin-top:3px;
        }



        #homeWrapper nav div.writing ul li a,#homeWrapper.descriptive nav div.writing ul li{
            font-size:16px;
            padding-left:5px;
            padding-right:5px;
            padding-top:3px;
            padding-bottom:3px;
            border-bottom:0px solid #f2f2f2;
            transition: color .5s, background-color 1.5s, text-decoration .5s
        }

        #homeWrapper.descriptive nav div.writing ul li{
            font-family: sans-serif;
            letter-spacing:2px;
            color:#778088;
        }

        #homeWrapper nav div.writing ul li a:hover{
            color: #535a5f;
            background-color:white;
            /*text-decoration: underline;*/
            cursor:default;
        }

        #homeWrapper nav div.writing a p{
            margin:0px;
            font-size:14px;
            transition: color .5s;
        }

        #homeWrapper nav div.writing a p:hover{
            color:#535a5f;
        }

        #homeWrapper nav div:hover{
            border-left:solid 25px white;
        }

        #homeWrapper nav div.currentLink:hover{
            cursor:default;
            border-left:0px;
        }

        #homeWrapper nav div a img{
            width:50px;
            height:50px;
            margin-right:2%;
            background-size:50px,50px;
        }

    /* --- --- --- */

/* --- --- --- */


/* Content Styles */

    #writingsWrapper{
        width:85%;
        margin:auto;
        /*display:flex;
        justify-content:space-around;*/
    }

    #writingsWrapper .info{
        width:90%;
        font-size:15px;
        /*color:#35363a;*/
        color:#474d52;
    }

    #writingsWrapper article{
        /*color:#2F343F;*/
        color:#5f666d;
        /*color:#778088;*/
        font-family:sans-serif;
        text-align:justify;
        line-height:1.55;
        font-size:17px;
        padding-top:10px;
    }

    #writingsWrapper article h1, #writingsWrapper article h2, #writingsWrapper article h3, #writingsWrapper article h4, #writingsWrapper article h5, #writingsWrapper article h6{
        text-align:left;
    }

    #writingsWrapper header{
        text-align: left;
    }

    #writingsWrapper figure{
        width:95%;
        margin:auto;
        padding:2%;
        padding-bottom:0%;
    }

    #writingsWrapper blockquote{
        border-left: solid 3px #778088;
        padding-left:10px;
        color:#6b747b
    }

    #writingsWrapper figcaption{
        color:#7b869d;
        font-size:15px;
        margin:1%;
    }

    #writingsWrapper article img{
        display:block;
        width:100%;
        margin:auto;
    }

    #writingsWrapper article img.animate{/* Is this in use? */
        width:100%;
        height:300px;
        object-fit:cover;
    }

    #writingsWrapper div.aside{
        clear:both;
        overflow:auto;
    }

    #writingsWrapper div.aside figure{
        float:right;
        width:25%;
        margin-left:5%;
        margin-right:1%;
        margin-top:1%;
        margin-bottom:2%
    }

    #writingsWrapper div.aside figure.responsive_aside{
        margin-top:1%;
        margin-bottom:2%;
        margin:auto;
        width:65%;
        float:none;
        display:none;
    }

    #writingsWrapper figure.image-collage ul li{
        display:inline-block;
    }

    #writingsWrapper figure.image-collage ul li{
        width:49%;
    }

    #writingsWrapper figure.image-collage ul li#sixty{
        width: 60%;
    }

    #writingsWrapper figure.image-collage ul li#thirty{
        width: 35%;
    }

    #writingsWrapper figure.image-collage ul li figure figcaption{
        display:none;
    }

    .tech code{
        font-size:90%;
    }

    .formulas{
        text-align:left;
    }

    figure.graph img{
        max-width:550px;
    }

    figure.graph figcaption{
        text-align:center;
    }

    #writingsWrapper table{
        border-collapse:collapse;
        padding:5px;
    }

    #writingsWrapper table tbody tr td{
        padding:10px;
        padding-bottom:15px;
        padding-top:15px;
    }

    #writingsWrapper table tbody tr td.table-description{
        display:block;
        overflow-y:scroll;
        scrollbar-gutter: stable;
        text-align:left;
        max-height:4em;
        border-bottom: 1px solid #999DA1;
    }

    .dynamic-figure-container{
        align-items:center;
    }

    .dynamic-figure-container .dynamic-figure-view{
        width:45%;
    }

    .dynamic-figure-container .dynamic-figure-controls{
        width:50%;
    }

    .dynamic-figure-container .dynamic-figure-controls p{
        margin:0px;
        float:right;
    }

    .non-dominant-code{
        height:50vh
    }

    /* Navigation Styles */

        #writingsWrapper #breadNav{
            width:100%;
            border-bottom: solid 2px #778088;
            margin:0;
            width:90%;
        }

        #writingsWrapper nav{
            margin:15px;
        }

        #writingsWrapper nav a{
            color:#7b869d;
            text-decoration-color:#c4c9d4;
        }

        #writingsWrapper nav a{/* Redundant? Declared in body */
            color:#7b869d;
            text-decoration-color:#c4c9d4;
        }

        #writingsWrapper a:has(> figure){
            text-decoration-line:none;
        }

        #writingsWrapper nav a:visited{/* Redundant? Declared in body */
            color:#7b869d;
            text-decoration:none;
        }

    /* --- --- --- */

    /* code snippets */

        iframe{
            background-color:#f2f2f2;
            padding-left:10px;
            resize:vertical;
            min-height:85px;
            height:70vh;
            transition: max-height .5s;
        }

        pre:has(code.iframe){
            padding-top:10px;
        }

        code.iframe{
            font-family: monospace, monospace;
            font-size: 17px;
            line-height:1.55;
            color:#5f666d;
            transition: font-size .25s;
        }

        div.code-font button, div.code-font input{
            position:-webkit-sticky;
            position:relative;
            top:28px;
            float:right;
            margin-right:1%;
        }

        div.code-font button{
            font-size:14px;
            color:#a0a6ac;
            border: solid #bbbfc4 1px;
            border-radius:4px;
            transition:color 1s, background-color 1s, border 1s;
        /* width:115px;*/
            width:80px;
        }

        div.code-font button:hover{
            color:#242629;
            background-color: #f9f9f9;
            border: solid #5f666d 1px;
            border-radius:4px;
            outline:none;
            cursor:pointer;
        }

        div.code-font input{
            cursor:pointer;
            accent-color:grey;
            height:20.09px;
            display:none;
        }

        #writingsWrapper figure.code-figure{
            padding:0px;
            margin:0px;
        }

        #writingsWrapper p code, #writingsWrapper li code{
            background-color:#F7F7F7;
        }

        #writingsWrapper li p code, #writingsWrapper li code{
            word-break:break-word;
        }

        #writingsWrapper li p{
            margin:0px;
            margin-bottom: 5px;
        }

        div.adjacentcodeframes{
            display:flex;
            width:100%;
            gap:10px;
            justify-content:space-around
        }

        div.adjacentcodeframes iframe:first-child{
            /*margin-right:10px;*/
        }

        div.adjacentcodeframes iframe:last-child{
            /*margin-left:10px;*/
        }

        div.adjacentcodeframes iframe{
            width:48%;
        }
    /* --- --- --- */

/* --- --- --- */

/* Hex-grid controls */

    .grid-control h4{
        margin-bottom:0px;
    }

    .grid-control ul{
        text-align: left;
        margin-top:10px;
    }

    .grid-control ul li{
        margin:1%;
    }

    .grid-control ul li input{
        margin:1%;
    }

    .grid-control ul.horizontal{
        width:42%;
        float:left;
    }

    dialog{
        background-color:rgba(255, 255, 255,0.75);
    }


/* --- --- --- */

/* General presentation controls */

    .expandable:hover{
        cursor:pointer;
        color:black;
    }

    div.slide-deck figure figcaption ul{
        margin:auto;
        text-align:center;
    }

    div.slide-deck figure figcaption ul li{
        display:inline-block;
    }

    div.slide-deck figure ul li{
        list-style-type:none;
    }

    div.slide-deck figure ul li figure img{
        border: solid #E9ECEF 3px;
        /*padding-left:5px;
        padding-right:5px;*/
    }

    div.slide-deck figure figcaption ul li a{
        font-size:24px;
        padding-left:30px;
        padding-right:30px;
        cursor:pointer;
    }

    div.slide-deck figure figcaption ul li a:hover{
        color:black;
    }


    div.slide-deck figure figcaption ul li:hover{
        color:black;
    }

/* --- --- --- */

/* Photography */

    div.image-col figure{
        transition:border-top 1.5s, opacity 4s;
    }

    #writingsWrapper div.image-col figure img{
        transition: opacity .25s;
    }

    #writingsWrapper div.image-col figure img:hover{
        opacity: .90;
    }

    #static-gallery-control ul{
        display:flex;
        justify-content:center;
        margin-left:0px;
        padding-left:0px;
        margin:auto;
    }

    #static-gallery-control ul li{
        white-space:nowrap;
        display:block;
        padding:3%;
        font-size:85%;
    }

    #static-gallery-control ul li ul li{
        display:inline-block;
        padding:5%;
    }

/* --- --- --- */


/* Aquatint */
    #sf1{
        color:white;
        animation-name:fadein1;
        animation-duration:3s;
        animation-iteration-count: infinite;
    }

    #sf2{
        color:white;
        animation-name:fadein2;
        animation-duration:3s;
        animation-iteration-count: infinite;
    }

    #sf3{
        color:white;
        animation-name:fadein3;
        animation-duration:3s;
        animation-iteration-count: infinite;
    }

    @keyframes fadein1 {
        0%{color:white}
        15%{color:#474d52}
        75%{color:#474d52}
        95%{color:white}
    }
    @keyframes fadein2 {
        0%{color:white}
        55%{color:#474d52}
        75%{color:#474d52}
        95%{color:white}
    }
    @keyframes fadein3 {
        0%{color:white}
        75%{color:#474d52}
        95%{color:white}
    }

/* --- --- --- */

/* Cup of Joe */

    #writingsWrapper #cup-iframe-aside-mobile{
        width:340px;
    }

    #writingsWrapper #cup-iframe-mobile div iframe{
        width:340px;
    }

/* --- --- --- */

@media screen and (min-width:300px){
    #homeWrapper{
        width:85%;
    }
}

@media screen and (min-width:525px){
    #homeWrapper nav div a img{
        width: 75px;
        height:75px;
    }

    #homeWrapper nav div a{
        font-size:36px;
        letter-spacing:5px;
    }

    #homeWrapper header h1{
        font-size:22px;
    }
}

@media screen and (min-width:800px){
    #homeWrapper nav div a img{
        width: 100px;
        height: 100px;
    }

    #homeWrapper nav div a{
        font-size:42px;
        letter-spacing:7px;
    }
}
@media screen and (max-width:900px){
    #writingsWrapper #cup-iframe-aside-mobile{
        display:none;
    }

    #writingsWrapper #cup-iframe-mobile{
        display:inherit;
    }
}

@media screen and (min-width:800px){
    #writingsWrapper .fig-col{
        overflow:auto;
    }

    #writingsWrapper .fig-col figure{
        width:45%;
        float:left;
        margin:auto;
    }

    #writingsWrapper figure.col-fig{
        overflow:auto;
    }

    #writingsWrapper figure.col-fig img{
        width:45%;
        float:left;
        margin:auto;
    }
}
@media screen and (min-width: 1100px){
    #writingsWrapper{
        width:50%;
    }
}

@media screen and (min-width:480px){
    #writingsWrapper article img.animate{
        height:400px
    }

    #writingsWrapper article img#black-hills-path{
        height:350px;
    }

}

@media screen and (max-width: 480px){
    #writingsWrapper article img#black-hills-path{
        height:200px;
    }

    #writingsWrapper .info{
        width:100%;
    }

    #writingsWrapper ul.filelist li{
        margin-bottom:0px;
    }

    ul.filelist li code{
        font-size:65%
    }

    #writingsWrapper #breadNav{
        width:100%;
    }
}

@media screen and (max-width:600px) and (min-width: 481px){
   #writingsWrapper article img#black-hills-path{
        height:225px;
    }
}

@media screen and (max-height:500px) and (min-width:480px){
    #writingsWrapper article img.animate{
        height:250px;
    }

    #writingsWrapper article img#black-hills-path{
        height:250px;
    }
}

@media screen and (max-width:800px){
    #homeWrapper.descriptive nav{
        width:85%;
    }

    #homeWrapper.descriptive header#breadNav{
        width:85%;
    }

    #writingsWrapper article ul{
        padding-left:5%;
    }

    #wraitingsWrapper article ol{
        padding-left:5%;
    }

    #writingsWrapper article li{
        margin-bottom:10px;
    }

    #writingsWrapper div.aside figure{
        width:35%;
    }

    #writingsWrapper figure.image-collage ul li figure{
        width:100%;
    }

    .grid-control ul.horizontal{
        width:45%;
    }

    .grid-control ul li{
        font-size:14px;
    }

    .grid-control ul li input{
        font-size:12px;
    }

}

@media screen and (max-width:600px){
    #homeWrapper.descriptive nav{
        width:95%;
    }

    #homeWrapper.descriptive header#breadNav{
        width:95%;
    }

    .grid-control ul.horizontal{
        margin-top:10px;
        margin-bottom:5px;
        display:inline-block;
        display:flex;
        flex-wrap: wrap;
        column-gap:10px;
        row-gap:10px;
        width:90%;
    }

    .grid-control ul.horizontal li{
        display:inline-block;
    }

    .grid-control ul.horizontal li label{
        display:none;
    }

    dialog{
        width:95%;
    }

    dialog .grid-control ul.horizontal{
        display:inherit;
        width:45%;
    }

    dialog .grid-control ul.horizontal li{
        display:inherit;
    }

    dialog .grid-control ul.horizontal li label{
        display:inherit;
    }

    .grid-control ul.horizontal li input{

    }

    .grid-control ul li br{
        display:none;
    }

    #writingsWrapper div.aside figure.responsive_aside{
        display:block;
        width:60%;
    }

    #writingsWrapper div.aside figure{
        display:none
    }

    #writingsWrapper div.aside figure.narrow{
        display:block;
        width:95%;
        border-bottom:solid #9A9A9A 1px;
        border-top: solid #9A9A9A 1px;
    }

    #writingsWrapper div.slide-deck figure ul{
        padding-left:0%;
    }

    div.slide-deck figure figcaption ul li{
        font-size:16px;
    }

    div.slide-deck figure figcaption ul li a{
        padding:10px;
        font-size:18px;
    }

    #writingsWrapper figure.image-collage ul li{
        width:100%;
    }

    #writingsWrapper figure.image-collage ul li figure figcaption{
        display:block;
    }

    #writingsWrapper figure.image-collage figcaption{
        display:none;
    }

    #writingsWrapper figure.image-collage ul li#sixty{
        width: 100%;
    }

    #writingsWrapper figure.image-collage ul li#thirty{
        width: 85%;
        margin-left:5%;
    }

    #writingsWrapper header#breadNav h1 a{
        font-size:12px;
    }

    .dynamic-figure-container .dynamic-figure-view{
        width:55%;
    }

    .dynamic-figure-container .dynamic-figure-controls{
        width:40%;
    }

    .dynamic-figure-container .dynamic-figure-controls label{
        display:block;
        width: 89px;
        float:left;
    }

    .dynamic-figure-container .dynamic-figure-controls p{
        width:67px;
        float:left;
    }

    div.adjacentcodeframes{
        display:inherit
    }

    div.adjacentcodeframes iframe{
        width:100%;
    }
}

@media screen and (max-width:425px){

    #homeWrapper.descriptive nav{
        width:100%;
    }

    #homeWrapper.descriptive header#breadNav{
        width:100%;
    }

    .tech ul{
        text-align:left;
    }

    .breadCurrent{
        display:none;
    }
}

@media screen and (max-width:400px){

    body{
        width:100%;
        min-width:300px;
    }

    #homeWrapper nav div a{
        font-size:24px;
    }

    #writingsWrapper{
        justify-content:inherit;
        /*min-width:300px;*/
        width:85%;
        margin:auto;
        display:block;
    }

    #writingsWrapper section{
        margin-left:0px;
        margin-right:0px;
    }

    #writingsWrapper article ul li{
        /*list-style-type:none;*/
        margin-left:0px;
    }

    #writingsWrapper article ol li{
        margin-left:0px;
    }
    #writingsWrapper ul, #writingsWrapper ol{
        padding-left:15px;
    }

    #writingsWrapper li{
        margin-left:0px;
    }

    blockquote{
        width:95%;
        margin:5px;
        margin-bottom:10px;
    }

    table{
        display:block;
        width:97%;
        overflow:scroll;
    }

}

@media screen and (max-width:300px){

    #writingsWrapper div.aside figure.responsive_aside{
        width:80%;
    }

}