@font-face {
    font-family: "fab";
    src: url(../fa-brands-400.ttf);
}
@font-face {
    font-family: "fas";
    src: url(../fa-solid-900.ttf);
}
@font-face {
    font-family: "curs";
    src: url(../Pacifico-Regular.ttf);
}
:root{
    --elementBack: #00000094;
    --elementBorder: solid var(--borWid) #595959;
    --space: 0.3em;
    --borWid:0.1em;
    --maxWid: calc(100vw - calc(var(--space) * 2));
    --maxWidBor: calc(var(--maxWid) - calc(var(--borWid) * 2));
    --radiusSuper: 100em;
    --contentHeight: calc(100vh - calc(2.2em + calc(var(--space) * 5.5)));
}
.StylesTest{
    border: var(--elementBorder);
    background: var(--elementBack);
    width: var(--space);
    height: var(--space);
}
body{
    overflow:hidden;
    color:white;
    margin: 0px;
    width: calc(var(--maxWid) + var(--space) + var(--space));
    background: radial-gradient(#4D29AAFF, #1E123DFF);
    background-size: 100vw 100vh;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.topBar{
    margin: var(--space);
    margin-bottom:0px;
    height: 2.2em;
    width: calc(var(--maxWidBor) - calc(var(space) * 2));
    border: var(--elementBorder);
    background-color: var(--elementBack);
    border-radius: var(--radiusSuper);
    padding: var(--space);
    color: #fff;
    vertical-align: top;
    overflow: hidden;
    padding-left: 15px;
    padding-right: 15px;
    position: static;
    top:0px;
    z-index: 19999999999;
}
.topBar *{
    display: inline-block;
}
.topBar > * {
    vertical-align: middle;
}
.icon{
    width: 2.2em;
    height: 2.2em;
    background-image: url(faux.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: .4em;
}
.headerName{
    font-size: 12pt;
    line-height: 2.2em;
    height: 2.2em;
}
.headerCard{
    height: 2.2em;
    background: var(--elementBack);
    border-radius: var(--radiusSuper);
    border: var(--elementBorder);
    width: fit-content;
    font-size: 10pt;
    line-height: 2.2em;
    padding-left: var(--space);
    padding-right: var(--space);

    margin-left: var(--space);
    text-align: center;
    min-width: calc(2.2em - calc(var(--space) * 2));
    margin-top: 0.15em;
}
.fa{
    font-family: fab,fas;
}
.content{
    margin-left:auto;
    margin-right: auto;
    width:var(--maxWid);
    max-height: var(--contentHeight);
    margin-top: var(--space);
    overflow:auto;
    text-align: center;
    vertical-align: middle;
    max-width: 70vw;
}
.content *{
    max-width: 65vw;
}
.wide .cover{
    width: 5.5em !important;
    background-size: contain;
    height: 100%;
}
.wide h3{

}
.wide{
    width: 15em !important;
    height: 6em !important;
}
.gridcard{
    width: unset;
    text-align: center !important;
    align-content: center;
    display: block;
    align-items: center;
}
.imageCard{
    display: inline-block !important;
}
.intro1{
    font-family: curs;
    text-align: center;
    height: var(--contentHeight);
    padding: auto;
    align-items: center;
}

*{vertical-align: middle !important}
td.intro p{
    padding-left: 50px;
    padding-right: 50px;
}
.fillH{
    height: calc(var(--contentHeight) - 10px);
}
.content.intro{
    margin-top:10px
}
.content.intro h1{
    font-weight: normal;
    padding:0px;
    margin:0px;
    line-height: normal;
    margin-block-start: 0px;
    margin-block-end: 0px;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}
p{margin:0px}
.sona{
    position: absolute;
    bottom: 0px;
    left:0px;
    width: 50vw;
    height: var(--contentHeight);
    background-image: url(faux.png);
    background-size: contain;
    background-repeat: no-repeat;
    max-height: 70vh;
    background-position-y:bottom;

}
.intro1{
    width: 50vw;
    float: right;
}
.topBar *{user-select: none;}
.headerCard:hover, .headerCard.active{
    background-color: #8000ff94;
}
.menu{
    float: right;
}
@media (max-width: 780px){
    .intro1{            
        height: 100vh;
        width: 100vw;
        background-color: var(--elementBack);
        z-index: 0;
        position: relative;
    }
    .content{
        margin-top: -55px !important;
        width: 100vw;
        height: 100vh !important;
        max-height: unset;
        z-index: 1 !important;
        margin-top: 0px !important;
    }
    .topBar{
        z-index: 9999999 !important;
        position: absolute;
        width: calc(100vw - calc(var(--space) * 8.5));
    }
    .sona{
        width: 100vw;
        background-position: center;
        position: absolute;
        bottom: 0px;
    }
    .content *, .content{
        max-width: 100vw;
    }
}
@media (max-width:590px) {
    
   .menu.open{
        position: absolute;
        top:44px;
        left:0px;
        z-index: 999999999;
        height: 100vh;
        background-color: var(--elementBack);
    } 
    .topBar:has(.menu.open){
        border-radius: 0px;
        margin:0px;
        width: 100vw;
        border:0px

    }
    .menu.open > *{
        font-size: larger;
        text-align: center;
        float:unset;
        border: 0px;
        order: 0;
    }
    .menu.open > *:not(.icon){
        width: calc(100vw - calc(var(--space) * 4));
        float: left;
    }
    .menu:not(.open){
        display: none;
    }
    .topBar{
        overflow: visible;
    }
    .menucontrol{
        display: block !important;
        position: absolute;
        right: 20px;
        top: calc(var(--space) * 1);
        z-index: 9999999999999999999999999999999 !important;
        font-size: 1.1em;
    }
}

.menucontrol{
    display: none;
}
.expad{padding: calc(var(--space) * 1.5);}

a{
    color:white !important;
}
.fancy{
    font-style: italic;
    text-decoration-line: underline;
}
h1,h2,h3{
    font-family: curs;
}
iframe.sharebtn {
    position:absolute;
    bottom:0px;
    right:0px;
    outline:none;
    height: 25px;
    width: 80px;
    border:0px;
}

.largeCard{
    display: inline-block !important;
    width: max-content;
    height: max-content;
    padding: 5px;
    border-radius: 10px;
    background-color: var(--elementBack);
    border: var(--elementBorder);
    width: 10em;
    height: 10em;
    background-size: contain;
    background-blend-mode: darken;
}
.largeCard .headerCard{
    width: calc(100% - calc(var(--space) * 4.5));
    padding: 2px !important;
}
.warning:hover{background-color: #ffcc0094 !important;}
.warning{
    background-color: #ffcc0094;
}
.largeCard.vertical .img{
    aspect-ratio: 1 / 1;
    border-radius: 10px;
    max-width: 100%;
    max-height: 100%;
    background-size: cover;
}

/* scrollbar */
::-webkit-scrollbar {
    width: 5px;
    height: 5px;
  }
  
  ::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    -webkit-border-radius: 10px;
    border-radius: 10px;
  }
  
  ::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.3);
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
  }
  
  ::-webkit-scrollbar-thumb:window-inactive {
    background: rgba(255, 255, 255, 0.3);
  }