@font-face {font-family: "Humming"; src: url('fonts/Humming.otf') format("opentype");} 
@font-face {font-family: "Fink"; src: url('fonts/FinkHeavy.ttf') format("truetype");} 

     :root {
        --blu: #4f6ec2;
        --darkblue:#2e91b9;
        --ylw:#f8c64d;
        --darkylw:#C39E2A;
        --grn:#67C2B0;
        --txt:#5C5A57;
        --txtshadow: #b89972;
        --border: #11291c70;
        --border2: #8769406b;
        --footer: #FAFBFB;
        --select1: #85653ae1;
        --beige:#e7d09a;
        --buttonshadow: #fafbfba9;
    }

     body {
        background: white;
        background-image: url(img/accf/accfheader.png), url(img/accf/acbg.jpg), url(img/accf/accfbg.jpg);
		background-repeat: no-repeat, repeat-x, repeat;
		background-size: auto, auto, auto;
		background-position: top center, top left, bottom left;
        font-family:'Humming', 'MS gothic';
        color: var(--txt);
        text-shadow: 1px 1px 1px var(--txtshadow);
        z-index:-1;
    }

    h1 {
        font-family: 'Fink';
        text-align:center;
        font-size:3em;
        margin:0;
        color: var(--ylw);
        text-shadow: 2px 2px 1px var(--darkylw), 3px 2px 1px #604924;
        letter-spacing: 2px;
        display: inline;
    }

    hr {
        border: 5px dotted #FFF;
        filter: drop-shadow(-2px 0 0 var(--border2)) drop-shadow(2px 0 0 var(--border2)) drop-shadow(0 -2px 0 var(--border2)) drop-shadow(0 2px 0 var(--border2));
        border-style: none none dashed; 
        color: #fff; 
        font-family: 'Humming';
        margin: 20px 0px 20px 0px;
    }

    pr {
        color: var(--darkylw);
    }

    li {
        list-style: url(img/accf/present.gif);
    }

    main a {  
        color: var(--blu);
        border-bottom: 2px dashed var(--blu);
        text-decoration: none; 
        text-shadow:none;
        font-weight:bold;
    }

    main a:hover{
        color:var(--grn);
        border-bottom: 2px dashed var(--grn);
        transition:.2s;
    }

    date {
        font-family: 'Fink';
        font-size:2em;
        line-height:0px;
        margin: 4% 0px 2% 5%;
        color: var(--select1);
        text-shadow: none;
        display: list-item;
        list-style: url(img/accf/peachetree.gif);
    }

     #everything {
        padding:10px;
        width: 58vw;
        height:65vh;
        z-index: 2; 
        position: absolute;
        left: 50%;
        top: 48%;
        transform: translate(-50%, -50%);
        display:flex;
        flex-direction: row;
    }

     aside {
        height:70%;
        width:17%;
        display:flex;
        margin-top:14%;
    }

     main {
        height:100%;
        max-height:100%;
        width:100%;
        overflow:hidden;
        background-image: url(img/accf/beige.png);
        display:flex;
        border-radius: 95px 50px 100px 70px;
        border: var(--border2) 3px solid;
        letter-spacing: 1px;
        box-shadow: 4px 4px 2px #1d1d1d36;
    }

     .container {
        margin-left:.5%;
        background-image: url(img/accf/green.png);
        width:80%;
        padding:20px;
        border-radius: 100px 50px 95px 80px;
        border: var(--border) 5px solid;
    }
    
    .scrollbox {
        overflow-y: auto;
        padding:4% 5% 4% 6%;
        width:100%;
    }

     .footerimg {
        background-image: url(img/accf/accffooter.png);
        background-size: cover;
        background-repeat:none;
        bottom: -3%;
        left:0;
        position:fixed;
        z-index:1;
        width: 100%;
        height: 200px;
        pointer-events: none;
        display: flex;
    }

    .footertxt {
        width:99%;
        color: var(--footer);
        text-align: center;
        bottom:2%;
        z-index:3;
        position:fixed;
        font-size: 14px;
    }

    .footertxt a {
        color: var(--footer);
        text-decoration: none;
        border-bottom: 2px white dotted;
        text-shadow: none;
    }

     .logo {
        height: 29vh;
        width:16vw;
        z-index:3;
        position:absolute;
        top:-19%;
        left:-4.7%;
        pointer-events: none;
    }

     .wifi {
        position:fixed;
        bottom:10px;
        right:10px;
        z-index:999;
        pointer-events: none;
     }


     .tabholder { 
        width:100%;
        gap:1%;
        display:flex;
        flex-direction: column;
    }

    .tabholder img{
        cursor: help;
        filter: drop-shadow(3px 3px 2px #4d4d4d57);
    }

    #home {
        padding: 0px 10px 0px 10px;
    }

    #blog img,#gallery img,#thoughts img {
        border:8px ridge var(--ylw);
        border-radius:6px;
    }

    #blog img,#thoughts img  {
        width:50%;
        display: block;
        margin: 1% auto 1% auto;
    }

    #gallery img {margin:auto 5px auto auto; width:45%; max-height:40%;}

 /* . . tooltip style  . . */

#s-m-t-tooltip {
        outline: 3px #377954 solid;
        border: 2px var(--border) dashed;
        background-image: url(img/accf/green.png);
        font-family:'Humming';
        margin:3px;
        max-width:250px;
        border-radius: 8px; 
        padding:3px; /* space around the text */
        margin:15px 0px 0px 15px; /* positioning of your hover info in relation to the link */
        color:var(--beige); /* text color */
        font-weight:bold;
        text-shadow:none;
        font-size:12px; /* font size of your hover info */
        letter-spacing:2px; /* optional letter spacing */
        z-index:99999;
    }

 /* . . scrollbar css  . . */

    * {
        scrollbar-width: thin;
        scrollbar-color: var(--border2) var(--beige);
        box-sizing: border-box;
    }

    *::-webkit-scrollbar {
        width: 5px;
    }

    *::-webkit-scrollbar-track {
        background: var(--select1);
    }

    *::-webkit-scrollbar-thumb {
        background-color: var(--border2);
        border-radius: 10px;
        border: 1px solid var(--beige);
    }

  /* . . selection css. . */
    ::-moz-selection { /* Code for Firefox */
        color: #fff;
        background: var(--select1);
    }

    ::selection {
        color: #fff;
        background: var(--select1);
    }

     @media screen and (max-width: 800px) {
             body, main, aside, #everything, .container, .footertxt {
                 width: 100%;
                 height:100%;
                 padding: 1%;
                 margin: 0;
                 top:440px;
                 font-size: 1em;
                 flex-direction:column;
             }
             img {
                 max-width: 100%;
                 height: auto;
            }
             .container {
                min-height:100%;
            }
             .logo, .tabholder img {
                position:relative;
                top:0;
                left:0;
                width:50%;
                align-self: center;
                padding:1%;
                filter: drop-shadow(-2px 0 0 #fff) drop-shadow(2px 0 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(0 2px 0 #fff);
            }
            .tabholder {
                flex-direction: row;
            }
             .wifi, .footertxt {
                visibility:hidden;
            }
             aside, .container {
                margin-bottom:3%;
            }
             h1{
                line-height: normal;
             }
            #blog img {
                width:100%;
            }
            #gallery img{
                display:block;
                width:100%;
            }
    }