@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root {
    /* --base-clr: #050505; */
    --base-clr: cream;
    /* --text-clr: lightgrey; */
    --text-clr: black;
    --heading-clr: #160505;
    --newsbar-clr: rgba(32, 98, 179, 0.57);
    --newsbar-clr-dark: rgba(11, 33, 61, 0.57);

    --line-clr: #42434a;
    --hover-clr: #5e63ff4f;
    --hover-100per-clr: #3237d7;
    --hover-text-clr: #42446a;
    
    --accent-clr: #ebbd4a;
    --mainaccent-clr: rgba(40, 119, 216, 0.364);
    --secondary-text-clr: white;

    --debug-clr: green;

    --maintext-font-size: clamp(8px, 1.25vw, 18px) 
    --h1-font-size: 52px;

    --site-indent: 2vw;
    --site-spacingpara: 1vh;
    --site-spacing_top: 3vh;
    --site-spacing_bot: .5vh;
    
    --site-margin: 4vw;
    --site-max-width: 92vw;
}

* {
    /* margin: 5px 5px; */
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    box-sizing: border-box;
    background-color: whitesmoke;
    
    h1 {
        background-color: transparent;
        padding-left: var(--site-indent);
        padding-right: var(--site-indent);
        padding-top: var(--site-spacing_top);
        padding-bottom: var(--site-spacing_bot);
        line-height: 1.25;
    }
    h2 {
        background-color: transparent;
        padding-left: var(--site-indent);
        padding-right: var(--site-indent);
        padding-top: var(--site-spacingpara);
        padding-bottom: var(--site-spacingpara);
    }
    p{
        padding-left: var(--site-indent);
        padding-right: var(--site-indent);
        /* padding-bottom: var(--site-indent); */
        line-height: 2;
        background-color: transparent;
    }
    p.centered {
        display: flex;
        justify-content: center;
    }
    a {
        text-decoration: none;
        background-color: transparent;
        color: black;
    }
    a.https {
        text-decoration: underline;
        background-color: transparent;
        color: rgb(17, 1, 64);
        /* text-shadow: 1px 1px 2px black; */

    }
    a.pagelinks{
        text-decoration:underline;

    }
    em {
        background-color: transparent;
    }
}

html {
    font-family: Poppins, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 2.0rem;
    font-size: var(--maintext-font-size); 
}

body {
    display: grid;

    /* grid-area settings*/
    grid-template-areas:
        "header"
        "main"
        "footer";
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
}

/**********************************************************************/
/*                     HEADER                                         */
/**********************************************************************/

header {
    grid-area: header;

    width: 100%;
    /* border: dashed 5px red; */
    border-bottom: 2px solid black;
    /* padding: 1vh 1vw; */

    div#newsbar {
        height: 1vh;
        border-bottom: 2px solid black;
        background-color: var(--newsbar-clr);
        /* background-color: white; */
    }

    div#newsbarbot {
        height: 1vh;
        border-top: 2px solid black;
        background-color: var(--newsbar-clr);
        /* background-color: white; */
    }

    .topnav {
        overflow: hidden;
        background-color: var(--base-clr);
        display: flex;

        align-items: center;
    }

    .topnav img#logo {
        float: left;
        padding: 2vh 2vw;
        padding-left: var(--site-margin);
    }

    .topnav a {

        float: left;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        color: black;
        text-align: center;
        padding: 0 1vw;
        text-decoration: none;
        /* font-size: calc(1.25*var(--maintext-font-size)); */
        line-height: 1;
        height: 60px;
        max-width: 150px;
    }

    .topnav a:hover {
        background-color: #ddd;
        color: black;

        img {
            background-color: #ddd;
        }
    }

    .topnav a.active {
        background-color: var(--newsbar-clr);
        color: white;
        /* img{
            background-color: blue;
        } */
    }

    .topnav .icon {
        display: none;
    }


}

/**********************************************************************/
/*                     FOOTER                                         */
/**********************************************************************/

footer {
    /* border-top: 1px solid var(--line-clr); */
    /* new */
    grid-area: footer;
    padding: min(10px, 2%);
    text-align: center;
    line-height: 1;
    div.iconrow {
        display: flex;
        align-items: center;
        justify-content: center;
        a{
            padding-inline: 8px;
        }

    }
}

