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,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,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{
    margin: 0;
    padding: 0;
    border: 0;
    outline: none;
    box-sizing: border-box;
    vertical-align: baseline;
}





:root {
    font-size: 16px;
    font-family: cambria;
    --blue2: rgb(16, 0, 206); /* night */
    --blue1: rgb(13, 0, 230);

    --night: rgb(16, 0, 206); /* #1000CE */
    --day: rgb(13, 0, 230);   /* #0D00E6 */
}


:root[data-theme="ScarletThread"] {
    --night: rgb(206, 0, 16); /*#CE0010;*/
    --day: rgb(230, 0, 13); /*#E6000D;*/
}

:root[data-theme="EmeraldDream"] {
    --night: rgb(72, 117, 68);
    --day: rgb(73, 127, 69);
}

:root[data-theme="Yoshi"] {
    --night: rgb(16, 206, 0);
    --day: rgb(13, 230, 0);
}

:root[data-theme="TrueBlue"] {
    --night: rgb(16, 0, 206); /* #1000CE */
    --day: rgb(13, 0, 230);   /* #0D00E6 */
}

:root[data-theme="Midnight"] {
    --night: rgb(9, 0, 113); /* #1000CE */
    --day: rgb(8, 0, 149);   /* #0D00E6 */
}

:root[data-theme="Jerusalem"] {
    --night: rgb(206, 206, 16); /* #1000CE */
    --day: rgb(230, 230, 13);   /* #0D00E6 */
}

:root[data-theme="Ascension"] {
    /* 88, 9, 179 CHO */
    --night: rgb(88, 9, 179); /* #1000CE */
    --day: rgb(102, 6, 193);   /* #0D00E6 */
}

:root[data-theme="Perception"] {
    --night: rgb(206, 96, 16); /* #1000CE */
    --day: rgb(230, 112, 13);   /* #0D00E6 */
}

:root[data-theme="Graciousness"] {
    --night: rgb(206, 16, 206); /* #1000CE */
    --day: rgb(230, 13, 230);   /* #0D00E6 */
}

:root[data-theme="Lailah"] {
    --night: rgb(0, 0, 0); /* #1000CE */
    --day: rgb(15, 15, 15);   /* #0D00E6 */
}

:root[data-theme="Adamah"] { /* Chosen by hand */
    --night: rgb(75, 46, 0);
    --day:   rgb(87, 53, 0);
}

:root[data-theme="Ethanim"] {
    --night: rgb(255, 0, 255);
    --day: rgb(255, 0, 255);
}

:root[data-theme="Andrew"] {
    --night: rgb(255, 0, 255);
    --day: rgb(255, 0, 255);
}








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

::-webkit-scrollbar-track 
{
    background: rgba(217,217,217,0.8); /* #000000 
    box-shadow: inset 0 0 5px black; */
}


::-webkit-scrollbar-thumb
{
    background: var(--night); /*day*/
    transition: all 3s;
    border-radius: 2px;
}

::-webkit-scrollbar-thumb:hover
{
    background: var(--night);
}



::selection {
    background-color: white;
    color: black;
}










html {
    height: 100%;
    min-height: 100vh;
    overflow-x: hidden; 
    
    
    /*
    text-size-adjust: none;
    -ms-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    */
}




body {
    height: 100%;
    
    background-color: #565656;
    color: white;
    /*min-width: 1230px;*/ /* body was min-width 1230, main was width 1000 and I liked it. Right now I have no width on body and max width 1230 on main. Changed max width to 1000 now looks right.*/
    margin: auto;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;    
}

main {
    /*max-width: 1000px;*/
    min-height: calc(100vh - 300px - 65px); /* Lailah */     
    padding-left: 7px;
    padding-right: 7px;
}

.mainFlare {
    border-right: 20px solid #000000;
    border-radius: 0 30px 0 0; 
}

.card {
    background-color: rgba(217,217,217,0.8); 
    color: rgba(0,0,0,1);
    font-family: times;
    border-radius: 20px;
    corner-shape: squircle;
}

footer {
    position: relative;
    display: flex;
    justify-content: center;
    flex-direction: column;
    background-color: #FFFFFF;
    height: 300px;
    text-align: center;
    color: black;
    font-size: 14px;
}




a{
    position: relative;
    cursor: pointer;
    color: white;
    text-decoration: none;
}

a:visited{
    color: white;
}

a:hover{
    color: var(--day);  /* rgb(13, 0, 230); */
    
}

/* Create an underline pseudo-element */
a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -3px; /* Adjust the value to control the distance of the underline from the text */
  width: 0;
  height: 2px; /* Adjust the value to set the thickness of the underline */
  background-color: var(--night);   /* rgb(16, 0, 206);  Set your desired underline color */
  transition: width 0.4s; /* Set the animation duration */
}

/* Add the animation on hover */
a:hover::after {
  width: 100%;
}

#logos a:hover::after {
  width: 0%;
}

table{
    border: 5px solid black; 
    padding 3px; 
    margin-right: 20px; 
    text-shadow: 1px 1px black;
}

th{
    background-color: var(--day); 
    border: 1px solid black; 
    padding: 4px; 
    color: var(--day);
}

td{
    background-color: rgba(217,217,217,0.8); 
    padding: 4px; 
    padding-left: 10px; 
    border: 1px solid black;
}


table a:hover{
    color: #FFFFFF;
    text-decoration: underline;
}

