:root {
	--page-size: 80%;
	--footer-size: 50px;
	--block-padding: 10px 20px;
	--block-border-radius: 10px;
}

h1, h2, h3, h4, h5, h6, .title {
	font-family: "Ford Antenna", Arial, sans-serif;
}

h1 {
	font-size: 32px
}

h2 {
	font-size: 24px
}

h3 {
	font-size: 16px
}

a {
	color: skyblue;
	cursor: pointer;
	text-decoration: none;
	&:hover {
		color: #eee;
	}
	&:visited {
		color: #eee;
	}
}

div.hr {
	height: 32px;
}

table {
	width: 100%;

	thead {
		background-color: rgb(85, 87, 83);
	}

	th, td {
		border: 1px solid rgb(85, 87, 83);
		padding: 5px;
	}
	th {
		width : 25%;
	}
}

html {
	width: 100%;
	height: 100%;
}

body {
	background-color: #2e3436;
	color: #eee;
	width: 100%;
	min-height: 100%;
	position: relative;

	.container {
		padding: var(--block-padding);
		background-color: #272c2d;
	}

	.header {
		.container {
			border-radius: 0 0 var(--block-border-radius) var(--block-border-radius);
			position: relative;
			& > p {
				margin: 0;
				padding: 0;
			}
		}
		.site_title {
			font-family: "Ford Script", cursive;
			font-size: 32px;
			a:hover, a:visited, a:focus {
				color: #eee;
				text-decoration: none;
			}
		}

		.site_desc {
			position: absolute;
			top: 20px;
			right: 3mm;
		}

		/*BreadCrums*/
		.B_crumbBox {
			position: absolute;
			top: 0;
			right: 0;

			li {
				display: inline;
				a {
					color: #e9b96e;
					font-size: 15px;
				}
			}
		}
		/**/
	}

	.title {
		.container {
			border-radius: var(--block-border-radius);
			h1 {
				text-align: center;
				margin: 0;
			}
		}
	}

	.content {
		.container {
			border-radius: var(--block-border-radius);
		}

		/*TAGS'n'SOURCES*/
		.tags a {
			background-color: rgba(255, 255, 255, 0.2);
			border-radius: 8px;
			padding: 3px 5px;
			margin: 0 3px;
		}

		.sources a {
			background-color: rgba(255, 255, 255, 0.2);
			border-radius: 8px;
			padding: 3px 5px;
			margin: 0 3px;
		}

		.tags, .sources {
			margin: 0;
		}
		/**/
		
		/**/
		.article_list ul {
			list-style-type: katakana;
			padding-left: 30px;
			a {
				font-size: 12pt;
			}
		}
		/**/
	}

	.footer_reserved_place {
		height: var(--footer-size);
	}

	.footer {
		bottom: 0;
		height: var(--footer-size);
		position: absolute;
		width: 100%;
		.container {
			border-radius: var(--block-border-radius) var(--block-border-radius) 0 0;
			min-height: var(--footer-size);
			position: relative;
		}
		.author {
			font-family: "Ford Script", cursive;
			font-size: 24px;
			margin-bottom: -24px;
		}

		.badges {
			position: absolute;
			top: 3mm;
			right: 3mm;
			img {
				height: 32px !important;
				background-color: rgba(255, 255, 255, 0.2);
				border-radius: 8px;
				margin-left: 15px;
				padding: 5px;
			}
		}

	}
}

/**
 * blocks for code fragments
 */
.console {
    font-family: 'Terminus', monospace;
    font-size: 21px;
    background: #222;
    margin-left: 32px;
    margin-bottom: 5px;
    overflow: auto;

    .comment {
        color: #099;
        font-family: monospace;
        font-style: italic;
        font-size: 11px;
    }
}

html.current-homepage {
	.cat_list {
		a {
			background-color: rgba(111, 111, 111, 0.5);
			background-position: left bottom;
			background-repeat: no-repeat;
			border-radius: 5px;
			color: #eee;
			display: inline-block;
			font-family: 'Marck Script', sans-serif;
			font-size: 22px;
			height: 150px;
			margin-left: 15px;
			text-align: right;
			width: 150px;
		}

		.blog {
			background-image: url('/img/blog.png');
			background-size: 74% auto;
		}

		.portfolio {
			background-image: url('/img/portfolio.png');
			background-size: 90% auto;
		}
	}
}

html.current-cv {
	.certificates {
		padding: 0;
		margin: 0;
		li {
			border-radius: 5mm;
			border: 2px solid #555753;
			display: inline-block;
			height: 6cm;
			margin: 0 1mm 3mm 0;
			vertical-align:top;
			width: 5cm;
			a {
				display: block;
				div {
					padding: 3mm;
					&.icon {
						align-items: center;
						display: flex;
						height: 4cm;
						justify-content: center;
						img {
							height: auto;
							max-height: 100%;
		
							width: auto;
							max-width: 100%;
						}
					}
					&.description {
						background-color: #555753;
						border-radius: 0 0 5mm 5mm;
						height: 2cm;
						text-align: center;
					}
				}
				
			}
		}
	}

	.involved_in {
		table {
			td:nth-of-type(1), 
			th:nth-of-type(1) {
				width: 10%;
			}
			td:nth-of-type(2), 
			th:nth-of-type(2) {
				width: 5%;
			}
		}
	}
}