/**********************************************************************/
/*                     MAIN                                         */
/**********************************************************************/
main.blog {
    grid-area: main;
    max-width: 800px;
    margin: auto;

    display: flex;
    flex-direction: column;
    
    h1 {
        padding: 0;
        margin: 0;
    }
    h2,h3 {
        padding: 0;
        margin: 0;

    }

    div {
        padding-left: 0;
        margin: 0;
        h2 {
            padding-top: 5px;
        }
        p {
            padding-left: 0;
            padding-bottom: 5px;
            padding-top: 5px;
            margin: 0;
            
        }           
        ol li {
            list-style: number inside;

            margin-left: 0px;
            padding-top: 15px;
            padding-bottom: 15px;
            font-size: clamp(8px, 2vh, 18px);
            font-weight: 800;
        }
            
        div {
            
            background-color: var(--mainaccent-clr);
            ol li{
                list-style: inside;
                margin-left: 20px;
                font-weight: normal;
                font-size: inherit;
                /* font-size: 5vh; */
            }
            ol li:before {
                list-style: inside;
                font-weight: normal;
                font-size: inherit;
                /* font-size: 5vh; */
            }
            
            code.in {
                color: blue;
                padding: 2px;
                font-size: 105%;
                margin: 0;
                background-color: transparent;
            }

            code.out {
                color: rgb(69, 1, 69);
                padding: 2px;
                font-size: 100%;
                margin: 0;
                background-color: transparent;
                line-height: 1.5em;
                ul {
                    background-color: transparent;
                    list-style: none;
                    padding-left:40px;
                    padding-top: 0px;
                    
                }
                ul li {
                    padding-top: 1px;
                    padding-bottom: 1px;
                    background-color: transparent;
                    margin: 0;
                    list-style: none;
                }
                ul li:before {
                    content: "|-- ";
                    list-style: none;
                    color: black;
                    font-size: 15px;
                }
            }

            code.filecontents {
                color: darkslategrey;
                background-color: transparent;
                
            }
            ul.tree {
                list-style: none;

                
            }
                        
        }



        
    }

}


/**********************************************************************/
/*                          MEDIA                                     */
/**********************************************************************/
@media screen and (max-width: 1450px) {
    main {
        div {
            flex-direction: column;
            video {
                height: 20vw;
                min-height: 40vh;
                width: auto;
            }
            div {
                display:flex;
                flex-direction: row;
                justify-content: center;
                background-color: transparent;
                border: none;
                img {
                    height:40vw;
                    min-height: 300px;
                    width: auto;
                }
                img.smaller {
                    height: 40vw;
                    width: auto;
                }
                
            }
            
        }
        
    }
}

@media screen and (max-width: 850px) {
    /* simple nav bar adjustment */
    nav#navtop {
        ul {     
            div#logobox {
                /* border: red solid 1px; */
                img {
                    width: 20vw;
                    max-width: 200px;
                    height: 40px; 
                    /* border: green 5px solid; */
                }
            }
            div#navbox{ 
                flex-direction: row;
                flex-wrap: wrap;
                justify-content: center;
                li {
                    line-height: 2;
                    
                }
                a {
                    font-size: 14px;
                }
                
            } 

        }
    }

    footer {
        font-size: 12px;
    }

}
@media screen and (max-width: 940px) {
    .topnav {
        display: flex;
        justify-content: space-between;
        align-items: top;
        /* overflow: hidden; */
    }
    .topnav div a { /* : not(:first-child)*/
        display: none;
    }
    .topnav div a.icon {
        /* margin-right: 2vw; */
        display: flex; /* this unsets the display none*/
        color: black;
        /* border: red dashed 2px; */
    }
    .topnav div a.icon:hover {
        color: blue;
        background-color: unset;
    }
}
@media screen and (max-width: 940px) {
    .topnav.responsive {
        text-align: top;
    }
    .topnav.responsive img#logo{
        display: block;
        position: relative;
        top: -83px;
        left: 0px;
    }

    .topnav.responsive div {
        /* position: relative; */
        justify-content: right;
        display: flex;
        flex-direction: column;
        height: fit-content;
        padding-bottom: 5px;
    }

    .topnav.responsive div a.icon {
        position: absolute;
        right: 0;
        top: 32px; 
        
    }

    .topnav.responsive a {
        display: flex;
        text-align: left;
        align-content: center;
        justify-content: left;
        /* align-items: left; */
        /* justify-items: left; */
        /* position: relative;
        right: 0px;
        top: 15px; */
        height: 35px;
        padding-right:0;
        padding-left: 0;
        /* border: green 2px dashed; */

    }
    .topnav.responsive a.active {
        color: blue;
        background-color: transparent;
        font-weight: 800;

    }
}