/* MAIN CSS FILE */

@font-face {
	font-family: Inconsolata;
	src: url(fonts/inconsolata.woff);
}

a.icon-block {
	color: black;
	display: inline-block;
	text-decoration: none;
	font-size: small;
}

h1 {
	font-family: Inconsolata;
	font-size: 150%; 
	text-decoration: underline;
}

a.icon-block i {
	clear: both;
	display: block;
	text-decoration: none;
	width: 100%;
}

a.nav-bar {
	color: black;
	font-family: Inconsolata;
	text-align: center;
	text-decoration: none;
}

div.main-page hr{
	display: block;
	height: 0.2px;
	width: 75%;
}

div.nav-bar {
	text-align: center;
}

div.nav-bar hr {
	display: block;
	width: 20%;
}

p.cool {
	font-family: Inconsolata;
}

p.content {
	font-family: Georgia;
}

li.content {
	font-family: Georgia;
}

p.desc {
	font-family: Georgia;
	font-size: 75%;
	text-align: center;
}

p.footer {
	font-size: 70%;
}

p.form {
	font-size: 175%;
	font-weight: bold;
	text-align: center;
}

p.introduction {
	font-size: 115%;
	text-align: center;
}

p.navbar {
	font-family: Inconsolata;
	font-size: 85%;
	text-align: center;
}

p.project_desc {
	font-family: Inconsolata;
	font-size: 85%;
}

p.project_title {
	font-family: Inconsolata;
	text-decoration: underline;
}

p.subtitle {
	font-family: Inconsolata;
	font-size: 125%;
	font-weight: bold;
	text-align: center;
	padding: 0;
}

p.title { 
	color: black;
	font-family: Inconsolata;
	font-size: 300%;
	font-weight: bold;
	margin: 0;
	padding: 0;
	text-align: center;
}

textarea.form {
	height: 10em;
	width: 50em;
}

i {
	font-size: 400%;
	text-align: center;
	vertical-align: middle;
}

/* Display images in blog */
img.blog {
	display: block;
	height: 25%;
	max-height: 100%;
	width: auto;
	margin-left: auto;
	margin-right: auto;
}

img.face {
	border-radius: 50%;
	display: block;
	height: 20%;
	margin-left: auto;
	margin-right: auto;
	max-height: 100%;
	width: auto;
}

/* Split screen */
.split-left {
	height: 100%;
	overflow-x: hidden; /* Don't show if overflow, see: https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_overflow-x */
	padding-top: 20px;
	padding-right: 25px;
	position: fixed;
	top: 0;
	width: 20%;
	z-index: 1; /* Higher = front */
}

.split-right {
	height: 100%;
	overflow-x: hidden; /* Don't show if overflow, see: https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_overflow-x */
	padding-top: 20px;
	padding-left: 10px;
	padding-right: 25px;
	position: fixed;
	top: 0;
	width: 80%;
	z-index: 1; /* Higher = front */
}

/* Left part of the screen */
.left {
	/* background-color: rgb(162, 255, 13); */
	left: 0;
}

/* Right part of the screen */
.right {
	/* background-color: rgb(5, 181, 212); */
	right: 0;
}

/* Icon tooltips */
.tooltip {
	position: relative;
	display: inline-block;
	border-bottom: 1px dotted black;
}

.tooltip:hover .tooltiptext {
	visibility: visible;
  }