/* 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:#817e9e;
	background-image: url(./ott.jpg);
		background-position: center;
		background-size: 100px;
		background-attachment:fixed;
	color:#261f40;
	font-family: arial, sans-serif;
	/*max-width:1100px;*/
	margin-top:auto;
	margin-bottom:auto;
	/*width: 100%;*/
	border-radius: 10%;
}
body > *:not(header) {
    margin-left: auto;
    margin-right: auto;
    padding-left:7px;
	padding-right:7px;
}

/*Header Tests*/

.header {
	font-size:1.5em;
	min-height:160px;
	overflow:hidden;
	display:flex;
	flex-wrap: wrap;
	align-content:end;
	width: 100vw;
	margin-left: unset;
	margin-right: unset;
}

.headtext {
	font-size:2em;
	font-style:italic;
	font-weight:bold;
	margin-left:10px;
	padding:10px;
}

.bg-head {
	background-color:#594e70;
	background-image: url(./varrabannertest.png);
		/* background-size: ; */
		background-position:center;
	color:#ffffff;
	border: 1px solid #71678e;
	margin-bottom:20px;
	box-shadow:5px 5px 0px rgba(67, 61, 82,0.3);
	text-shadow:5px 5px 0px rgba(67, 61, 82,1);
}

.divider {
	height:10px;
	width:100%;
}

.bg-main {
	background-color: #f282a0;
	background-image: linear-gradient(45deg, rgba(222,97,130,1) 15%, rgba(194,69,114,1) 80%);
	color:#ffffff;
}


/*Interior Tests*/

main {
    background-color: #e1dee9;
    padding: 20px;
    height: 500px;
    overflow: auto;
   scrollbar-color: #4450f7 #032F6E;
   scrollbar-width: thin;
    
}

.flex {
    display: flex;
    background-color: #e1dee9;
    height: 500px;
    border-radius: 4% 4% 4% 4%;
    overflow: hidden;
    border: 6px solid #C2E190;
    padding: 0.5em;
}

.flex-box {
    display:flex;
    flex-wrap:wrap;
    margin: -1em;
	align-items: flex-start;
}

.flex-box section {
	margin: 1em;
	}

.full { flex: 1 1 100%;}
.half { flex: 1 1 calc(50% - 2em); }
.third { flex: 1 1 calc(33% - 2em); }
.twothird { flex: 1 1 calc(66% - 2em); }
.quarter { flex: 1 1 calc(25% - 2em); }
.threequarter { flex: 1 1 calc(75% - 2em); }

.mBorder {
   border-radius: 4% 4% 4% 4% ;
   flex: 1;
   order: 2;
   overflow: hidden;
}
.mBorder > .box > .contactsheader {
    text-align: center;
}
.mBorder > .headshot {
    border-radius:20%;
    overflow: hidden;
    width:150px;
    height:150px;
    border: 2px solid #080659;
    margin: 0 auto;
}


.box {
    background-color: #ffffff;
    border: 1px solid #DDEDD6;
    padding: 10px;
    border-radius:10%;
}



/* navigation section!! */
#navbar {
    height: 40px;
    background-color: #C2E190;
    /* navbar color */
    width: 100%;
    border-radius: 0% 0% 20% 20%;
    margin-bottom: 10px;
}

#navbar ul {
    display: flex;
    padding: 0;
    margin: 0;
    list-style-type: none;
    justify-content: space-evenly;
}

#navbar li {
    padding-top: 10px;
}

/* navigation links*/
#navbar li a {
    color: #080659;
    /* navbar text color */
    font-weight: 800;
    text-decoration: none;
    /* this removes the underline */
}

/* navigation link when a link is hovered over */
#navbar li a:hover {
    color: #F56131;
    text-decoration: underline;
    text-decoration: none;
}



/* Stories Test */

.title {
		font-size: 1em;
		display: flex; 
   		flex-direction: column;
		flex-grow: 6;		
		text-align:center;
		color:#261f40; background-color: #c2e190; padding-left:12px;letter-spacing:2px;font-weight: bold;height:2em;line-height:2em;
	}
	
	.header-box { 
		display: flex; 
   		flex-direction: column;
	}
	
	.story-box {
		display: flex;
		justify-content: flex-end;
	}
	
	.thumb-box {
		display: flex; 
		flex: 0 0 20%;
   		flex-direction: column;
		background-color: #e1dee9; border: 1px solid #c2e190; padding: 0.6%;padding-bottom: 0px;  margin-bottom:8px;
	}
	.thumb-box > * {
	    margin-bottom: 0.8em;
	}
	.thumb-box > img {
	    width:480px;
		aspect-ratio: 4 / 4;
	}
	.bio-box {
		display: flex; 
   		flex-direction: column;
		flex-grow: 4;
		text-align: center;
		background-color: #e1dee9; border: 1px solid #c2e190; padding: 0.8%;padding-right:1%;padding-bottom: 0px; margin-bottom:8px;
	}
	.body-box {
		display: flex; 
   		flex-direction: column;
		flex-grow: 4;
		text-align: justify;
		background-color: #e1dee9; border: 1px solid #c2e190; padding: 0.8%;padding-right:1%;padding-bottom: 0px; margin-bottom:8px;
	}
	.body-box > details {
	    margin-top: 0.3em;
		margin-bottom: 0.3em;
		text-align: left;
	}
	.body-box > details:first-of-type {
	    margin-top: 0.6em;
	}
	.body-box > details > summary {
	    color: #000000;;
	}
	.body-box > span {
	    text-align:left;
	}
	.body-box > p {
	    margin-top:0.2em;
		text-align:left;
	}
	.body-box > p.story-content-tags {
	    margin-bottom:0.2em;
	}
	.body-box > p.story-character-tags {
	    margin-bottom:0.2em;
	}
	.body-box > button {
	    margin-bottom:0.8em;
	}
	.wordcount {
		display: flex; 
		flex-grow: 1;		
      	align-items: center;
		text-align: right;
		color:var(--link); background-color: #c2e190; padding-right:8px;letter-spacing:2px;font-size:0.8em;font-weight: bold;height:1.6em;line-height:1.6em;
	}

.episode {
		font-size: 0.9em;
		display: flex; 	
   		flex-direction: column;
		flex-grow: 6;		
      	align-items: center;
		text-align: center;
		color:var(--link); border: 1px solid #c2e190; background-color: var(--section); padding-right:12px;letter-spacing:2px;font-weight: bold;height:2em;line-height:2em;
	}
	
	button {
		background-color: #c2e190;
		border: var(--link);
		color: var(--link);
		padding: 10px 10px;
		text-align: center;
		text-decoration: none;
		display: inline-block;
		font-size: 16px;
		border-radius: 8px;
		cursor: pointer;
		box-shadow:0 4px 8px 0 rgba(0,0,0,0.6);
		font-family: var(--headingfont), sans-serif;
		font-weight: bold;
	}	
	button:hover {
		background-color: var(--link);color: #c2e190;
	}