body{
    background-image:var(--background);
    background-size:cover;
    background-attachment: fixed;
    background-repeat:repeat;
    font-family: Verdana, sans-serif;
    color:var(--textcolor);
    font-size:14px;
}

.container{
width:60%;
margin: 0 auto; 
}


.theme{
border:none;
padding:3px;
margin:2px;
background-color:transparent;
font-size:30px;
background-color: var(--boxcolor);
border-radius:8px;
position:relative;
float:right;
}

.header{
    grid-area:header;
    width:100%;
    height:140px;
    background-image:var(--header);
    background-size:auto 90%;  
    background-color: transparent;
    border:none;
    background-repeat: no-repeat;
    background-position: center;
}

.nav{
    width:100%;
    height:50px;
    padding:2px;
    text-align: center;
}

.body{
    width:100%;
    background-color:var(--boxcolor);
    border:1px solid black;
    padding:6px;
}

.footer{
    width:100%;
    border-top:1px solid black;
    text-align: center;
}

.info{
    background-color:var(--warning);
    padding:6px;
    margin:3px;
}

.navbutton{
background-color:var(--navbgcolor);
border-radius:3px;
padding:4px;
font-family: 'comic sans ms',sans-serif;
border:1px solid black;
font-size:1em;
display:inline-block;
margin:2px;
text-transform: uppercase;
box-shadow:2px 2px 2px 1px #00000046;

}


.container > div{
margin:3px;
padding:8px;
}

iframe{
border:none;
}



.nav{
grid-area:nav;
}


a{
text-decoration: none;
color:inherit;
}

.flex{
display:flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}

.minibox{
max-width:300px;
border:1px solid black;
padding:6px;
margin:4px;
}

.box{
border:1px solid black;
padding:6px;
margin:4px;
}


/* TOOLTIP */
.tooltip{
    position: relative;
    display: inline;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 200px;
    background-color: rgb(255, 255, 255);
    color: #000000;
    border:1px solid rgba(0, 0, 0, 0.589);
    text-align: center;
    padding: 5px;
    border-radius: 6px;
    position: relative;
    left:2%;
    bottom:5px;
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.3s;}

.tooltiptext b{
border-bottom: 1px solid black;
}
.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}

/* ACTIVITY / AVALIABILITY styling */

.inactive a{
opacity:0.5;
cursor: not-allowed;
pointer-events: none;
}

.inactive{
opacity:0.5;
cursor: not-allowed;}


a{
color:var(--linkcolor);
}

a:hover{
color:var(--linkhovercolor);
}

.navbutton:hover{
background-color: var(--headercolor);
}

/* under construction css by https://alexwlchan.net */
    .under_construction {
    --yellow:       255, 215, 0;  /* CSS gold */

    background: rgba(var(--yellow), 0.2);

    border-left-width: 10px;
    border-left-style: solid;
    border-image: repeating-linear-gradient(
        45deg,
        black,
        black              5px,
        rgb(var(--yellow)) 5px,
        rgb(var(--yellow)) 10px
    ) 10;
    }