/*
header and menu background color: #2C3E50 blue with grey

*/
:root{
    --primary-bg: #2C3E50;
    --user-messages: #2C3E50;
    --font-color: #555555;
    --text-reading-color: #555555;
    --buttons-color: #0097A7;
    --text-bg: #F0FBFC;
    --primary-text-color: #F0FBFC;
    --infancy-bg: #8040BF;
    --accent-shiny: #BFA46F;
    /*for editing page*/
    --flag-color-good: lightgreen;
    --flag-color-bad: red;
    --flag-color-working: yellow;
    
}

@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat/Montserrat-VariableFont_wght.ttf');
}
@font-face {
    font-family: 'Cardo';
    src: url('../fonts/Cardo/Cardo-Regular.ttf');
}

html, body{
	scrollbar-width: thin;
}
body {
	overflow-y:scroll;
	overflow-x:hidden;
    margin: 0;
    padding: 0;
    font-family: Cardo;
    background-color: var(--text-bg);
}
#parentHeader{
    grid-template-rows: 1fr;
	display: grid;
	z-index: 1; /*This helps when getting 'fixed' opening the docReader object*/
	width: 100vw;
}
#menuBlock{
	
    color: white;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
	border-top: solid 1px var(--accent-shiny);;
	font-family: Montserrat;
	font-weight: normal;
	background-color: var(--primary-bg);
}
#menuButton{
	grid-column: 2;
    text-align: center;
	font-size: 2em;
	font-weight: bold;
	cursor: pointer;
	background-color: var(--primary-bg);
}
#menuButton:hover{
    background-color: var(--primary-bg);
   /* background-color: black; */
    cursor: pointer;
}
#menu{
	grid-column: 2;
    display: none;
    grid-template-columns: 1fr;
    grid-template-rows: 5vh 5vh 5vh 5vh;
	text-align: center;
	align-items: center;
}
.option{
	cursor:pointer;
	display: grid;
	padding: 1em;
	
}
.option:hover{
	background-color: cadetblue;
}
.option > a:active, .option >a {
	text-decoration: none;
	color: var(--text-bg); 
}
a, a:active{
   text-decoration: none; 
}
/* horizontal menu for large displays */
.option-hor{
	display:none;
	text-align: center;
	padding: 1em;
}
.option-hor a, .option-hor a:active{
	text-decoration: none;
	font-weight: lighter;
	color: var(--text-bg);;
}
.option-hor a:hover{
	color: var(--primary-bg);
}
.option-hor:hover{
	cursor: pointer;
	background-color: var(--accent-shiny);;
	color: var(--primary-bg);
}

/*Vertical menu */
.option-ver{
	text-align: center;
	padding: 1em;
}
.option-ver a, .option-ver a:active{
	text-decoration: none;
	font-weight: lighter;
	color: var(--text-bg);
}
.option-ver a:hover{
	color: var(--primary-bg);
}
.option-ver:hover{
	cursor: pointer;
	background-color: var(--accent-shiny);
	color: var(--primary-bg);
}
/*ends vertical menu*/

.action{
	background-color: var(--accent-shiny);
	color: var(--primary-bg);
	text-align: center;
	padding: 1em;
}
.action:hover{
	background-color: var(--primary-bg);
	color: var(--text-bg);
	cursor: pointer;
}
.action-button{
    font-family: Montserrat;
    font-weight: normal;
    
	cursor: pointer;
    background-color: var(--buttons-color);
    height: 10vh;
   /* width: 46vw;*/
    color: white;
    font-size: 1em;
    border: none;
    display: grid;
    align-items: center;
}
.actionButton{
	background-color: var(--accent-shiny);
    width: 50vw;
    height: 10vw;
    color: white;
    cursor: pointer;
    font-weight: bold;
    border-radius: 20px;
    letter-spacing: 3px;
	border-color: darkslateblue;
}
.actionButton > .arrow{
	font-weight: bold;
	font-size: 1em;
	grid-column:3;
}

/*common colors*/
.background-second-color{
    background-color: darkslateblue;
}
.background-third-color{
    background-color: cadetblue;
}

#signUpWidget{
}
.signUpWidgetOff{
	display:none;
}
.signUpWidgetOn{
	display:grid;
}
.widget{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    border: solid var(--accent-shiny); 16px;
    box-shadow: 0px 0px 70px darkslateblue;
    text-align: center;
    /* width: 90vw; */
    overflow: hidden;
    grid-column: 1 / 3;
    position: fixed;
    z-index: 1;
    background-color: white;
    left: 10vw;
    right: 10vw;
    top: 20vh;
    height: 50vh;
    padding: 30px;
    align-items: center
	
}
.widget:hover{
    cursor: pointer;
}

