/* ======================================== */
/* FONTS */
/* ======================================== */

@font-face {
    font-family: 'Script Writing';
    src: url('fonts/script-writing.ttf') format('truetype');
    font-display: swap;
}
@font-face {
    font-family: 'DejaVuSans';
    src: url('fonts/DejaVuSans.ttf') format('truetype');
    font-display: swap;
}
@font-face {
    font-family: 'Milton One';
    src: url('fonts/milton-one.otf') format('opentype');
    font-display: swap;
}

@font-face {
    font-family: 'Petit Formal Script';
    src: url('fonts/petit-formal-script.ttf') format('truetype');
    font-display: swap;
}
@font-face {
    font-family: new_zelek;
    src: url('fonts/font-new-zelek.ttf');
    font-display: swap;
}
@font-face {
    font-family: neuropolitical;
    src: url('fonts/font-neuropolitical.ttf');
    font-display: swap;
}
@font-face {
    font-family: titillium-web-light;
    src: url('fonts/TitilliumWeb-Light.ttf');
    font-display: swap;
}

/* ======================================== */
/* GENERICS */
/* ======================================== */


/* ======================================== */
/* FULL-PAGE STYLE */
/* ======================================== */
#table-of-contents {
	%	text-shadow: 0px 0px 4px #0000ff;
	%	color: #00eeee;
}
h3 {
	text-shadow: 0px 0px 3px #0000ff55;
	color: #00b6eb;
}
h2 {
	text-shadow: 0px 0px 2px #0000ff55;
	color: #00b6eb;
}
h1 {
	text-shadow: 0px 0px 2px #0000ff55;
	color: #00b6eb;
}
body {
	background-color: white;
	/* background-image: url('images/background-image-white.jpeg'); */
	background-image: url('images/background-light.webp');
	background-size: cover;
	/*    background-image: url('images/blue-wiggle.png'); */
	background-opacity: 0.7;
	background-repeat: no-repeat;
	background-attachment: fixed;
	font-family: DejaVuSans; 
	color: #0055eb;
	text-shadow: 0px 0px 2px #99279977;
	/* color: #39279f; */
	/*    color: cyan; */
}

#Menu {
	background-color: #00000000;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: right;
	font-family: neuropolitical;
}
.menu_link {
	/*    font-size: 0.7em; */
	padding: 0%;
	margin: 0%;
	padding-left: 2%;
	padding-right: 2%;
}
.menu_link a {
	/*    padding-bottom: 3px; */
	font-family: neuropolitical;
	text-decoration: none;
	text-shadow: 0px 0px 4px #009999FF;
	color: ##124599;
}
.menu_link h4, .menu_link h3, .menu_link h2 {
	margin: 0px;
}
.menu_link a:hover {
	/*    padding-bottom: 3px; */
	font-family: neuropolitical;
	text-decoration: none;
	color: #124599;
	text-shadow: 0px 0px 4px #FF0000aa;
}

#vertical-divider-div {
	height: 10%;
}
#Top_Banner {
	position:fixed;
	top: 0;
	left: 0;
	margin: 0;
	/*    height: 9%; */
	width: 100%;
	color: #235681;
	/* font-family: new_zelek; */
	font-family: neuropolitical;
	padding: 10px 0;
	border: 0px;
	border-bottom: 5px solid #235681;
	/* border-width: 0 0 4px; */
	text-align: center;
	font-size: 1.3em;
	background-color: #a0ccee55;
}

#my-name {
	margin: 3px;
	text-shadow: 0px 0px 4px #aa4499aa;
	font-family: neuropolitical;
	/*    text-align: left; */
}
#my-name h1, #my-name h2, #my-name h3, #my-name h4 {
	padding: 0px;
	margin: 0px;
}
table {
	%	margin: 1.2em;
	%	position: relative;
	%	overflow: auto;
	%	padding: 8pt;
	width: 100%;
}
#table_of_contents {
}
#Social ol, #table_of_contents ol {
	list-style-type: none;
}
#Social a, #table_of_contents a {
	font-family: neuropolitical;
	text-decoration: none;
	text-shadow: 0px 0px 4px #009999FF;
	color: #124599;
}
.article h4, .article h3, #Blog h3, #Social h3, #table_of_contents h3 {
	font-family: neuropolitical;
	text-align: center;
	text-shadow: 0px 0px 4px #009999FF;
}
#content-div {
	padding: 20px;
	/* box-shadow:         3px 3px 5px 6px #00bbcc; */
	margin-left: 0%;
	margin-right: 0%;
	margin-top: 7%;
	background-color: #00000000;
}

.link_box {
	/*    margin: 10px; */
	border-radius: 3px;
	border: none;
	box-shadow:         1px 1px 2px 2px #00bbcc;
	padding: 10px;
}

.article {
	/*    border: 1px solid #009999ff; */
	border-radius: 3px;
	border: none;
	box-shadow: 1px 1px 2px 2px #00bbcc;
	padding: 10px;
	margin-top: 10px;
	background-color: #00000000;
	text-shadow: 0px 0px 2px #009999ff;
}
.article code {
	border: none;
	padding: 3px;
	font-family: DejaVuSans;
	white-space: pre-wrap;
}

/* ======================================== */
/* Generic Modal Styling */
/* ======================================== */

/* The Modal (background) */
.basic_modal {
	display: none; /* Hidden by default */
	position: fixed; /* Stay in place */
	z-index: 1; /* Sit on top */
	left: 0;
	top: 0;
	width: 100%; /* Full width */
	height: 100%; /* Full height */
	overflow: auto; /* Enable scroll if needed */
	background-color: rgb(0,0,0); /* Fallback color */
	background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.basic_modal_content {
	/* ToDo: Add background-image? */
	background-color: #fefefe;
	margin: 15% auto; /* 15% from the top and centered */
	padding: 20px;
	border: 1px solid #888;
	width: 80%; /* Could be more or less, depending on screen size */
}

/* The Close Button */
.basic_modal_close {
	color: #aaa;
	float: right;
	font-size: 28px;
	font-weight: bold;
}

.basic_modal_close:hover,
.basic_modal_close:focus {
	color: black;
	text-decoration: none;
	cursor: pointer;
} 

/* Clickable things should have a cursor that looks like it: */
.clickable {
	cursor: pointer;
}

a:visited, a:link {
	text-decoration: none;
	text-shadow: 0px 0px 1px #0000ff99;
	%	color: #00b7eb;
	color: #2cbfff;
}

a:hover {
	text-decoration: underline;
}