/*
 *{
    border: solid red 1px;
} 
*/

body, html, * {
    margin:0;
    padding:0
} 


/* Hide scrollbar in chrome */
*::-webkit-scrollbar{
    display: none;
}


*{
    cursor: default;
    user-select: none;
}

.scrollinside{
    overflow:scroll;
}

.noscroll {
    overflow:clip;
}

.max80 {
    max-height: calc( 100vh - 120px );
    min-height: calc( 100vh - 120px );
}

.max100{
    max-height:100%;
}

.maxw90{
    max-width: 90vw !important;
}

.index100{
    z-index: 100;
}

.pop{
    z-index: 100;
}

.opaque{
    opacity: 1;
}

.mb15{
    margin-bottom: 15px;
}

.contentwrap{
    position: fixed;
    top: 0px;
    left: 0px;
    width: 30%;
    height: 100%;
    z-index: 999;
    overflow-y: scroll;
    display: block;
    opacity: 1;
}

.contentwrap-flex{
    position: relative;
    width: 30%;
    height: 100%;
    z-index: 999;
    overflow-y: scroll;
    display: block;
    opacity: 1;
}



.flex-container{
    display: flex;
    justify-content: start;
    align-items: start;
    flex-wrap: wrap;
    flex-direction: row;
    align-content: space-between;
    z-index: 900;
}

.flex-center{
    margin-top: auto;
}

.card, .card_slim, .menucard {
    display: flex;
    flex-direction: column;
    white-space: initial;
    margin: auto;
    padding: 10px;
    margin-top: 3vh;
    margin-bottom: 0vh;
    z-index: 30;
    resize:none;
    -ms-overflow-style: none;
    scrollbar-width: none;
    overflow-y: scroll;
}
.card::-webkit-scrollbar, .card_slim::-webkit-scrollbar, .menucard::-webkit-scrollbar {
    display: none;
}

.card, .card_slim{
    background-image: linear-gradient(170deg, 
    rgba(var(--card),0.4) clamp(15%, 120px, 120px), 
    rgba(var(--card),0.2) clamp(15%, 120px, 120px), 
    rgba(var(--card),0.3) clamp(75%, calc(100% - 120px), calc(100% - 120px)), 
    rgba(var(--card),0.5) clamp(75%, calc(100% - 120px), calc(100% - 120px)));
    border: solid 4px rgba(0,0,0,0.4);
    box-shadow: rgba(0,0,0,0.8) 3px 15px 15px;
    overflow-x: hidden;
}

.card{
    width: clamp(400px, 40%, 30%);
    max-height: 75vh;
    min-height: 75vh;
}

.card_slim{
    width: clamp(300px, 30%, 20%);
    max-height: 90vh;
    min-height: 90vh;
}

.font-card{
    width: clamp(250px, 45%, 45%) !important;
}

.menucard {
    background-image: linear-gradient(170deg, 
    rgba(var(--menucard),0.7) clamp(15%, 120px, 120px), 
    rgba(var(--menucard),0.4) clamp(15%, 120px, 120px), 
    rgba(var(--menucard),0.4) clamp(80%, calc(100% - 120px), calc(100% - 120px)), 
    rgba(var(--menucard),0.7) clamp(80%, calc(100% - 120px), calc(100% - 120px)));
    border: solid 4px rgba(0,0,0,0.4);
    box-shadow: rgba(0,0,0,0.8) 3px 15px 15px;
    width: clamp(300px, 27vw, 27vw);
    /* min-width: 300px; */
    max-height: 90vh;
    min-height: 90vh;
    padding-left: 10px;
    padding-right: 10px;
    margin-left: 2vw;
    margin-right: 2vw;
    overflow-x: hidden;
    overflow-y: scroll;
    word-break: break-word !important;
}

.cardinfo{
    text-align: center;
}

.display-block{
    display: block;
}

@media screen and (max-width: 992px) {
    .menucard, .card , .card_slim{
        width: 45% !important;
      }
}
  
  @media screen and (max-width: 600px) {
    .menucard, .card, .card_slim{
      width: 70% !important;
    }
  }


  /* CLOCK */
  /* CLOCK */
  /* CLOCK */
  /* CLOCK */

.clock{
    position: absolute;
    bottom: 5vh;
    left: 0;
    right: 0;
    width: fit-content;
    height: fit-content;
    z-index: 999;
    margin-inline: auto;
    display: block;
    opacity: 1;
}

.clock:hover{
    opacity: 0.5;
}

@media screen and (max-width: 700px) {
    .clock {
      display: none !important;
      visibility: hidden;
      position: relative;
    }
  }

.hider {
    display: none;
    visibility: hidden;
    position: relative;
}

.polygon {
    background-color: chartreuse;
    width: 200px; /* adjust to control the size */
    aspect-ratio: 1;
    clip-path: polygon(55% 10%,10% 100%,0% 100%,50% 0%); /* */
  }

  .polygon:hover {
    background-color:coral;
  }

  .menubutton{
    background-color: white; /* fallback color */
    background: linear-gradient(135deg, rgb(100,100,255) 0%, rgb(255,255,96) 100%);
    background-size: 200% 200%;
    background-position: 50% 50%;
    mask-image: url(../images/menu_w.svg);
    mask-size:70%;
    mask-repeat: no-repeat;
    mask-position: center center;
    display: block;
    background-position: center center;
    background-repeat: no-repeat;
    position: fixed;
    top: 5px;
    left: 10px;
    height: 2vh;
    width: 2vh;
    z-index: 99999;
    padding: 15px;
    animation: menubuttoncolor 5s linear infinite;
    transition-duration: 0.5s;
    opacity: 1.0;
  }
  .menubutton:hover{
    transform: rotate(180deg);
    opacity: 1;
  }
  
  @keyframes menubuttoncolor {
    0%, 100%{
        background-position: 0% 0%;
    }
    50%{
        background-position: 100% 100%;
    }
  
  }

.hourlybutton{
    transform: scale(1.00);
    transition-duration: 0.6s;  
    z-index: 10000;
}
.hourlybutton:hover, .hourlybutton:target, .hourlybutton::selection{
    transform: scale(1.4);
    z-index: 10100;
}
@supports selector(:has(+ *)) {
    .hourlybutton:hover + .hourlybutton, .hourlybutton:has(+ .hourlybutton:hover) {
        transform: scale(1.2);
        z-index: 10050;
    }
}

.infozoom{
    transform: scale(1.00);
    transition-duration: 0.6s;  
    z-index: 500000;
}
.infozoom:hover, .infozoom:target, .infozoom::selection{
    transform: scale(1.3);
    z-index: 10100;
}
@supports selector(:has(+ *)) {
    .infozoom:hover + .infozoom, .infozoom:has(+ .infozoom:hover) {
        transform: scale(1.1);
        z-index: 10050;
    }
}