body {  
		font-family: Arial, Helvetica, sans-serif;
		background-color: #333;
} 

.with-sidebar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1);

}








.with-sidebar > :first-child {
  flex-basis: 20%; 
  flex-grow: 1;
  background-color: #111;
  padding-left: 1.5em;
  color: white;
  
}

.with-sidebar > :last-child {
  flex-basis: 0;
  flex-grow: 999;
  min-inline-size: 50%;
  background-color: #111;
  color: white;
  padding: 1em;

}



.with-sidebar :first-child  a:link { color: lightblue; text-decoration: none; text-align: center;}
.with-sidebar :first-child  a:hover {color: cornflowerblue; text-decoration: underline;  text-transform: none;}

.with-sidebar :first-child h1 {color: white; font-size: 3vw; text-align: center; text-transform: none; margin-bottom: .01vw;}

.with-sidebar :first-child .HoN_Menu li a:link {color: white; font-size: small; letter-spacing: .03em; }
.with-sidebar :first-child .HoN_Menu a:visited { color: white; text-decoration: none; text-align: center;}
.with-sidebar :first-child .HoN_Menu li a:hover {color: white; font-size: small; font-weight: bold;}
.with-sidebar :first-child .HoN_Menu li {margin-bottom: .33em; } 



#masthead {
			width: 100%;
			background-color: none;
			overflow: hidden;
}


#presskit_button { 
text-align: center;
color: lightblue;
padding-top: 1em;
				}

.factsheet {	
				display: flex;
  				flex-wrap: wrap;
  				gap: var(--s1);  
				
				}


.factsheet > :first-child {	
  flex-basis: 20%; 
  flex-grow: 1;
  background-color: none;
  padding-left: 1.5em;
  color: white;
  font-size: small;
  padding-right: .33em;
  
 

			}				
.factsheet > :last-child {
  flex-basis: 0;
  flex-grow: 999;
  min-inline-size: 50%;
  background-color: none;
  color: white;
  padding: 1em;
  font-size: small;
  padding-left: 1.33em;
  vertical-align: top;
				}


				
.facts_info a:link {color: lightblue;}
.facts_info a:link:hover {color: cornflowerblue; text-decoration: underline; font-weight: normal; text-transform: none;}

.facts_info h3 {color: white; line-height: .1em; letter-spacing: .11em; font-size: x-small; text-transform: uppercase; padding-top: .75em;}
.facts_info p {color: white; line-height: .66em; padding-bottom: .66em; font-size: small;}

.facts_description h2 {color: white; line-height: .1em;}
.facts_description p {color: white; line-height: 1.33em; padding-bottom: .66em; font-size: 1.11em; max-width: 80ch;}

.facts_description li {text-decoration: none; width: 90%; padding-bottom: .43em; max-width: 60ch;}

.section { clear: left; color: ; background-color: none; margin-top: 2em; border-top: solid .03em white; padding-left: 1.33em;}

.section a:link {color: white; font-weight: normal; text-decoration: none;}
.section a:hover {color: cornflowerblue; font-weight: normal; text-decoration: underline;}
.section p { width: 80%; max-width: 80ch;}


.skilltitle {color: white; text-transform: uppercase; letter-spacing: .15em; list-style-type: none; padding-top: 1.33em;}

#additional_links {

color: white;
}


#additional_links a:link {color: white; font-weight: normal; text-decoration: none;}
#additional_links a:hover {color: cornflowerblue; font-weight: normal; text-decoration: underline;}
#additional_links li { line-height: 1.33em;}



.gallery img { max-width: 20vw; padding: 1em; height: auto;}


.FilmBox  { max-width: 10vw; padding: 1em; height: auto;}


.Button_gotop {color: white; text-align: right;}
.Button_gotop a:link {color: white; text-decoration: none;}				
.Button_gotop a:hover {color: yellow;}
				








/* This next section is for responsive design; so whenever the website is displayed on a smaller screen (such as a phone) it will stack elements in different ways. */
@media only screen and (max-width: 720px) {
  .with-sidebar {
  display: grid;
  flex-wrap: wrap;
  gap: var(--s1);
	}
}