/*
@font-face
{
    font-family: 'verdana';
    src: local('verdana'), url('./images/fonts/verdana.ttf') format('ttf');
}

@font-face
{
    font-family: 'cambria';
    src: local('cambria'), url('./images/fonts/cambria.ttc') format('ttc');
}

@font-face
{
    font-family: 'tahoma';
    src: local('tahoma'), url('./images/fonts/tahoma.ttc') format('ttc');
}
*/



@font-face
{
    font-family: 'verdana';
    src: local('verdana'), url('./images/fonts/verdana.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face
{
    font-family: 'verdana';
    src: local('verdanab'), url('./images/fonts/verdanab.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face
{
    font-family: 'verdana';
    src: local('verdanai'), url('./images/fonts/verdanai.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}

@font-face
{
    font-family: 'verdana';
    src: local('verdanaz'), url('./images/fonts/verdanaz.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
}





/*
@font-face
{
    font-family: 'cambria';
    src: local('cambria'), url('./images/fonts/cambria.ttc') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face
{
    font-family: 'cambria';
    src: local('cambriab'), url('./images/fonts/cambriab.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face
{
    font-family: 'cambria';
    src: local('cambriai'), url('./images/fonts/cambriai.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}

@font-face
{
    font-family: 'cambria';
    src: local('cambriaz'), url('./images/fonts/cambriaz.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
}
*/









@font-face
{
    font-family: 'liberation';
    src: local('liberation serif'), url('./images/fonts/LiberationSerif-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face
{
    font-family: 'liberation';
    src: local('liberation bold'), url('./images/fonts/LiberationSerif-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face
{
    font-family: 'liberation';
    src: local('liberation i'), url('./images/fonts/LiberationSerif-Italic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}

@font-face
{
    font-family: 'liberation';
    src: local('liberation z'), url('./images/fonts/LiberationSerif-BoldItalic.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
}







/*

@font-face
{
    font-family: 'tahoma';
    src: local('tahoma'), url('./images/fonts/tahoma.ttc') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face
{
    font-family: 'tahoma';
    src: local('tahomabd'), url('./images/fonts/tahomabd.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

*/









a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,table th,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video,YAHU 
{
    margin: 0;
    padding: 0;
    border: 0;
    outline: none;
    box-sizing: border-box;
    vertical-align: baseline;
}


/*Ruach Elohim*/
YAHU{
    background-color: green;
    z-index: 70;    

    display: none;
    position: fixed;
    
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    
         padding: 7px;
    border-width: 7px;
          margin: 7px;
          
    font-family: arial;
    font-size: 7rem;
}



::-webkit-scrollbar 
{
    width: 0px;
}


/*
::-webkit-scrollbar-track 
{
    background: black;
    box-shadow: inset 0 0 5px black;
}


::-webkit-scrollbar-thumb
{
    background: #000000;
    transition: all 3s;
}

::-webkit-scrollbar-thumb:hover
{
    background: #FFFFFF;
    transition: all 3s;
} 
*/







:root
{
    font-size: 16px;
}


html
{
    overflow-x: hidden; 
    scrollbar-width: none; 
    
    /*
    text-size-adjust: none;
    -ms-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    */
}


body
{
background-color: #000000;
width: 40%;
margin: auto;

min-width: 650px;

background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;    


}


p
{
    background: rgba(255,255,255,0.1);
    box-shadow: 0 25px 45px rgba(0,0,0,0.1);
    border: 1px solid rgba(255,255,255,0.5);
    -webkit-backdrop-filter: blur(25px);
    backdrop-filter: blur(25px);    
    padding: 8px;
    font-family: liberation;
    font-size: 20px;  /* Old: 1.1rem*/
    color: #7B7B7B;
    /*
    text-shadow: 1px 1px black;
    */

    /*
    background-image: url(../images/bwater.gif);
    -webkit-background-clip: text;
    background-position: center;
    background-size: cover;
    color: transparent;
    */
    
    /*
    background-image: url(../images/livingwords.gif);
    -webkit-background-clip: text;
    color: transparent;
    */
}

.wisp
{
    color: #4C4C4C;
}

.ptitle
{
text-align: center;
border: 12px;
border-style: solid;
border-color: #242424;
font-family: verdana;
letter-spacing: 1px;

}

.label
{
    display: block;
    text-align: center; 
    border: 1px solid black; 
    border-radius: 7px;
    background-color: #242424; 
    color: #FFFFFF;
    font-size: 1.4rem;
    box-shadow: 0 6px 7px rgba(255,255,255,0.6);
    font-family: verdana;
}




h1
{
   cursor: pointer; 
   z-index: 7;
   user-select: none;
   -webkit-user-select: none;
   -khtml-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
}



::selection 
{
    
    background-color: black;
    color: #00FF80;
    
    /*
    background-color: black;
    color: cyan; 
    */
    
    /*
    background-image: url("./images/proto1.gif");
    background-position: center;
    -webkit-background-clip: text;
    */
}




a,
a:visited 
{
color: #000000;
text-decoration: none;
}


a:hover,
a:visited:hover 
{
color: #FFFFFF;
text-decoration: none;
}

audio
{
    width: 300px;
    height: 54px;
    text-align: center;
    margin-top: 13px;
    border-radius: 0px;
    filter: hue-rotate(-80deg);
}

#musicbox
{
    filter: brightness(23%);
}

#midabtn
{
    position: absolute; 
    font-size: .7rem; 
    color: #000000; 
    cursor: pointer; 
    background-color: #373838; 
    padding-top: 0; 
    border: 3px solid #242424; 
    border-top: none; 
    margin-top: 0; 
    border-radius: 3px; 
    left: 50%; 
    transform: translateX(-50%) translateY(-19px);
    transition: filter .3s;
    user-select: none;
}

#midabtn:hover
{
    filter: brightness(93%);
}

#leftabtn
{
    display: inline-block; 
    cursor: pointer; 
    text-align: center; 
    vertical-align: middle; 
    border: 3px solid rgba(0,0,0,.2); 
    border-radius: 5px; 
    font-size: 2rem; 
    color: #DADADA;
    user-select: none;
}

#rightabtn
{
    display: inline-block; 
    cursor: pointer; 
    text-align: center; 
    vertical-align: middle; 
    border: 3px solid rgba(0,0,0,.2); 
    border-radius: 5px; 
    font-size: 2rem; 
    color: #DADADA;
    user-select: none;
}



#leftabtn:hover,#rightabtn:hover
{
    color: grey;
}

#tracknum
{
    display: none;
    position: fixed;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    color: white;
    background-color: black;
    z-index: 10;
    border: 7px solid white;
    padding: 10px 20px 10px 20px;
    font-size: 2rem;
    transition: 2s all;
    opacity: 0;
}




#mict
{
    font-family: verdana;
    color: #DADADA;
}

.mica{
    font-style: italic;
    color: #DADADA;
    font-size: 1.4rem;
}



.textualquote
{
    display: block;
    color: #DADADA;
    border-left: dotted;
    border-color: black;
    padding-left: 17px;
    /*font-style: italic;*/
    font-family: liberation;
    text-shadow: none;
}

.foot
{
    color: #FFFFFF;
    text-align: center;
    font-size: 0.7rem;
    font-family: liberation;
    font-weight: 400;
    width: 70%; 
    margin-left: auto;
    margin-right: auto;
    border: 1px solid #000000;
    letter-spacing: 1px;
    cursor: pointer;
    line-height: 0.5rem;
    border-radius: 5px;
    border-left-color: #FFFFFF;
    border-right-color: #FFFFFF;
    
}




.pwindow
{
    
    font-size: 15px;
    font-family: liberation;
    color: #DADADA;
    padding: 12px;
    filter: brightness(50%);
}


.pagetitle
{
color: #DADADA;
text-shadow: 1px 1px black;
text-align: center;
font-size: xx-large;
}



.hitcounter
{
    font-size: 13px;
    color: black;
    width: 75%;
    margin: auto;
    background-color: #242424;
}


.hislaw
{
    font-size: 13px; /* Old: small*/
    font-family: liberation;
    text-align: center;
    color: #FFFFFF;
    margin: auto;
    background-color: #000000;
    animation:breathingglow 5.0s infinite;
    transform: translateY(-10px);
    /*height: 1.2em;*/
    line-height: 1.3rem;
    white-space: nowrap;
    cursor: pointer;
    margin-top: 10px;
    border-radius: 3px;
}


@keyframes breathingglow
{
    0%{     box-shadow: 0 0 2px white;}
    25%{    box-shadow: 0 0 2px white;}
    50%{    box-shadow: 0 0 10px white, 0 0 10px white, 0 0 20px white;}
    75%{    box-shadow: 0 0 10px white, 0 0 10px white, 0 0 20px white;}
    100%{   box-shadow: 0 0 2px white;}
}




















.gate{
    background: rgba(0,0,0,0.5);   
    color: #FFFFFF;
  transition: box-shadow 2s;
  transition: background 2s;
    }

.gate:hover{
    background: rgba(0,0,0,0.5);   
    color: #FFFFFF;
  box-shadow: 0 0 10px #4D4DFF, 0 0 40px #4D4DFF, 0 0 80px #4D4DFF;
  background: #4D4DFF;
  cursor: pointer;  
}




table
{
background-size: 190px 400px;
}






iframe 
{
border: 4px black solid;
background: black;
}

img
{
    max-width: 100%;
    
}









.centerthetext
{
display: block;
text-align: center; 
}








#yadhehwawheh
{
    display: none;
    
}

#proto
{
    display: none; 
    position: absolute; 
    color: transparent; 
    background-image: url("./images/proto3.gif"); 
    margin: 0; 
    z-index: 7000;
    top: 0px;
    
    left: 50%; 
    transform: translateX(-50%); /* skew(-4deg, -4deg) */
    text-align: center;  
    
    letter-spacing: 3px; 
/*    -webkit-text-stroke: 1px grey; */
    font-size: 112px;
    font-weight: 800;
    font-family: "noto sans phoenician";
    
    -webkit-background-clip: text;
    background-position: center;
    cursor: pointer;
    filter: drop-shadow(0 0 7px cyan);   
    animation: awesome 0.1s infinite;
}

    

    
@keyframes awesome
{
    0%{     filter: drop-shadow(0 0 6px yellow);}
    25%{     filter: drop-shadow(0 0 7px cyan);}
    50%{     filter: drop-shadow(0 0 6px red);}
    75%{     filter: drop-shadow(0 0 7px cyan);}
    100%{   filter: drop-shadow(0 0 6px white);}
}









 
#gap
{
    display: none;
    height: 50px;
}



#alternatenav
{
    display: block;
}



#alternatenav_menu
{
    text-align: center; 
    width: 75%; 
    

    background: #000000; 
    background-image: url('./images/bwater.gif');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;

    
    display: none; 
    position: static;
    margin: auto;
    margin-bottom: 13px;
    
    color: white; 
    border: 10px; 
    border-style: solid; 
    border-color: #000000;
    border-radius: 4px;
    
    font-size: 17px; 
    font-family: liberation;
    box-shadow: 0px 0px 5px 1px #536878;
    font-weight: bold; 
    padding: 20px; 
    text-shadow: 2px 2px #000000;
}



#alternatenav_menu a,
#alternatenav_men a:visited 
{
    color: #FFFFFF;
    text-decoration: none;
}

#alternatenav_menu a:hover,
#alternatenav_men a:visited:hover 
{
    color: white; /* #3D2817 */
    letter-spacing: 1px;
    text-decoration: none;
    text-shadow: none;
}





#ctc
{
    font-weight: bold;
    font-size: xx-large;
    color: #FFFFFF;
    animation:blink 1.7s infinite;
}
    
@keyframes blink
{
    0%{     color: #FFFFFF;}
    49%{    color: #FFFFFF;}
    60%{    color: transparent;}
    99%{    color:transparent;  }
    100%{   color: #FFFFFF;}
}






/*
    #histimetable
    {
        border: 1px solid #FF0000;
        border-color: rgba(255,0,0,.5);
    }

    #histimetable td
    {
        text-align: center;
        color: DarkGrey;
        font-family: consolas;
        border: 1px solid #FF0000;
        border-color: rgba(255,0,0,.5);
        width: 50px;
        padding: 0;
        font-size: 13px;
    }




<table id="histimetable" style="visibility: hidden; position: fixed; background: transparent; bottom: 0; width: 100%; left: 0; color: white;" title="Last updated [3/31/2021]">
<tr>

<td>
[DAY_ID]<br>
14/364
</td>

<td>
[MONTH]<br>
6/12
</td>

<td>
[DAY]<br>
3/30
</td>

<td>
[WEEKDAY]<br>
4th day
<//td>

<td>
[IS TODAY A SABBATH?]<br>
no
</td>

<td>
[NEXT HOLY DAY IN]<br>
0 days
</td>

<td>
[SEASON]<br>
Spring
</td>

<td>
[SEASON DAY]<br>
14/90
</td>

<td>
[SUN]<br>
??.??%+
</td>

<td>
[MOON]<br>
??.??%+
</td>

</tr>
</table>


*/








.hrmain
{
filter: hue-rotate(-10deg);
}

.hrule1
{
display: block;
margin-top: 16px;
filter: hue-rotate(-10deg);
}

.hrule
{
    display: block;
    filter: hue-rotate(-10deg);
}

.hrule2
{
display: block;
margin-bottom: 16px;
filter: hue-rotate(-10deg);
}


.sapphire
{
    filter: grayscale(1);
    width: 15px; 
    height: 15px;
}


button
{
    color: #FFFFFF;
    filter: hue-rotate(-10deg); /*10DarkerPurple 20 40IntenseBlue 60 90 120GreenAndPinkSNES 180GreenAndSkyBlue!*/
    outline: none;
}





button.buttonglow
{
    border: inset;
    border-width: 3px;
    border-color: #9500F9;
    background: radial-gradient(#9500F9, black); 
    cursor: pointer;
    font-size: 13px;
    border-radius: 4px;
    transition: box-shadow 0.5s;
}

button.buttonglow:hover
{
    border: outset;
    background: radial-gradient(#9500F9, black);
    border-color: #9500F9;
    border-radius: 4px;
    box-shadow: 0 0 10px #9500F9, 0 0 40px #9500F9, 0 0 80px #9500F9;
}



button.buttonflow
{
    border: inset;
    border-width: 1px;
    border-color: #9500F9;
    background: radial-gradient(#9500F9, black); 
    cursor: pointer;
    font-size: .7rem;
    border-radius: 1px;
    transition: box-shadow 0.5s;
}

button.buttonflow:hover
{
    border: outset;
    border-width: 1px;
    background: radial-gradient(#9500F9, black);
    border-color: #9500F9;
    border-radius: 1px;
    box-shadow: 0 0 10px #9500F9, 0 0 40px #9500F9, 0 0 80px #9500F9;
}



button.menubuttonleft
{
    height: 50px; 
    width: 50px; 
    bottom: 0; 
    left: 0; 
    position: fixed; 
    border: inset;
    border-width: 3px;
    border-color: #9500F9;
    background: radial-gradient(#9500F9, black);
    cursor: pointer;
    font-size: 13px;
    border-radius: 4px;
    transition: box-shadow 0.5s;
    z-index: 7;
}

button.menubuttonright
{
    height: 50px; 
    width: 50px; 
    bottom: 0; 
    right: 0; 
    position: fixed; 
    border: inset;
    border-width: 3px;
    border-color: #9500F9;
    background: radial-gradient(#9500F9, black);
    cursor: pointer;
    font-size: 13px;
    border-radius: 4px;
    transition: box-shadow 0.5s;
    z-index: 7;
}

button.menubuttonleft:hover
{
    border: outset;
    background: radial-gradient(#9500F9, black);
    border-color: #9500F9;
    border-radius: 4px;
    box-shadow: 0 0 10px #9500F9, 0 0 40px #9500F9, 0 0 80px #9500F9;
}
        
button.menubuttonright:hover
{
    border: outset;
    background: radial-gradient(#9500F9, black);
    border-color: #9500F9;
    border-radius: 4px;
    box-shadow: 0 0 10px #9500F9, 0 0 40px #9500F9, 0 0 80px #9500F9;
}




button.themeselect
{
    height: 30px; 
    width: 30px; 
    border: inset;
    border-width: 3px;
    border-color: #9500F9;
    background: radial-gradient(#9500F9, black);
    cursor: pointer;
    font-size: 13px;
    border-radius: 4px;
    transition: box-shadow 0.5s;
    z-index: 7;
}

button.themeselect:hover
{
    border: outset;
    background: radial-gradient(#9500F9, black);
    border-color: #9500F9;
    border-radius: 4px;
    box-shadow: 0 0 10px #9500F9, 0 0 40px #9500F9, 0 0 80px #9500F9;
}






button.bteleport
{
     
     
     height: 30px; 
     
    border: inset;
    border-width: 3px;
    border-color: #9500F9;
    background: radial-gradient(#9500F9, black);
    cursor: pointer;
    font-size: 13px;
    border-radius: 4px;
    transition: box-shadow 0.5s;
    z-index: 7;
}

button.bteleport:hover
{
    border: outset;
    background: radial-gradient(#9500F9, black);
    border-color: #9500F9;
    border-radius: 4px;
    box-shadow: 0 0 10px #9500F9, 0 0 40px #9500F9, 0 0 80px #9500F9;
}



.tooltip
{
    position: relative;    
}

.tooltip::before
{
    position: absolute;
    
    font-family: Narkisim;
    font-size: 1rem;
    
    width: max-content;
    min-width: 50vw;
    max-width: 90vw;
    
    background-color: black;
    color: #FCFCFC;
    border: 1px solid white; /* #09769F */
    border-image: url("./images/menu_background.gif") 15;
    box-shadow: 0px 0px 4px white;
    padding: 2px;
    --scale: 0;
    content: attr(data-tooltip);
    left: 50%;
    transform: translateX(-50%) translateY(-100%)  scale(var(--scale));
    transition: transform 0.7s;
    transform-origin: bottom center;
    white-space: pre-line;
}

.tooltip:hover::before
{
   --scale: 1;
}









.moreinfoinit 
{    
    border-bottom: 1px dotted #04F5FC;    
    text-decoration: none;
    cursor: pointer;
}



#loading
{
    font-size: 13px;
    background-image: url(./images/flash.gif);
    -webkit-background-clip: text;
    background-position: center;
    background-size: cover;
    color: transparent;
    
}

.luachShana{
    color: gold;
    font-style: normal;
    font-family: liberation;
    font-size: 17px;
    
    background-image: url(./images/coinflash.gif);
    -webkit-background-clip: text;
    background-position: center;
    background-size: cover;
    color: rgba(255,215,0, .5);
}

.trax
{
    color: gold;
    background-image: url(./images/coinflash.gif);
    -webkit-background-clip: text;
    background-position: center;
    background-size: cover;
    color: rgba(255,215,0, .5);
}

button.buttonglowLuach
{
            border: inset;
            border-width: 3px;
            border-color: lightGrey;
            background: radial-gradient(lightGrey, black); 
           cursor: pointer;
           font-size: 13px;
           border-radius: 4px;
           transition: box-shadow 0.5s;
           margin-top: 1px;
        }
        
        button.buttonglowLuach:hover{
            border: outset;
            background: radial-gradient(lightGrey, black);
            border-color: lightGrey;
            border-radius: 4px;
            box-shadow: 0 0 10px lightGrey, 0 0 40px lightGrey, 0 0 80px lightGrey;
        }









#yafeh
{
    background-color: #FF0000;
    animation: energize 7s linear infinite;
    box-shadow: 0 0 10px red, 0 0 20px red, 0 0 40px red, 0 0 80px red, 0 0 100px red;
}

@keyframes energize
{
    0%
    {
        filter: hue-rotate(0deg);
    }
    
    100%
    {
        filter: hue-rotate(360deg);
    }
}















#cab
{
    position: fixed;
    display: flex;
    flex-direction: column;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 500px;
    height: 275px;
    overflow-x: hidden;
    overflow-y: hidden;
    z-index: 9999999;
    
    background-color: black;
    color: black;
    border-radius: 7px;
    opacity: 0;
    transition: opacity 1s;
    
    box-shadow: 0 0 4px #00FF80;
    user-select: none;
}

#cabhead
{
    background-color: black;
    color: springGreen;
    padding: 5px;
    font-family: liberation;
    text-align: center;
    font-size: 1.3rem;
    font-weight: bold;
}

#cabmsg::-webkit-scrollbar
{
    width: 12px;
}

#cabmsg::-webkit-scrollbar-track 
{
    background: black;
    box-shadow: inset 0 0 5px black;
}


#cabmsg::-webkit-scrollbar-thumb
{
    background: #00FF80;
    transition: all 3s;
    border-radius: 2px;
}


#cabmsg
{
    scrollbar-width: 12px;
    font-family: liberation;
    font-size: 20px;
    padding: 9px;
    overflow-y: scroll;
    background-color: darkGrey;
    min-height: 202px;
    max-height: 202px;
    flex-grow: 1;
}

#cabbtn
{
    
    text-align: center;
    padding: 4px;
    background-color: black;
}

button.buttonglowMonk
{
            border: solid;
            border-width: 3px;
            border-color: #00FF80;
            color: black;
            background: radial-gradient(#00FF80, black); 
           cursor: pointer;
           
           border-radius: 4px;
           transition: box-shadow 0.5s;
           font-family: liberation; 
           font-size: 19.2px;
        }
        
        button.buttonglowMonk:hover{
            border: solid;
            color: black;
            background: radial-gradient(#00FF80, black);
            border-color: #00FF80;
            border-radius: 4px;
            box-shadow: 0 0 10px #00FF80, 0 0 40px #00FF80, 0 0 80px #00FF80;
        }












@media(orientation: portrait)
{
    body
    {
        width: 100%;
        
    }

    .tooltip::before
    {
        max-width: 95vw;
        width: 95vw;
        font-size: .7rem;
    }
    
    #proto
    {
        transform: none; /* Issue where his name in old Hebrew on mobile is not centered, though on Desktop resizing window it's fine..? */
    }
}