/**
* CSS File for Coder application
* 
* @version 0.0.3
* 
* @since 0.0.3 2025-03-08 moved all color props to colors.css
* @since 0.0.2 2024-12-27 added sleep/active attributes
* @since 0.0.1 2024-03-07 cleaned copy from tatchi css
* 
* @author Hans Druyts <hans.druyts@custom8.be>
*/

/*@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@300;400;500&display=swap');*/
@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@300;400;500&family=Roboto:wght@300;400;500&display=swap');

:root{ 
    /* variables used in different elements */

    --view-h-min: 1024;  /* min height */
    --view-h-max: 3840; /* max height */

    --view-w-min: 320;
    --view-w-max: 1920;

    --font-min: 14;     /* font size at min height (28)*/
    --font-max: 36;     /* font size at max height (72) */

    --size-mult: calc(1px + (4 - 1) * (100vw - var(--view-w-min)*1px)) / (var(--view-w-max) - var(--view-w-min));
    --size-mult-low: calc(1px + (2 - 1) * (100vw - var(--view-w-min)*1px)) / (var(--view-w-max) - var(--view-w-min));
    
    --font-size: calc( var(--font-min)*1px + (var(--font-max) - var(--font-min)) * ((100vh - var(--view-h-min)*1px) / (var(--view-h-max) - var(--view-h-min))) );

    --height-header: 6vh;                                                         /* header is 8% of total viewport height */
    --height-footer: 5vh;                                                         /* footer is 6% of total viewport height */

    /*--margin-logo: 10vw;*/
    --margin-logo: 0.5rem;
    --height-logo: calc(var(--height-header) - 2*var(--margin-logo));
    --width-logo: calc(var(--height-logo) * 205/50);                               /* LOGO_custom8: 665x589 // svg: 205x50*/
    
    /*--margin-settings: 3vw;*/
    --margin-settings: 0.4rem;
    /*--height-settings: calc(var(--height-footer) - var(--margin-settings));*/
    --height-settings: calc(var(--height-footer) - var(--margin-settings));

    --height-main: calc(100vh - (var(--height-header) + var(--height-footer)));   /* calculated portion main (viewport - header & footer) */
    --height-main-xl: calc((100vh - var(--height-header)));                       /* calculated portion main (no footer) */

}

/* GENERAL PAGE SETTINGS */
html, body {
	height: 100%;
	font-size: var(--font-size);
    font-family: 'Roboto Slab', serif;
    /*font-family: 'Roboto', serif;*/
    font-weight: 400;
}

/* SPECIFIC FONT WEIGHTS & SIZES */
h1 {
    font-family: 'Roboto Slab', serif;
    font-weight: 500;
    font-size: 3rem;
}
h2 {
    font-family: 'Roboto Slab', serif;
    font-weight: 500;
    font-size: 2rem;
}
h3 {
    font-weight: 400;
    font-size: 1.5rem;
}
h3.center {
    text-align: center;
}

p.settings{
    font-weight: 300;
    font-size: 0.8rem;
}



/* PAGE SETUP - GENERAL DIVISIONS */

/* header (with LOGO) */
#header {
    height: -webkit-calc(var(--height-header));
    height: -moz-calc(var(--height-header));
    height: var(--height-header);
    padding-top: calc(var(--margin-logo)/2);
}

/* main part, BETWEEN header and footer */
#main {
    height: -webkit-calc(var(--height-main));
    height: -moz-calc(var(--height-main));
    height: var(--height-main);
    /*width: 100%;*/
    
    margin-right: var(--margin-logo);
    margin-left: var(--margin-logo);
}

/* main part extended : BELOW header BUT NO FOOTER */
#main.no-footer {
    height: -webkit-calc(var(--height-main-xl));
    height: -moz-calc(var(--height-main-xl));
    height: var(--height-main-xl);  
}

/* footer (with settings wheel) */
#footer {
    height: -webkit-calc(var(--height-footer));
    height: -moz-calc(var(--height-footer));
    height: var(--height-footer);
}

/* background image */
#main_sliders {
    background-image: url('../img/scene/side.svg');
    background-position: center top;
    background-repeat: no-repeat;
    background-size: var(--width-bckgrnd); 
}

/* Special divisions */

.demo{
    font-size:1rem;
    position: fixed;
    top: 5px;
    left: 60px;
}

.timing{
    font-size:1rem;
    position: fixed;
    top: 5px;
    left: 10px;
}

.debug{
    font-size:1rem;
    position: fixed;
    top: 25px;
    left: 10px;
    display: none;
}

div.card-body.hide { 
    display: none; 
}

div.card-body.show{
    display: block;
}

/* Tatchi specials */

.wrapper {
    position: relative;

}

/* Status window */
#status {
    justify-content: space-between;
    display: flex;
    /*margin-top: 1.5rem;*/
    /*margin-bottom: 1rem;*/
}
.wrapper.status {
    padding-top: 1.5rem;
    padding-bottom: 1rem;
}
.subtitle {
    position: absolute;
    left: 0;
    bottom: -0.75rem;
}

.content {
    /*margin-top: 0.5rem;
    margin-bottom: 0.5rem;*/
    padding-top: 0.4rem;

}


.anim {
    position: relative;
}
.anim img {
    position: absolute;
    z-index: 1; 
    visibility: hidden;
    left: 50%;
    transform: translate(-50%);
    max-height: 100%;
}
.anim img.active { 
    z-index: 3; 
    visibility: visible;
}

.graph {
    height: 56vh;
	width: 100%; /*8vh;*/
}


.action{
    margin-top: 1.5rem;
    text-align: center;
}



/* HTML OBJECTS (buttons etc) */
/*
.btn {

    cursor: pointer;
    outline: none; 

    --pad-top: calc(3 * var(--size-mult));
    --pad-side: calc(5 * var(--size-mult));
    --btn-border: calc(1 * var(--size-mult));
    --btn-radius: 6px;

    padding: var(--pad-top) var(--pad-side);
    font-size: 1rem;
    border: var(--btn-border) solid;
    border-radius: var(--btn-radius);
}

.btn-primary {
    font-weight: 500;
    padding: 0.5rem 1.5rem;
}
*/

button.logo {

    height: -webkit-calc(var(--height-logo));
    height: -moz-calc(var(--height-logo));
    height: var(--height-logo);
    width: var(--width-logo);

    outline: none; 
    border: 0;

    background-image: url('../img/btn/logo_sleepcoder.png');
    background-size: contain;
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-color: transparent;

    display: block;
    margin-left: auto;
    margin-right: var(--margin-logo);

}

button.settings{
    
    height: -webkit-calc(var(--height-settings));
    height: -moz-calc(var(--height-settings));
    height: var(--height-settings);
    width: var(--height-settings);

    outline: none; 
    border: 0;

    background-image: url('../img/btn/settings_orange.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-color: transparent;

    display: block;
    margin-left: auto;
    margin-right: var(--margin-settings);

}

button.exit{

	display: block;

	/*padding-top: 1rem;*/

	margin-left: auto;
	margin-right: var(--margin-settings);

}

.button.config {
    /*display: block;
    margin-right: auto;*/
    margin-left: var(--margin-settings);
    /*display: none;*/
    height: calc(var(--height-footer)*0.8);
    object-fit: contain;
}

.button.next {
    /*display: block;*/
    /*margin-left: auto;*/
    margin-right: var(--margin-settings);
    display: none;
}