:root {
        --blu:#4d89f8;
        --darkylw:#2a46c3;
        --txt:#58575c;
        --txtshadow: #8d8d8d7c;
        --border2: #e6e6e6;
        --select1: #a0c0fc;
        --beige:#EFEFEF;
    }

     body {
        background: #F0F0F0;
        background-image: url(img/gallery.png);
        font-family:verdana, sans-serif;
        color: var(--txt);
        text-shadow: 1px 1px 1px var(--txtshadow);
        z-index:-1;
        font-size:20px;
    }

    h1 {
        text-align:center;
        font-size:3em;
        margin:0;
        text-shadow: 2px 2px 2px var(--txtshadow);
        letter-spacing: 3px;
        display: inline;
        color: var(--blu);
    }

    blu {
        color: var(--blu);
    }

    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: 'Nunito';
        margin: 20px 0px 20px 0px;
    }

    li {list-style-type: katakana;}
    li::marker {color: var(--blu);}   

     #everything {
        width: 80vw;
        height:100vh;
        z-index: 2; 
        padding:1.5%;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }

    header {
        height: 10vh;
        font-size:3em;
        padding:13px;
        margin-bottom:1%;
    }

    .row {
        display:flex;
        flex-direction: row;
        height:80vh;
    }

     aside {
        width: 20vw;
        display: flex;
    }

     .container {
        margin-left:1%;
        min-width:70vw;
        flex-direction: column;

  display: flex;
  flex-wrap: wrap;
        flex: 1 1 calc(33.33% - 20px);
    }
    
    .container img {
        max-height: 25vh;
        margin:4px;
        border:4px grey solid;
        vertical-align: middle;
    }

    .container a{text-decoration: none;}

    #home {padding-left:3%;}
    
    .scrollbox {
        overflow-y: auto;
        padding:0% 3% 2% 3%;
    }

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

    .tabholder a {text-decoration: none;}

    .tab {
        background: var(--container);
        border: none;
        font-size:30px;
        display:flex;
        gap:5px;
        color: var(--txt);
        letter-spacing: 2px;
        font-family:Tahoma, sans-serif;
        font-weight: bold;
        cursor: help;
        padding:4px;
}

    .tab:hover {
        background-color:var(--txtshadow);
        transition: .2s;
        color:var(--blu);
        border-radius:8px;
    }
  
 /* . . scrollbar css  . . */

    * {
        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, .tabholder {
                 width: 100%;
                 height: 100%;
                 font-size: 1em;
                 flex-direction:column;
             }
            .container img {
                 max-width: 100%;
                 max-height: 35vh;
                 justify-content: center;
            }
             .container {
                min-height:100%;
                margin-top:2%;
                height:100%;
            }
             aside, .container {
                margin-bottom:3%;
            }
            .tab {
                width:100%;
                padding:0;
                margin:0;
            }
            .tabholder {
                height:max-content;
            }
            aside {
                font-size:12px;
                flex-direction: column;
                height:100%;
            }
             h1{
                line-height: normal;
             }
    }