/* DINPro */
@font-face {
	font-family: 'DINPro-Regular';
	src: url("../fonts/DINPro/DINPro-Regular.ttf") format("truetype");
	font-style: normal;
	font-display: swap;
}

/* Exo 2 */
@font-face {
	font-family: 'Exo2';
	src: 	url("../fonts/Exo2/Exo2-VariableFont_wght.ttf") format("truetype supports variations"),
			url("../fonts/Exo2/Exo2-VariableFont_wght.ttf") format("truetype-variations");
	/* src: url("../fonts/Exo2/Exo2-Italic-VariableFont_wght.ttf") format("truetype-variations"); */
	font-weight: 100 600;
}

:root{
	--main-color: 255,165,0;
}

body{
	margin: 0;
	font-family: 'Exo2';
	font-size: 16px;
	font-weight: 300;
}

.page{
	display: table;
	width: 100%;
	height: 640px;
	background-image: linear-gradient(to right, rgba(20,20,20,0.9), rgba(20,20,20,0.9)), url(../images/backgrounds/polished_metal_2.jpg);
	background-repeat: repeat, repeat;
	background-size: 600%;
}

.page > div{
	display: flex;
	min-height: 100vh;
	overflow: hidden;
	flex-direction: column;
	align-items: center;
	gap: 40px;
}



/* Preloader */
#preloader{
	display: flex; 
	align-items: center; 
	justify-content: center; 
	position: fixed; 
	top: 0; 
	left: 0; 
	width: 100%; 
	height: 100%; 
	background-color: rgb(40,40,40);
	z-index: 100;
}
#preloader > img{
	width: 100px;
}




/* ------------- DEFAULT STYLES ------------- */
/* Main */
.main{
	display: grid;
	margin-top: 85px;
	padding: 0 5px;
	gap: 40px;
}



/* Elements */
/* Global */
.def-elements select, .def-elements input, .def-elements button{
	padding: 0;
	font-family: 'Exo2';
	font-size: 18px;
}
.def-elements select, .def-elements button{
	height: 28px;
}
/* Set cursor pointer */
.def-elements select, 
.def-elements button, 
.def-elements input[type="radio"], 
.def-elements input[type="checkbox"], 
.def-elements input[type="file"], 
.def-elements label[for]{
	cursor: pointer;
}

/* Input */
.def-elements input:not([type="file"]){
	background: #fafafa;
	border: 1px solid #ccc;
	border-radius: 2px;
	color: #000;
}
.def-elements input[type="text"], .def-elements input[type="number"]{
	height: 26px;
	text-align: center;
}
.def-elements input[type="checkbox"], .def-elements input[type="radio"]{
	width: 18px;
}

/* Select */
.def-elements select{
	background: #fafafa;
	border: 1px solid #ccc;
	border-radius: 2px;
	text-align: center;
	color: #000;
}


/* Default Table */
.def-table{
	width: 100%;
}
.def-table > table{
	width: 100%;
	border-collapse: collapse;
}
.def-table > table td, .def-table > table th{
	padding: 8px 8px;
	background-color: rgb(40,40,40);
	text-align: center;
	color: white;
}
/* Head */
.def-table thead th{
	background-color: rgb(10,10,10);
}
.def-table thead > tr:first-child > th{
	border-bottom: 1px solid white;
}
.def-table thead > tr:last-child > th{
	border-bottom: 3px solid white;
}
/* Body */
.def-table tbody > tr:nth-child(2n) td{
	background-color: rgb(60,60,60);
}
.def-table img{
	width: 18px;
}
/* Table hover */
.def-table tbody > tr:hover > td{
	background-color: rgb(var(--main-color));
	color: black;
}



/* MEDIA */
/* > 900px */
@media (min-width: 900px) {
    /* Main */
	.main{
		padding: 0 20px;
        margin-top: 105px;
	}



	/* Def Elements */
	/* Global */
	.def-elements select, .def-elements input:not([type="file"]), .def-elements button{
		height: 34px;
	}
	.def-elements select, .def-elements button{
		font-size: 20px;
	}
	/* Button */
	.def-elements button{
		font-size: 18px;
	}
	/* Input */
	.def-elements input[type="text"], .def-elements input[type="number"]{
		height: 32px;
	}
}