  :root {
      --purple: #947dd8;
      --blue: #6f8bdf;
      --grey: #999DAF;
      --dk-color: #cecece;
      --lt-color: #e0e0e0;
      --holderbg: #13131365;
      --holderborder: #8b8b8b;
  }

  /* . . font . . */
@font-face {
    font-family: "antique"; 
    src: url('RomanAntique.ttf') format("truetype");
} 

body {
        background-image:  url(img/abt/containbg.png);
        background-size: cover;
        background-attachment: fixed;
        background-size: 100%;
        font-family: 'MS Gothic', sans-serif;
        font-size: 14px;
        text-shadow:1px 1px 1px rgba(66, 66, 66, 0.308);
        color:#46434b;
        letter-spacing: .12px;
        line-height: 17px;
}

  /* . . line break . . */
hr {
        border: 1px dashed var(--blue);
        border-style: none none dashed; 
        color: #fff; 
        background-color: #fff;
}
  /* . . txt styling . . */   
b {
        color:var(--blue);
        font-weight:bold;
        font-size:13px;
}
  
i {
        font-style:italic;
        color:var(--purple);
}

a:link, a:visited, a:active { 
        color:var(--purple);
        font-weight: bold;
        text-decoration:none;
}

a:hover {
        color:var(--blue);
        cursor: help;
}


#container {
        padding:10px;
        max-width:859px;
        z-index: 2; 
        position: absolute;
        left: 50%;
        top: 48%;
        transform: translate(-50%, -50%);
        display:flex;
        flex-direction: row;
        border: 1px rgb(139, 139, 139) dotted;
        background-color: #ececec36;
        background-image: url(img/tinycross.png);
        border-radius: 18px;
        background-position: center;
        outline: 1px rgb(155, 155, 155) dashed;
        box-shadow: rgba(22, 22, 22, 0.479) 0px 10px 36px 0px, rgba(22, 22, 22, 0.479) 0px -3px 36px 6px;
}

#maincontainer {
        display:flex;
        flex-direction: column;
}

#mainbox {
        height: 245px;
        width:230px;
        background-color: #ffffff;
        border-radius: 8px;
        overflow-y: auto;
        padding: 10px 20px 10px 20px;    
}

#leftbox {
        width:100%;
        display:flex;
        flex-direction: column;
}

#iconbox {
        height: 122px;
        background-color: white;
        overflow: auto;
        padding:8px 4px 4px 4px; 
        border-radius:8px;   
        border:black 1px solid;
        text-align: center;
}

#iconbox img {
    margin: 3px;
}

    .holderbox {
        border: 1px var(--holderborder) dotted;
        background: var(--holderbg);
        margin:3px;
        width: 270px;
        padding: 9px 12px 12px 12px;
        border-radius: 8px;
}

    .holderbox2 {
        border: 1px var(--holderborder) dotted;
        background: var(--holderbg);
        margin:3px;
        padding:7px;
        border-radius: 8px;
}

   .headerholder {
        border: 1px var(--holderborder) dotted;
        background: var(--holderbg);
        margin:3px;
        padding:7px;
        border-radius: 4px 15px 4px 15px;
}

#infobox {
        width:530px;
        background-color: white;
        padding: 20px 35px 20px 35px;   
}

.outer {
 border: 1px #4d4d4dab solid;
  border-radius: 8px;
  overflow: hidden;
}


#header {
        height: 30px;
        width:560px;
        background-color: white;
        padding:20px;    
        border-radius: 4px 15px 4px 15px;
        border: 1px solid var(--grey);
        background-image: url(img/abt/header.png);
        background-size:contain;
}

.headertext {
        font-family: 'antique', 'ms gothic';
        filter: drop-shadow(1px 1px 0 var(--grey)) drop-shadow(-1px 1px 0 var(--grey)) drop-shadow(0 -1px 0 var(--grey)) drop-shadow(1px 0 var(--grey));
        font-size:32px;
        line-height: 30px;
        letter-spacing: 2px;
        color:white;
}

