/* ==== HTML =============== */

html, body {
    height: 100%;
    max-width: 80ch;
    font-size: clamp(1em, 1.5vw, 2em);
    line-height: clamp(1.3em, 1.5em, 3vw); /* max: 1.7em */
	margin: auto;
}

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

@font-face {
	font-family: 'LiebeOrnaments';
	src: url('/webfonts/liebeornaments/397D73_0_0.ttf');
	src: url('/webfonts/liebeornaments/397D73_0_0.eot');
	src: url('/webfonts/liebeornaments/397D73_0_0.eot?#iefix') format('embedded-opentype'),
	url('/webfonts/liebeornaments/397D73_0_0.woff2') format('woff2'),
	url('/webfonts/liebeornaments/397D73_0_0.woff') format('woff'),
	url('/webfonts/liebeornaments/397D73_0_0.ttf') format('truetype');
}

@font-face {
	font-family: 'Roos Roman';
	src: url('/webfonts/roosroman/RoosRoman.otf');
}

@font-face {
	font-family: 'Roos Roman SC';
	src: url('/webfonts/roosroman/RoosRomanSC.otf');
}

@font-face {
	font-family: 'Roos SemiBold SC';
	src: url('/webfonts/roosroman/RoosSemiBoldSC.otf');
}

/* ==== HEADER ============= */
/* Look at next section for hamburger menu CSS */

header {
	margin-bottom: 1rem;
}

#header_bar {
	margin: 1rem 1rem 0 20%; /* top right bottom left */
	font-size: 2rem;
	/* Have to share space with the burger menu */
	display: grid;
	grid-template-rows: 1fr; /* only one row */
	grid-template-columns: 1fr 1em;
	grid-column-gap: 2rem;
	/* setting up the gradient bottom border */
	border: solid;
	border-width: 0 0 2px;
	border-image:
	linear-gradient(
      to right, 
      red,
	  #903,
	  #903,
      rgb(0, 0, 0, 0),
	  rgb(0, 0, 0, 0)
    ) 2;
}

#header_title {
	font-family: Quintessential;
	line-height: clamp(1.1em, 1.5em, 2vw);
}

/* remove default underline from header link */
#header_title a {
	border: none;
}

/* flame effect when hovering over header */
#header_title a:hover {
	text-fill-color: transparent;
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
	background-image: linear-gradient(
		to right, 
		red,
		#903,
		#903,
		black);
}

#header_text {
	margin-left: 20%;
}

#header_fig {
    display:block;
    width:15%;
    position:relative;
    float: left;
    margin: 5px 0 0 5px;
    content: url("images/fig_partial_opaque.png");
    z-index:4;
}

#header_fig:hover {
    content: url("images/fig_hover.png");
}

/* ==== HAMBURGER ========== */

/* permanently hidden because the label can be clicked */
#menu {
	display: none;
}

/* the label extends the clickable area of the input */
#menu_label {
	border: 2px solid #903;
	border-radius: 0.25rem;
	background-image: url('images/hamburger_menu.svg');
	background-repeat: no-repeat;
	background-position: center;
	background-size: 90%;
}

/* styling the label after the input element is checked */
#menu:checked ~ #menu_label {
	/* content: url('images/hamburger_close.svg'); */
	background-image: url('images/hamburger_close.svg');
	background-size: 60%;
}

/* ==== MENU ============== */

#menu_options {
	display: none;
}

#menu:checked ~ * #menu_options {
	display: block;
	font-size: 1rem;
	font-color: #fffff8;
}

#menu_table {
	margin: 1rem 1rem 1rem 0;
	width: 100%;
	border: 1px solid #903;
	background-color: #eee;
}

/* ensure links cover the full cell */
#menu_table a {
	display: block;
	border: none;
}

#menu_table td {
	text-align: center;
	border-bottom: 1px solid #903;
}

/* suppress the border on the very last column */
#menu_table tr:last-child td:last-child {
	border: none;
}

#menu_table td:hover {
	background-color: #ccc;
}

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

body {
	display: flex;
	font-family: 'Roos Roman', serif;
	color: #111;
	flex-direction: column;
	background: #fffff8;
}

/* ==== LINKS ============== */

/* unvisited link */
a:link {
  color: #903;
  text-decoration: none;
}

/* visited link */
a:visited {
  color: #903;
  text-decoration: none;
}

/* mouse over link */
a:hover {
  color: #111;
  border-bottom: 1px solid black;
}

/* ==== CONTENT =========== */

content {
	/* flex settings needed for sticky footer */
	flex: 1 0 auto;
	margin-left: 1rem;
	margin-right: 1rem;
}

.metadata {
	/* this is for author and datetime notes I want to keep for myself */
	display: none;
}

.mini_header_container {
	text-align: center;
	margin-bottom: 0.5em;
	clear: both;
}

.mini_header {
	display: inline-block;
	font-family: 'Roos SemiBold SC';
	font-size: 1.2rem;

}

.mini_header_ornament {
	display: inline-block;
	font-family: 'LiebeOrnaments';
	font-size: 2em;
	position: relative;
    bottom: -0.1em;
    text-decoration: none;
}

.blog_title {
	border-top: 2px solid #ccc;
	margin-top: 0.5rem;
	font-size: 1.1rem;
	font-weight: 500;
}

.blog_metadata {
	font-style: italic;
}

/* ==== BLOG ============== */

.blog_toc {
	list-style-type: none; /* Remove bullets */
	padding: 0; /* Remove padding */
	margin: 0; /* Remove margins */
}

.blog_title {
	font-size: 1.2em;
}

/* ==== IMAGES ============= */

img {
	max-width: 100%;
}


img.embed_top_left {
    position: relative;
    float: left;
    vertical-align: top;
    display: inline-block;
}

img.embed_top_right {
    position: relative;
    float: right;
    vertical-align: top;
    display: inline-block;
}

img#profile_suit {
    width: 35%;
    height: auto;
    margin-right: 1em;
    margin-bottom: 0.5em;
    margin-top: 0em;
    border: solid 2px black;
}

.project_photos {
  display: flex;
  flex-wrap: wrap;
}

.project_photos > img {
  flex: 50%;
  max-width: 100%;
  max-height: 30%;
  min-width: 10%;
  object-fit: cover;
  vertical-align: bottom;
}

/* ==== FOOTER ============= */

footer {
	/* flex settings needed for sticky footer */
	flex-shrink: 0;
	border-top: 2px solid #666;
	margin-left: 1rem;
	margin-right: 1rem;
	margin-top: 2rem;
	padding-bottom: 1rem;
}

/* === INDIVIDUAL PICTURES ==== */
img#salberus_concept {
	width: 40%;
	height: auto;
	margin-left: 1em;
    margin-bottom: 0.5em;
    margin-top: 0em;
    border: solid 2px black;
}