:root{
    --color-main:#a659ee;
    --color-main-contrast:#8747D8;
    --color-main-alt:#6613b5;
    --color-text-dark:#000;
    --color-text-light:#fff;
    --color-text-dark-alt:#140324;
    --color-text-dark-link:#6613b5;

	--color-button-text:#fff;
	--color-button-border:#C688FF;
	--color-button-outline:#3D1C66;
    --button-background:linear-gradient(180deg, var(--color-main) 50%, var(--color-main-contrast) 50%);

	--color-button-g-text:#fff;
	--color-button-g-border:#9FFF88;
	--color-button-g-outline:#30661C;
    --button-g-background:linear-gradient(0deg, #59ad39 50%, #5FBE47 50%);
	
	--color-button-b-text:#fff;
	--color-button-b-border:#99CFFF;
	--color-button-b-outline:#1F4359;
    --button-b-background:linear-gradient(0deg, #4397CC 50%, #53A6EF 50%);

    --color-body-background:#212529;
    --color-body-background-alt:#000;
    --color-box-background:#fff;
    --color-box-border:var(--color-main-alt);

	--common-border-radius:6px;
	--common-border-radius-sm:4px;
    --header-background:linear-gradient(180deg, var(--color-main) 50%, var(--color-main-contrast) 50%);
	--background-zigzag:linear-gradient(135deg, #f5c23e 25%, transparent 25%), linear-gradient(225deg, #f5c23e 25%, transparent 25%), linear-gradient(45deg, #f5c23e 25%, transparent 25%), linear-gradient(315deg, #f5c23e 25%, #f5dd9f 25%);
}

button{
	color:white;
	border:2px solid var(--color-button-border);
	outline:2px solid var(--color-button-outline);
	background-image:var(--button-background);
	border-radius:var(--common-border-radius-sm);
	font-family:Ticuto, Arial, sans-serif;
	margin:0 5px;
}

button:hover{
    outline:2px solid var(--color-body-background-alt);
}

.button-green{
	color:white;
    text-shadow:0 2px var(--color-button-g-outline);
	border:2px solid var(--color-button-g-border);
	outline:2px solid var(--color-button-g-outline);
	background-image:var(--button-g-background);
	border-radius:var(--common-border-radius-sm);
	font-family:Ticuto, Arial, sans-serif;
}

.button-blue{
	color:white;
    text-shadow:0 2px var(--color-button-b-outline);
	border:2px solid var(--color-button-b-border);
	outline:2px solid var(--color-button-b-outline);
	background-image:var(--button-b-background);
	border-radius:var(--common-border-radius-sm);
	font-family:Ticuto, Arial, sans-serif;
}

.button-sm{ padding:3px 6px; font-size:0.795rem; }
.button-m { padding:5px 9px; font-size:0.98rem; }
.button-l { padding:5px 9px; font-size:1.075rem; }
.button-dynamic { width:80%; padding:1.5vh 9px; font-size:1.25rem; }



/* MOBILE ORIENTATION */
@media screen and (orientation:portrait) {
    #pageBacktoTitle, #pageMusicToggle, #pageMotionToggle, #pageFullscreenToggle{
        width:calc(25px + 1.4vh);
        height:calc(25px + 1.4vh);
        bottom:calc(64px + 1vh);
    }
    #pageMusicToggle{ right:calc(3px + 0.5vh); }
    #pageBacktoTitle{ right:calc(34px + 2.9vh);bottom:24%!important }
    #pageMotionToggle{ right:calc(34px + 2.9vh); }
    #pageFullscreenToggle{ right:calc(64px + 5.3vh); }
    #pageBacktoTitleTxt{
        padding:15px 20px;
        bottom:calc(32px + 2.4vh);
        right:calc(45px + 2.7vh);
    }
    #titleButtonsMain{
        margin-top:20vh;
        padding:1vw;
        display:flex;
    }
    .title-button{width:clamp(180px, 80vw, 860px);margin-bottom:calc(10px + 3vh);padding:10px;}
    .title-logo{
        width:100%;
        height:clamp(160px, 17.5vh, 600px);
        background-size:clamp(305px, 88vw, 600px);
        top:2.05vh;
        margin-bottom:4vh;
    }
    .grid-padding{ width:100%;height:12.5vh; }
}

