main.css

/* custom fonts */
@font-face {
  font-family: 'code';
  src: url(./source/fonts/code.ttf);
}
@font-face {
  font-family: 'texto';
  src: url(./source/fonts/talk.otf);
}
@font-face {
  font-family: 'digits';
  src: url(./source/fonts/digits.ttf);
}


body {
background-color: rgb(255,255,255);
#screen_contain_vertical { /* first box */

    transition: background-color 10s;

	position:fixed;
	top:2vmax;
	right:2vmax;
	bottom:2vmax;
	left:2vmax;


#screen_contain_horizontal { /* second box */
	/*background-color: rgb(255,0,0); to debug*/

	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);

#screen_contain { /* third box */

	opacity: 0;
    transition: opacity 10s;

	background-color: rgb(255,255,255);
	display: inline-block;
	font-size: 0;
	

	header {
		justify-content: center;
		text-align: center;

		white-space: nowrap;


		position:fixed;
		top: 0%;
		left: 50%;
		transform: translate(-50%, -100%);

		#soluces {

			color: #555555;
			font-family: 'code';

			font-size: 2.5vmax;
			line-height: 2.5vmax;
		}

		#title {
			position:absolute;
			top: -20vmax;
			left: 50%;
			transform: translate(-50%, 0%);
			
			color: #555555;
			font-family: 'texto';

			font-size: 10vmax;
			line-height: 0vmax;
		}

		#subtitle {
			position:absolute;
			top: -5vmax;
			left: 50%;
			transform: translate(-50%, 0%);
			
			color: #555555;
			font-family: 'texto';

			font-size: 2vmax;
			line-height: 1vmax;
		}
	}

	
	/* generals for item */
	section {
		line-height: 0;
		display: inline-block;
		
		background-color: rgb(13,17,23);
		
		section {
			font-size: 5vmax;
			padding: 0;
			/*padding: 3vmax 3vw 3vmax 3vw;*/
			
			display: flex;
			justify-content: center;
		}
	}

  	font-family: 'code';
	/* specific by items */
	#answer {
		color: rgb(0,0,255);
	}
	
	#question_left {
		color: rgb(255,255,255);
	}
	#question_right {
		color: rgb(255,255,255);

	}

	/* generals for item */
	footer {

		/* bar */
		#shape_bars {
			font-family: 'code';
			font-size: 5vmax;

			/*display: inline-block;*/

			.bar_shape {
				background-color: #ffffff;
				width: 18vmax;
				height: 1vmax;
			}
			.bar_text {
				color: #999999;
			}

			#bar_left {
				/*margin-left: 0;
				margin-right: auto;*/
				position: absolute;
				left: 0;
				text-align: left;

				.bar_shape {
					position: absolute;
					left: 0;
					top: 0vmax;
				}
				.bar_text {
					position: absolute;
					left: 0;
					top: -5vmax;/* slided */
				}

			}

			#bar_right {
				/*margin-left: auto; 
				margin-right: 0;*/
				position: absolute;
				right: 0;
				text-align: right;

				.bar_shape {
					position: absolute;
					right: 0;
					top: 11vmax;/* slided */
				}
				.bar_text {
					position: absolute;
					right: 0;
					top: 0vmax;
				}
			}
		}
	}

	/* buttons */
	/*
	#buttons {
		
		color: rgb(0,0,255);
		
		
		font-size: 5vmax;
		
		position:fixed;
		bottom: 30px;

		justify-content: center;
		text-align: center;


		input {
			padding: 0;
		}
	}
	*/
}
}


nav {
	opacity: 0;
    transition: opacity 10s;

	color: #0000ff;

	position:absolute;
	top: 0%;
	left: 0;
	
	/*top: 50%;
	transform: translate(0%, -50%);*/
	

	padding-left: 5vmax;
	
	font-family: 'code';
	font-size: 2vmax;
	#side_timer {
		font-family: 'digits';
		font-size: 5vmax;
	}
	.can {
		font-family: 'texto';
		font-size: 1vmax;
	}
	#option_soluces {
		font-size: 2vmax;
		color:#bbb;
	}
}

aside {
	position: absolute;
	right:1vmax;
	bottom:-2.8vmax;
	text-align: right;
	
	font-family: 'code';


	#msg_cat {
		font-size:1vmax;
		/*font-size:1vmax;*/
		color:rgb(255,255,255);

	}
	#msg_the {
		font-size:1vmax;
		color: rgb(13,17,23);
	}

}
}
}



/* -- colorations -- */
/* used for cat */
/* you can edit them if you want */

b {
	font-weight: normal;
}
/* primary */
.red {
	color: #f00;
}
.green {
	color: #0f0;
}
.blue {
	color: #00f;
}

/* secondary */
.yellow {
	color: #ff0;
}
.cyan {
	color: #0ff;
}
.magenta {
	color: #f0f;
}

/* black and white */
.white {
	color: #fff;
}
.gray {
	color: #888;
}
.black {
	color: #000;
}

.dark {
	filter: brightness(50%);
}
.darker {
	filter: brightness(25%);
}
.light {
	filter: brightness(150%);
}
.lighter {
	filter: brightness(175%);
}

/* special */
.bold {
	font-weight:bold;
}
.bolder {
	font-weight:bolder;
}
.neg {
	mix-blend-mode: difference;
}