/* ================================ */
/* Font imports */
/* ================================ */
/*Headers*/
@font-face {
  font-family: "HEADERTEXT";
  src: url("");
}
/*bodytext (paragraph, li)*/
@font-face {
  font-family: "BODYTEXT";
  src: url("");
}

/* ================================ */
/* Variables*/
/* ================================ */
:root {
    --font-color: #ffffff;
    --hyperlink: #8fd97c;
    --hyperlink-alt-bg: #fff;
    --headers: #ef98da;
    --header-accent: #e0668d;
    --text-shadow: #08ADDD50;
    
    --bg-container: #00000080;
    --bg-quote: #ef98da20;
    --border: #08addd; /*blue*/
}

/* ================================ */
/* PRELIMINARIES  */
/* ================================ */
h1 {font-size: 2em;}
h2 {font-size: 1.5em;}
h3 {font-size: 1.17em;}
h4 {font-size: 1em;}
h5 {font-size: 1.67em;}
h6 {font-size: .67em;}
p, li {font-size: 1em;}



/* ===================================================== */
/* BODY customizations */

/* ===================================================== */
body, html {
	background: url(confetti.svg) no-repeat top right fixed #002433;
    background-size: 150%;	
	margin: 0 auto;
	padding: 0;	
	font-family: "Courier New", monospace;	
    height: 100%;	
	
}

/* ================================ */
/* CONTAINER customizations */
/* ================================ */
#Container {
	color: #fff;
    margin: 0 auto; 
    border-left: 2pt solid var(--border);
    border-right: 2pt solid var(--border);
    padding: 0;  
    width: 80%;
	max-width: 800px;
	background-color: var(--bg-container);
	backdrop-filter: blur(10px);
	min-height: 100%;
}	

/* ================================ */
/* Sections and structure */
/* ================================ */
header, footer {display: flex; }

header {align-items: center; flex-direction: row; align-items: stretch; justify-content: center;clear: both;}
footer { flex-direction: column;justify-content: left; align-items: left;}	

header div {
	width: 40%;		
	margin: .2em;
	padding: .4em;	
}
header div:last-child {}
header div:first-child {text-align: right;}

nav a {color: #000; background-color: var(--hyperlink); padding: 4px; text-decoration: none; font-style: italic; font-weight: bold; }
nav a:before {content: " >> "}
nav a:hover {background-color: var(--hyperlink-alt-bg); color: var(--hyperlink);}

h2 {color: var(--headers);}
a {color: var(--hyperlink); text-decoration: underline;}


blockquote {
    display: block;
    font-size: larger; font-family: cursive;
    background-color: var(--bg-quote);
    padding: 10px;
    width: 80%;
    text-shadow: 2px 2px var(--text-shadow);
    margin: 0 auto;
}
cite {font-weight: bold;}
cite:before {content: " --";}

#Personal {
	width: 80%;
	margin: 4em auto;
	outline: 10pt dashed #08addd;
	color: #000;
	padding: .5em;	
	background-color: #08addd;  
	text-align: center;	
}
#Personal h2 {color: unset;}
#Personal a {color: inherit; }
#Personal p {color: #000; background-color: unset;}


#sectionContainer {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-start;
	align-items: center;
	width: 100%;	
    margin: 0 auto;
    padding: 0;
}

#sectionContainer > section {/*width: 45%;*/ text-align: center; margin: 1em auto;}
#sectionContainer section h2:before {content: '~*~'; color: var(--header-accent);}
#sectionContainer section h2:after {content: '~*~'; color: var(--header-accent);}

footer {
    margin-top: 8em;
    text-align: center;	
}
footer img {margin: 0 auto;}
footer a, footer a img {border: 0;}

.divider {margin: 1em auto;}

/* ================================ */
/* text and text styles */
/* ================================ */

h1, h2, h3, h4, h5, h6, hc {font-family: var(--ff-header)}
.subtitle {font-weight: bold;}
p, li {	font-family: var(--ff);}

/* Lists */
ul {margin: 0; padding: 0;}
ul li {
    display: block; 
    margin: .2em; 
    padding: .2em;
}
/*li img {border: 2px solid black;}
li img:hover {border: 2px solid blue;}*/

/* ================================ */
/* Media Queries*/
/* ================================ */
@media screen and (max-width: 600px) {    

	body {padding: 0; margin: 0 auto;}
	#Container {padding: 0; width: 95%}
	header, #sectionContainer {flex-direction: column; align-content: center;}
    #sectionContainer > section {width: 98%; margin: 0 auto;}
    blockquote {width: 95%;}
 
}