.footer{
    background-color: var(--primary-bg);
    color: white;
    text-align: center;
    height: 22vh;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: 1fr 1fr;
    align-items: center;
    position: relative;
    z-index:0;
}
.footer-more-info{
	grid-row: 1;
	display: grid;
	cursor: pointer;
	margin: 0;
	padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 0px;
	padding-right: 0px;
	border-bottom: solid 1px var(--accent-shiny);;
	
}
.footer-more-info:hover{
	background-color: var(--accent-shiny);;
}
.footer-end{
    display:grid;
    grid-column: 1/4;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    height: 8vh;
    background-color:var(--primary-bg);;
}
.footer-end > a{
    grid-column: 2;
    align-self: center;
}
#footerLogo{
	max-height : 5vh;
}
.rights{
	grid-column: 3/5;
	align-self: center;
	text-align: left;
	font-size: 0.7em;
}


/* docs content (privacy, cookies condition)*/
#docReader{
	display: none;
	width: 100vw;
	top: 25vh;
	grid-template-columns: 5vw 90vw 5vw;
	grid-template-rows: 1fr 90vh;
	z-index: 2;
	position: absolute;
	background-color: transparent;
	color: var(--primary-text-color);
}
#docContent{
	background-color: var(--primary-bg);
    color: var(--primary-text-color);
    box-shadow: 0px 6px 24px black;
    display: grid;
    grid-column: 2;
    padding: 32px;
	grid-template-rows: 10vh 1fr;
    grid-template-columns: 1fr 1fr 1fr;
	
}
#docButtons{
	display: grid;
    grid-column: 3;
    grid-row: 1;
    grid-template-columns: 1fr;
    align-content: center;
    text-align: center;
    gap: 10px;
}
.docButton{
	background-color: var(--buttons-color);
    border-radius: 10px;
    cursor: pointer;
    display: grid;
    color: var(--font-color);
    font-weight: bold;
	padding: 10px;
}
#docPrivacy, #docCookies, #docTerms{
	grid-row: 2;
    grid-column: 1 / 4;
	display:none;
}

/*blurring*/
.blur-near{
	filter: blur(0px);
}
.blur-far{
	filter: saturate(0);
}

/* ends docs content (privacy, cookies conditions)*/

/*starts user user-messages from the server*/
#userMessages{
    position:absolute;
    top: 20vh;
    width: 100vw;
    min-height: 15vh;
    z-index: 3;
    background-color: var(--text-bg);
    color: var(--font-color);
    padding: 20px;
    text-align: center;
    cursor: pointer;
    opacity: 0.5;
}
.user-message-text{
    font-size: 2em;
}
#userMessages:hover{
    cursor: pointer;
}

/*starts user user-messages from the server*/

/******* media querys *******/
@media (min-width: 600px) and (max-width: 1024px) {
    
    .footer{
        height: 10vh;
    }
    
	.rights{
	    font-size: 1em;
	}
	#footerLogo{
	max-height : 6vh;
    }
    
}
/* Media query for desktop screens */
@media (min-width: 1024px) {

	.header > h1
	{
		font-size: 4em;
		letter-spacing: 18px;
	}

	#menuBlock{
		grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
	}
	#menuButton{
		display: none;
	}
	.option-hor{
		display:grid;
		padding: 1em;
	}
	.widget{
	    left: 30vw;
	    right: 30vw;
	}

	.actionButton{
		width: 12vw;
		height: 10vh;
		height: 10vh;
		letter-spacing: 4px;
		/* font-size: 1em; */
	}
	
	#docReader{
		display: none;
		width: 100vw;
		top: 25vh;
		grid-template-columns: 15vw 70vw 15vw;
		grid-template-rows: 1fr 90vh;
	    color: var(--primary-text-color);
		/*background-color: rgba(0, 0, 0, 0.2);*/
		z-index: 2;
		position: absolute;
	}
	.rights{
	    font-size: 1em;
	}
	#footerLogo{
	max-height : 8vh;
    }

}

@media (min-width: 1600px) {
 body{
  font-size:1.2em;
 }
}
@media (min-width: 2048px) {
 body{
  font-size:1.5em;
 }
}

@media (min-width: 2560px) {
 body{
  font-size:2em;
 }
}