/* DESKTOP AND MAYBE TABLET ORIENTATION */
@media screen and (orientation:landscape) {
    #pageBacktoTitle, #pageMusicToggle, #pageMotionToggle, #pageFullscreenToggle{
        width:calc(24px + 1vw);
        height:calc(24px + 1vw);
        bottom:calc(1.25vh + 15px);
    }
    #pageMusicToggle{right:15px;}
    #pageBacktoTitle{right:calc(1vw + 49px);}
    #pageMotionToggle{right:calc(1vw + 49px);}
    #pageFullscreenToggle{right:calc(2vw + 83px);}
    #pageBacktoTitleTxt{ right:calc(1vw); }
    #titleButtonsMain{
        margin-top:clamp(80px, 24%, 22vh);
        padding:1vw;
        display:flex;
    }
    .title-button{width:clamp(120px, 42vw, 860px);margin-bottom:calc(10px + 1.95vh);padding:6px;}
    .title-logo{
        width:100%;
        height:clamp(130px, 15vh, 512px);
        background-size:clamp(345px, 30vw, 512px);
        top:2.05vh;
    }
    .grid-padding{ display:none; }
}

img { pointer-events: none; }

/* IDs */
#pageBacktoTitle, #pageMusicToggle, #pageMotionToggle, #pageFullscreenToggle{
    border-radius:50%;
    border:2px black solid;
    text-align: center;
    margin:auto;
    position:absolute;
    background-size:62.5%;
    background-position: center;
    background-repeat: no-repeat;
    background-color: white;
    user-select: none;
    z-index:15;

}
#pageMusicToggle{ background-image: url('../img/core/ui/music_icon.png'); }
#pageBacktoTitle{  background-image: url('../img/core/ui/back.png');z-index:51!important; }
#pageMotionToggle{  background-image: url('../img/core/ui/motion.png'); }
#pageFullscreenToggle{  background-image: url('../img/core/ui/fullscreen.png');}


/* Button Image Icons and element specs */
#iconGames{ background-image: url('../img/button_icons/games.png'); }
#iconChallenge{ background-image: url('../img/button_icons/challenge.png'); }
#iconDays{ background-image: url('../img/button_icons/date.png'); }
#iconStats{ background-image: url('../img/button_icons/stats.png'); }
#iconNG{ background-image: url('../img/button_icons/ng.png'); }
.icon-back{ background-image: url('../img/button_icons/back.png'); }

#titleButtonsMainContent, #titleButtonsMain{
    width:clamp(200px, 960px, 90%);
    min-height:50%;
    justify-content: center;
}

#titleButtonsMainContent{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    flex-wrap: wrap;
    }

.title-button, .medium-button, .back-button{
    font-size:clamp(1em, 1.1vw, 15pt);
    font-weight:500;
    text-transform: uppercase;
    background:black;
    color:white;
    border:2px solid #ffffff;
    border-radius:5px;
    max-width:calc(100% - 8vw);
    user-select: none;
    display:flex;
    justify-content: space-between;
    align-items: center;
    align-content: center;
    flex-direction: row;
    flex-wrap: nowrap;
}
.medium-button, .back-button{ width:clamp(100px, 30vw, 560px);line-height:1.05;display:inline;margin-bottom:calc(6px + 1vh);padding:4px;}
.back-button{width:clamp(85px, 12vw, 400px);margin-bottom:calc(12px + 0.5vh);padding:3px;}

.hover-button:hover, .hover-button-primary:hover{
    margin-left:calc(10px + 1.5vh);
    margin-right:calc(-10px - 1.5vh);
    box-shadow: 10px 8px 0 #fffb;
    transition:400ms;
    background-size:4px;
}
.hover-button, .hover-button-primary{ box-shadow: 10px 8px 0 #fff7;transition:400ms; }
.hover-button-primary:hover{ background-color:#0fad7e }
.hover-button:hover{ background-color:#777 }
.title-button-icon{ opacity:0;height:clamp(1.15em,16pt,16pt);width:clamp(1.15em,16pt,16pt);transition:500ms } /* Initial Value */
.title-button-key, .title-button-text, .title-button-icon{
    font-weight:600;
    font-size:clamp(1.1em, 15%, 16pt);
    line-height:1.05;
    display:inline;
}
.title-button-icon, .icon-back {
    background-size:clamp(28px, 20%, 16pt);
    height:28px;
    width:28px;
    background-position: center;
}

.title-logo{
    background-position:center top;
    background-repeat: no-repeat;
    margin:auto;
}