/**
 *LESS variables
 */

@base_color: dodgerblue;
@secondary_color: white;
@box_shadow: 0 3px 3px -3px black;
@color_one: #8F008F;
@color_two: #005052;
@color_three: #FFFF14;
@font: Ubuntu;

/**
 *LESS mix-ins
 */

.gradient(@orient){
	background: linear-gradient(cyan, transparent),	linear-gradient(-@orient, magenta, transparent), linear-gradient(@orient, yellow, transparent);
	background-blend-mode: multiply;
}
.block_element(@w, @h, @pos){
	position:@pos;
	width:@w;
	height: @h;
	left:(100-@w)/2;
	right:(100-@w)/2;
}
.flex_disp(@disp) {
	display: inline-flex;
	flex-flow:@disp;
	flex-direction: @disp;
}
.list_item(@w, @h, @bg){
	position:relative;
	margin-left:2%;
	width:@w;
	height:@h;
	background:@bg;
	list-style-type: none;
}
.text_block(@pad){
	padding-top:@pad;
	padding-bottom:@pad;
	text-align: center;
	font-weight:700;
}
.column_disp(@cols){
	columns:@cols;
		-webkit-columns:@cols;
		-moz-columns:@cols;
	column-width:(98%/@cols);
		-webkit-column-width:(98%/@cols);
		-moz-column-width:(98%/@cols);
	column-gap:1.5%;
		-webkit-column-gap:1.5%;
		-moz-column-gap:1.5%;	
}
.cool_button(@bg, @fg){
	background: @bg;
	color:@fg;
	border:none;
	padding:0.8rem;
	font-family: @font;
	font-weight:780;
	font-size:18px;
	cursor:pointer;
	border-bottom:3px solid white;
	&:focus {
		outline:0;		
	}
}
.circular(@w, @h, @bg){
	position:absolute;
	width:@w;
	height:@h;
	border-radius: 50%;
	background: @bg;
	border:2px transparent;
	top:(100-@h)/2;
	bottom:(100-@h)/2;
	right:(100-@w)/2;
	left:(100-@w)/2;
}
.alignment(@pos){
	justify-content: @pos;
	align-items: @pos;
	align-content: @pos;
}
.trans_effect (@speed, @effect, @delay){
	transition: @speed @effect @delay;
		-webkit-transition: @speed @effect @delay;
		-moz-transition: @speed @effect @delay;
		-ms-transition: @speed @effect @delay;
}
.color_transition(@color_a, @color_b, @scale){
	color: @color_b;
	background:@color_a;
	transform:scale(@scale);
}

/**
 *Document body
 */

body {
	padding:0;
	margin:0;
	display:flex;
	flex-direction:column;
	flex-flow: column;
	flex-wrap: nowrap;
	font-size:16px;
	font-weight:650;
	&::-webkit-scrollbar {
		border-radius:4px;
		width:9px;
		background-color: #F5F5F5;
		box-shadow: inset 1px black;
	}
	&::-webkit-scrollbar-track {
		background-color: rgba(255,255,255,.1);
		border-radius:4px;
	}
	&::-webkit-scrollbar-thumb {
		background:black;
		border-radius:4px;
	}
}
.top-container {
	.block_element(100%, 80vh, relative);
	left:0;
	right:0;
	.gradient(45deg);
}
.top-container-nav {
	.block_element(80%, auto, relative);
	padding-bottom: 0.6rem;
	padding-top: 0.6rem;
	border-bottom: 4px solid white;
	font-weight:800;
	font-size:20px;
	.flex_disp(row);
	.alignment(center);
}
.top-container-nav-a {
	color:white;
	text-decoration: none;
	margin-left:0.6rem;
	margin-right:0.6rem;
}
.list-container-row {
	.flex_disp(row);
	height:auto;
	.alignment(center);
}
.container-title {
	.text_block(0.9rem);
}
.list-container-col {
	.flex_disp(column);
}
.list-container-item {
	.list_item(28%, 40vh, @color_one);
	box-shadow: @box_shadow;
	color:white;
	margin-top:1.2rem;
	margin-bottom:1.2rem;
	.flex_disp(column);
	justify-content: center;
	align-items: center;
	align-content: center;
}
.item-btn {
	.cool_button(@color_one, white);
}
.list-column {
	.column_disp(3);
}
.container-footer {
	.block_element(100%, auto, relative);
	background:@color_two;
	margin-top:1.2rem;
	color:white;
	bottom:0;
}
.title-underline {
	margin-bottom: 1%;
	border-bottom: 2px solid black;
}
.doc-body {
	margin-left:20%;
	margin-right:20%;
	height:auto;
}
.doc-text {
	text-align:justify;
	line-height:150%;
	font-size:110%;
	margin-bottom:5%;
}
@url: "/css/";
@font: "Ubuntu";

.container(@size) {
    font-size: @size;
}

h1 {
    .container(12px);
}
