/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-color: gray;
  background: linear-gradient(#f83f00, #b2831b);
  color: black;
  font-family: "Avant Garde", "Century Gothic", "Apple Gothic", "Apple SD Gothic Neo", Helvetica, Arial;
  display: block;
  margin: 0px 0px 0px 0px;
  background-image: url(bg_fill.jpg);
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
  height: 100%;
  padding: 10px 8px;
  
}

.innercontainer {
    background-blend-mode: normal;
    background-color: #f4f7f9;

    border-style: solid;    
    border-color: white;
    border-width: 1px;
	border-radius: 30px;

	max-width: 710px;
	min-width: 340px;
	min-height: 450px;
    width: 100%;
    height: auto;
    margin: 20px auto;
	padding: 0px 0px;
}

.fit{
  max-width:100%;  
  max-height:100%;  
  height: auto;  
  object-fit: contain;
}

.header{
	max-width:100%;
	max-height:100%;
	height: auto;
	object-fit: none;
	padding: 25px 25px 0px 25px;
  }

  .logo{
	color: black;
	float: right;
	/* border: 1px solid blue; */
	/* height: auto; */
	padding: 14px;
  }

  .logo a:link {
    font-weight: normal;
  }

  .intro{
	/* text-align: right; */
	color: black;
	float: left;
	max-width: 350px;
	vertical-align: middle;
	padding: 0px;
	/* border: 1px solid red; */
	
  }

  .portrait{
	/* text-align: right; */
	color: black;
	float: left;
	padding-right: 8px;
	/* border: 1px solid greenyellow;	 */
  }
  .portrait_text{
	/* text-align: right; */
	color: black;
	/* float: right; */
	font-style: italic;
	/* border: 1px solid orange;	 */
	margin: 6px auto;
	font-size: 1em;
  }
.maincontent {
      padding: 0px 22px ;
      font-size: 1.1em;
}

.footer {
      padding: 15px;
      /* background-color: #0f0f0f; */
      color: #939c9f;
	  text-align: right;
}

.thumb{
      border-radius: 10px;
      width: 150px;
}


hr {
  border-top: 1px dotted #CCCCCC;
}

.maincontent hr{
  margin: 15px 0 50px 0;
  border: 1px dotted #CCCCCC;
  border-width: 0 0 1px 0;
}


.section {
  border: 1px dotted white;
  border-radius: 10px;
  padding: 0px 12px 12px 12px;
  margin-bottom: 10px;
  background-color: #FFFFFF;
}

.fitbutton{
  max-width:100%;  
  max-height:100%;  
  height: auto;  
  object-fit: contain;
  border-radius: 10px;
  display:inline;
}

p {
    line-height: 1.4em;
   /* 14px/16=0.875em */
}

li {
    line-height: 1.4em;
    margin-bottom: 0.4em;
   /* 14px/16=0.875em */
}

h1 {
    color: #fe0185;
    text-align: center;
    font-size: 1.7em;
	font-weight: normal;
	text-transform: uppercase;	
}
h2 {font-weight: normal; text-transform: uppercase;}
h3 {font-weight: normal; text-transform: uppercase;}
h4 {font-weight: bold; text-transform: uppercase;}

.spicy{
    max-width:100%;  
  max-height:100%;  
  height: auto;  
  object-fit: contain;
  filter: blur(10px);
}


nav {
	/* text-align: center; */
	margin-bottom: 0px; /*fix flex container interfering with margin collapse*/
	padding-top: 25px;
	
}

nav ul {
	list-style: none;
	margin: 0;
	padding: 0;	
}

nav li {
	/*padding-right: 15px;  create space between inline link elements */
	display: inline-block;  
	text-transform: uppercase;	
	/* color: #58243a; */
}

nav li a:link{
	
	font-size: 19px;
	color: black;
	padding: 10px 12px;
    font-weight: normal;
}

nav li a:hover{
	/* color: white;
	border: 0px solid black; */
	color: black;
	border-radius: 12px;
	background-color: #f97c00;
}

a:link{
    color: black;
    font-weight: bold;
    letter-spacing: 0.5px;
      text-decoration: none;
}

a:visited{
    color: #cf2b4f;
    /* font-weight: bold; */
    letter-spacing: 0.5px;
      text-decoration: none;
}

a:link.social_icon, a:visited.social_icon {
	opacity: 0.5;
	/* padding: 10px;	 */
}
  
a:hover.social_icon, a:active.social_icon {
	opacity: 1;
}

a:link.button , a:visited.button {
  /* background: linear-gradient(#1ec1b4, #a9cdff); */
  background-color: #cf2b4f;
  color: white;
  padding: 14px 10px;
  margin: 4px 0px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  border-radius: 12px;
  width: 276px;
}

 a:hover.button, a:active.button {
  background-color: red; 
  /*background-image: url(/shine_effect.gif);*/
  background: linear-gradient( #a9cdff, #1ec1b4);
  text-decoration: none;
}

.social_icon img{
	margin: 8px;
	display: inline-block;
}

.footer {
	padding-top: 26px;
	vertical-align: bottom;
	/* margin: 8px; */
}


.footer_right{
  float: right;
  text-align: center;
  vertical-align: bottom;
}

.footer_left{
  float: left;
}

.clear {
    clear: both;
}

iframe {
    aspect-ratio: 16 / 9;
    height: auto;
    width: 100%;
}