table a:hover::after{
    width: 0;
}


#holyholyholy a:hover{
    color: gold;
}


p{
    font-family: cambria; /*Windows Font*/
    font-size: 19px; /*17 18*/
    /*text-shadow: 1px 1px black;*/
}



footer a{
    color: #000000;
}

#holyholyholy{
    font-size: 18px;
}

#random{
    display: none;
    
    font-family: cambria;
    font-size: 18px;
    color: #000000;
    
    position: absolute; 
    top: 15px; 
    left: 50%; 
    transform: translateX(-50%);
    
    border: 1px solid black;
    padding: 2px;
    
    text-shadow: none;
}

#random::selection{
    background-color: black;
    color: red;
}

h1{
    display: block;
    text-align: center;
    margin-bottom: 33px;
    font-size: 33px;
    /*text-decoration: underline;*/
    font-family: arial, sans-serif;
    text-shadow: 1px 1px #000000;
}





bible {
    font-weight: bold;
    text-shadow: 1px 1px black;
}



.notouch {
        user-select: none;
    }



input {
    caret-color: var(--day);
    outline-color: var(--day);
}


.cursi {
    font-family: cursive;
}




#banner {
    position: sticky;
    display: flex;
    justify-content: space-between;
    align-items: center;
    top: 0;
    /*overflow: hidden;      Bugged? BulletinBoard*/
    user-select: none;
    margin-top: 0;
    
    width: 100%;
    height: 65px;
    
    background-color: transparent;
    font-family: cambria;
    color: #FFFFFF;
    font-weight: bold;
    
    z-index: 7;
}

#bi1 {
   display: flex;
   justify-content: center;
   align-items: center;
   background-color: var(--day);
   min-width: 519px;
   height: 65px;
}

#bi2 {
    position: relative;
    width: 100%; 
    height: 65px;
    background-color: rgba(217,217,217,0.8); 
    text-align: right;
    font-size: 16px;
}

#bone {
    background-color: var(--day);
}

#btwo {
    background-color: var(--night);
}

nav {
    font-family: cambria;    
}

#altnav {
    display: none;
}

#login {
    display: none;
    position: fixed;
    
    right: 0;
    top: 0;
    z-index: 999999;
    
    width: 400px;
    height: 100vh;
    
    background-color: #EFEFEF;
    color: #000000;
    
    border: 3px solid black;
    border-radius: 5px;
    
    box-shadow: -3px 0px 5px black;
}

#exitlogin {
    cursor: pointer; 
    padding-right: 3px; 
    padding-left: 3px; 
    background-color: black; 
    border-radius: 50%; 
    color: white;
}

#exitlogin:hover {
    /*filter: brightness(30%);*/
    color: var(--day);
}


button {
    cursor: pointer;
    font-family: arial;
    letter-spacing: 1px;
    
    background-color: var(--day); rgb(13, 0, 230);
    color: #FFFFFF;
    transition: all 0.4s;
    border: none;
    border-radius: 0.25rem;
    
    font-size: 20px;
    padding: 8px;
    padding-left: 20px;
    padding-right: 20px;
}


button:hover {
    background-color: var(--night);
}


#logo {
    filter: brightness(0) invert(1);
}

#logo:hover {
    filter: brightness(0) invert(0);
}


.yafeh {
    animation: pretty 7s linear infinite;    
}

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








fieldset {
    border: 2px groove white;
    padding: 6px;
    box-sizing: border-box;
}

legend {
    font-size: 22px;
    color: #CFCFCF;
    font-family: cambria;
    box-sizing: border-box;
}


.hpo {
    display: inline-block;
    font-family: cambria;
    font-size: 18px;
    margin-bottom: 25px;
    line-height: 30px;
}
    


/* Field */
.hpof {
    background-color: black;
    color: #FFFFFF;
    margin-right: 25px;
    width: fit-content;
    border-color: var(--day);
    
}

/* Link */
.hpl {
    border: 1px solid var(--day); /*#D9D9D9CC */
    background-color: black;
    padding: 3px;
    color: white;
    
}

/* Link hover*/
.hpl:hover {
    color: var(--day);
}

.hpl:hover::after {
    width: 0%;
}
    
    






#dialog{
    display: block;
    min-width: 539px;
    max-width: 540px;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border: 3px solid white;
    background-color: grey;
    color: white;
    font-size: 20px;
    padding: 5px;
    box-shadow: 0 0 15px white; /* var(--blue2) */
    opacity: 0;
    transition: opacity .5s;
    z-index: 9999;
}

#dialogbutton{
    display: block;
    text-align: center;
}















/*
@media(orientation: portrait)
{
    body
    {
        width: 100%;
    }
    
    main
    {
        width: 100%;
        border: none;
    }
}
*/




/*1210 breaks on Chrome test*/
@media screen and (max-width: 1220px)
{
    nav
    {
        display: none;
    }
    
    #altnav
    {
        display: block;
    }
    
    
    body
    {
        width: 100%;
    }
    
    main
    {
        width: 100%;
        border: none;
    }
    
}










/* If I print something I strip the color and convert everything to B&W and hide the header and footer. */
@media print
{
    body
    {
        background-color: #FFFFFF;
        -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
        filter: grayscale(100%);
    }
    
    #banner
    {
        display: none;
    }
    
    footer
    {
        display: none;
    }
    
    #lorule
    {
        display: none;
    }
}