#imgbox {
        height: 75px;
        background-color: white;
        padding:20px;    
        border-radius: 8px;
        border: 1px solid var(--grey);
        background-image: url(img/abt/backbun.png);
        background-size:contain;
}

.imgboxtxt {
        font-family: 'antique', 'ms gothic';
        filter: drop-shadow(1px 1px 0 var(--grey)) drop-shadow(-1px 1px 0 var(--grey)) drop-shadow(0 -1px 0 var(--grey)) drop-shadow(1px 0 var(--grey));
        font-size:32px;
        line-height: 65px;
        letter-spacing: 6px;
        color:white;
}

#imgbox a{
        text-decoration: none;
}

.boxbox{
        display:flex;
        flex-direction: column;
}

.boxrow{
        display:flex;
        flex-direction: row;
}

#sidebar{
        width:175px;
        height:562px;
        background-color: white;
        padding:20px;
        border-radius: 8px;
        border: 1px black solid;
}


    .tabholder { 
        border-bottom:none;
        gap:7px;
        margin-left:12px;
        display:flex;
        flex-direction: row;
}

    .tab {
        background: #C9E7FF;
        border:1px solid var(--blue);
        border-bottom:none;
        border-radius: 5px 5px 0px 0px;
        font-size:11px;
        line-height: 13px;
        padding:0px 2px 0px 2px;
        display:flex;
        width:40px;
        gap:5px;
        color: var(--blue);
        justify-content: center;
        align-items: center;
        font-family:ms gothic;
        font-weight: bold;
        cursor: help;
}

    .tab:hover {
        background: #bbd8f0;
        border-radius: 5px 5px 0px 0px;
        border-bottom:none;
        z-index:10;
        display:flex;
        font-family:ms gothic;
}

    .tab:nth-of-type(even){
        background: #CDD0FB;
        border:1px solid var(--purple);
        border-bottom:none;
        color: var(--purple);
}
    .tab:nth-of-type(even):hover{
        background: #b6bae6;
        border-bottom:none;
}

    .metab {
        background: #C9E7FF;
        border:1px solid var(--blue);
        border-bottom:none;
        border-radius: 5px 5px 0px 0px;
        font-size:11px;
        line-height: 13px;
        padding:0px 2px 0px 2px;
        width:50px;
        gap:5px;
        color: var(--blue);
        text-shadow:none;
        text-align: center;
        font-family:ms gothic;
        font-weight: bold;
        margin-left:8px;  
        cursor: help;
}
    .pixel {
        position:absolute; right:-85px; bottom:-30px; pointer-events: none;
    }

    .marky {
        width:100%; position: fixed; bottom:0%; left:0%; overflow: hidden; pointer-events: none;
    }
 /* . . tooltip style  . . */

#s-m-t-tooltip {
        outline: 1px #131313e1 solid;
        border: 1px var(--holderborder) dashed;
        background:#131313e1;
        margin:3px;
        max-width:250px;
        border-radius: 8px; 
        padding:4px; /* space around the text */
        margin:15px 0px 0px 15px; /* positioning of your hover info in relation to the link */
        color:#fff; /* text color */
        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(--dk-color) var(--lt-color);
}

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

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

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

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

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

         @media screen and (max-width: 600px) {
             body, #container, .box, #mainbox, #leftbox, #sidebar, #header {
                 width: 100%;
                 padding: 0;
                 margin: 0;
                 font-size: 1em;
                 background-size: cover;
                 flex-direction:column;
             }

             #infobox {
                width: 100%;
                padding:5px;
             }

               img {
                 max-width: 100%;
                 height: auto;
            }

                #sidebar {
                        padding-top:400px;
                }
                .pixel, .marky {
                        visibility: hidden;
                }
                #imgbox {
                        background-size: contain;
                }
                .imgboxtxt{
                        font-size:1em;
                }
}