:root {
    
    /* CSS DARK THEME ~ BASE COLORS*/
    /** Base colors */
    --clr-dark-a0: #000000;
    --clr-light-a0: #ffffff;

    /** Theme primary colors */
    --clr-primary-a0: #ffffff;
    --clr-primary-a10: #ffffff;
    --clr-primary-a20: #ffffff;
    --clr-primary-a30: #ffffff;
    --clr-primary-a40: #ffffff;
    --clr-primary-a50: #ffffff;

    /** Theme surface colors */
    --clr-surface-a0: #020e1c;
    --clr-surface-a10: #1d2531;
    --clr-surface-a20: #353c47;
    --clr-surface-a30: #4f555f;
    --clr-surface-a40: #6a6f77;
    --clr-surface-a50: #868a91;

    /** Theme tonal surface colors */
    --clr-surface-tonal-a0: #1b232f;
    --clr-surface-tonal-a10: #303743;
    --clr-surface-tonal-a20: #474d58;
    --clr-surface-tonal-a30: #5f646e;
    --clr-surface-tonal-a40: #787c84;
    --clr-surface-tonal-a50: #91959c;

    
       /** FONTS */
	--font-family-default: "Moderustic", sans-serif;
	--font-optical-sizing:auto;
	--font-weight-default:800; /* 300 - 800*/
	--font-style-default: normal;
    --font-size-base: 16px;
    --font-color-base:var(--color-primary-a0);
    
    /* --font-size-large: 800;
    --font-size-small: 100;    
    */
}

html { height: -webkit-fill-available; }
a { color: var(--color-primary-a50); text-decoration: none; }

body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100dvh;
    /* mobile viewport adjustment*/
    min-height: -webkit-fill-available;
    background-color: var(--clr-surface-a0);
    overflow: hidden;
    font-family: var(--font-family-default);
    font-size: calc(var(--font-size-base));
    color: var(--font-color-base);
}

.primary-container {
    overflow: hidden; /* prevent scrollbars */
    display: flex;
    flex-direction: column;
    width:100vw;
	height: 100dvh;
	background-color:var(--clr-surface-a30);
	box-sizing: border-box;
}

#primary-container-logo{
    flex: 0 0 auto;
    padding: 5px 5px 5px 5px;
    
}
.primary-container-header {
    display: flex;
    align-items: center;
    background-color:var(--clr-surface-a0);
    justify-content: flex-start;
}
.primary-container-header-banners {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

#primary-container-panel {
    width: 100vw;
   	height: 100dvh;
    box-sizing: border-box; /* Ensures padding/border do not increase size */
    background-color: var(--clr-surface-tonal-a20);
    display: flex;
    justify-content: center;
    align-items: center;
    
}

.primary-container-panel-main{
    display: flex;
    justify-content: center;
    align-items: center;
    height:100%;
}

.primary-container-panel-main canvas {
    position: relative;
    border: 1px solid white;

}

#primary-container-banner1{
    position: relative;
    display:none;
}

#primary-container-banner2{
    height: 100%;
    text-align: center;
    position: relative;
    display:none;
}

#disclaimer {
    text-align:center; 
	font-size: 8px;
	font-weight: 300;
	font: var(--font-family-default);
	font-style: normal;
	/*margin: 5px 0px 5px 0px;*/
	color: var(--clr-primary-a50);
	background-color: var(--clr-surface-tonal-a20);
}

#consent-banner {
    position: relative;
    padding: 3px;
    width: 100%;
    border-radius: 8px;
    background-color: rgba(0,0,0,0.85);
    color: #fff;
    font-size: calc(var(--font-size-base)*0.7);
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 9999;
    box-shadow: 0 -2px 6px rgba(0,0,0,0.3);
}
#consent-banner button {
    margin-left: 10px;
    padding: 6px 12px;
    border: none;
    border-radius: 4px;
}

#consent-banner button:first-of-type {
    background-color:var(--clr-surface-a50);
    color: white;
}

#consent-banner button:last-of-type {
    background-color:var(--clr-surface-a50);
    color: white;
}


/* MEDIA QUERIES*/
/* Show banner-ad1 for large screens (e.g., 1024px and above) */
@media (min-width: 800px){
    #primary-container-banner1 {
        display: block;
    }
    #primary-container-banner2{
        display: none;
    }
    #disclaimer {
        font-size:  calc(var(--font-size-base)*0.9);
    }
    #consent-banner {
        font-size:  calc(var(--font-size-base)*0.9);
    }
    #consent-banner button {
        font-size: calc(var(--font-size-base) * 0.90);
    }
}
/* Show banner-ad2 for medium screens (e.g., 768px to 1023px) */
@media (min-width: 565px) and (max-width: 800px) {
    #primary-container-banner1 {
        display: none;
    }
    #primary-container-banner2 {
        display: block;
    }
    #disclaimer {
    	font-size: calc(var(--font-size-base) * 0.70);
    }
    #consent-banner button {
        font-size: calc(var(--font-size-base) * 0.70);
    }
    
}
/* Hide both ads for small screens (below 768px) */
@media (max-width: 560px) {
    #primary-container-banner1, #primary-container-banner2 {
        display: none;
    }
    #disclaimer {
    	font-size: calc(var(--font-size-base) * 0.55);
    }
    #consent-banner{
    	font-size: calc(var(--font-size-base) * 0.80);
    }
      #consent-banner button {
        font-size: calc(var(--font-size-base) * 0.80);
    }
}
@media (max-width: 560px) {
    #primary-container-banner1, #primary-container-banner2 {
        display: none;
    }
    #disclaimer {
    	font-size: calc(var(--font-size-base) * 0.50);
    }
    #consent-banner{
    	font-size: calc(var(--font-size-base) * 0.70);
    }
      #consent-banner button {
        font-size: calc(var(--font-size-base) * 0.70);
    }
}