/*--------------------------------------------------------------
things to change

letter in trance and a team

--------------------------------------------------------------*/


/*--------------------------------------------------------------
CUSTOM PROPERTIES
--------------------------------------------------------------*/

:root {
	--black: #030303;
	--pink: #f34779;
	/* --palevioletred: #DB7093; */
	--strongink: #d94f66;
	--alternatepink: #ac0c50; 
	--burntrose: #a47b7b;
	--whitesmoke: #f5f5f5;
	--dimgrey: #696969;
	--lightgray: #D3D3D3;
	--alternategray: #4c5b5c;

	--color-white: var(--whitesmoke);
	--color-dark: var(--black);
	--color-light: var(--dimgrey);
	--color-primary: var(--lightgray);
	--color-accent: var(--strongink);
	--color-sideline: var(--pink);
	--color-text: var(--burntrose);
	--color-alternate: var(--alternategray);


	--font-size-base: 2rem;
	--font-size-tagline: 3rem;
	--font-size-h1: 5rem;
	--font-size-h2: 4rem;
	--font-size-h3: 5rem;
	--font-size-h4: 1rem;
	--font-size-browser: 1rem;
	--font-size-small: 1rem;

 }


.list-reset {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

.content-wrap {
	max-width: 95%;
	background-color: var(--color-white);
	margin: 0 auto;
	padding: 2rem;
	/* border: 3px solid black; */

}


.content-wrap2 {
	max-width: 95%;
	background-color: var(--color-primary);
	margin: 0 auto;
	padding: 2rem;
  border: 3px solid black; 

}

.content-wrap3 {
	max-width: 95%;
	background-color: var(--color-white);
	margin: 0 auto;
	padding: 10px;
	border: 20px groove var(--lightgray);

}

h1, h2, h3, h4 {
	margin: 0;

}

.btn {
  background: var(--color-light);
  color: var(--color-light);
  text-decoration: none;
  padding: 10px;
  /* margin-bottom: 5px; */
  display: inline-block;
  /* line-height: 1; */
  border-radius: 4px;
  text-transform: uppercase;
  /* font-size: var(--font-size-small); */
  /* letter-spacing: 0.08rem; */
}

 .btn:hover {
  background: var(--color-white);
  color: var(--color-dark); 
}



/*--------------------------------------------------------------
TYPOGRAPHY
--------------------------------------------------------------*/

body {
	margin: 0;
	padding: 0;
	font-family: mencken-std, sans-serif;
	font-weight: 400;
	font-size: var(--font-size-base);
	line-height: 1.4;
	color: var(--burntrose);

}

h1 {

	color: var(--color-text);
	font-family: joschmi, sans-serif;
	font-size: var(--font-size-h1);
	text-transform: capitalize;
	/* text-align: right; */
	text-decoration: line-through var(--color-accent) 5px;

}

h2, h3 {
	color: var(--color-text);
	font-family: joschmi, sans-serif;
	font-size: var(--font-size-h2);
	text-transform: capitalize;
	/* text-align: right; */
	text-decoration: line-through var(--color-accent) 5px;

}


/*--------------------------------------------------------------
GRID Layout
--------------------------------------------------------------*/

 .site {
 width: 100%;

	
	background-color: var(--color-white);
	display: grid;
  justify-content: center;
	grid-template-columns: 1fr;
	/* grid-template-rows: auto 1 repeat (4 1fr) auto; */

	grid-template-areas:
		"fixed-mast"
		"header"
		"main"
		"sidebar-1"
		"sidebar-2"
		"sidebar-3"
		"footer";


	 @media screen and (min-width: 1360px) {
		display: grid;
		max-width: none;
		gap: 1em;

		grid-template-areas:
			"fixed-mast fixed-mast"
			"header header"
			"sidebar-1 main"
			"sidebar-1 main"
			"sidebar-3 sidebar-2"
			"footer footer";
		grid-template-columns: 1fr 2fr;
		grid-template-rows: auto ;

	}

	@media screen and (min-width: 1600px) {
	
		grid-template-areas:
			"fixed-mast fixed-mast fixed-mast"
			"sidebar-1 header header"
			"sidebar-1 main main"
			"sidebar-3 sidebar-2 sidebar-2"
			"footer footer footer";

		grid-template-columns: 1fr 1fr 2fr;
		grid-template-rows: auto auto 1fr auto;
	
	}

 } 



/* grid-template-columns: 225px minmax(auto, 30em) 250px;  */



#masthead {
	grid-area: fixed-mast;
}

#mast-header {
	grid-area: header;
}

#content{
	grid-area: main;
}

#sidebar-primary {
	grid-area: sidebar-1;
}

#sidebar-secondary {
	grid-area: sidebar-2;
}

#sidebar-tertiary {
	grid-area: sidebar-3;
}

footer {
	grid-area: footer;
}




/*-------------------------------------------
MASTHEAD

---------------*/


#masthead {
	width: 100%;
  height: 250px; 
  background-color: none;
}
	


.mast-nav {

  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 260px;
	background-color: var(--color-dark);
  border-bottom: 5px solid rgb(250, 155, 170);
  z-index: 1000; /* keep the fixed header above scrolling content */

}


.mastflex {
	   height: 230px; 
		/* border: 5px solid red; */
		display: flex;
		flex-flow: wrap column;
		margin: 20px;
		align-items: flex-end;
		list-style: none;
		padding: 10px;
	
	}

	#masthead	li {

      
			a {
     
				background: none;
				color: var(--color-accent);
				font-size: 32px;
				display: inline;
				padding: 10px;
				margin: 0;
				text-decoration: none;
				font-weight: bold;


				&:hover {
					background-color: var(--color-primary);
					text-decoration: underline;
					transition: 0.2ms ease-in-out;
				}
			}
		}
	

/* Logo */

.logo {
	/* border: 5px solid red; */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
	padding-top: 100px;
	margin: 0 auto;
	width: 430px;
  z-index: 1001; /* logo sits on top of the header bar */

}



/* ----------------PAGE HEADER 
------------------------------------------------*/

/* .header-flex - container for video +Resistrance <p>*/

 #mast-header { 

} 


 .header-flex {
  width: 100%;
	margin: 0 auto;
	display: flex;
	flex-flow: nowrap column;
	align-items: center;
	/* border: 4px solid black;  */
 	margin-top: 15px; 

 }
 


.header-flexitem1 {
	flex: 1 1 auto;
	 /* box-sizing: border-box;  */

}



.header-flexitem2 {
	flex: 1 1 auto;
	
}  

/* explore this!!!*/

  .headeritem-1 {
  flex-grow: 3;

}  


/* .video-flex - container for quote +Video*/

.videoflexcontainer {
	width: 100%;
	display: inline-flex;
	flex-flow: nowrap row;
	/* border: 5px solid yellow; */

}

.quote-flexitem {
	flex: 1 1 auto;
}

.video-flexitem {
	flex: 1 1 auto;

}

  /* Quotation + VIDEO */

.header-flex video {
  width:95%;
	padding: 5px;
	border: 10px dotted var(--color-accent);
	/* border: 10px dotted var(--color-accent); */
	border-radius: 5px;
	aspect-ratio: 16/9;

} 


.videoflexcontainer .quote {
  width: 1em;
	height: auto;
	display: inline-block;
	writing-mode: vertical-rl;
	text-align: center;
	/* aspect-ratio: 16/9; */
	color: var(--burntrose);
	font-family: baka-too, sans-serif;
	font-size: 3rem;
	/* border: 3px solid blue; */
	margin: 0;
	padding: 0;

}

#mast-header 	a {
     
				background: none;
				color: var(--color-accent);
				display: inline-block;
				padding: 5px;
				margin: 1px;
				text-decoration: none;
				font-weight: bold;
				/* line-height: 1; */


				&:hover {
					 background-color: var(--color-light);
					color: var(--color-white); 
					text-decoration: underline;
					display: inline-block;
					border-radius: 18px;
					margin: 3px;
					padding:15px; 
					text-transform: lowercase;
				  transition: 0.2ms ease-in-out; 
				}
			}
		 



#mast-header .videoflexcontainer p {
margin: 0;

}


#mast-header h1 {
	text-align: center;
	padding: 5px;
	margin: 5px;

}

#mast-header h1 p {
	margin: 0;
}

/* MAIN - BIO */


.rasputin-container {

	display: flow-root;
	padding: 20px;
	padding-top: 5px;
}

.rasputin-container img {
	width: 40%;
	margin-right: 25px;
	float: left;

}

#content h1 {

	margin: 0;
}

/* ALBUM CHAPTERS + COVER */


 #sidebar-primary {
	margin: 0 auto;

}

#sidebar-primary h2 {
text-align: center;

}

.side-barflex {
	width: 100%;
	margin: 0 auto;
	display: flex;
	flex-flow: nowrap column;
	align-items: center;
	

}


.album-frame {
 
	margin-top: 20px;
}

#sidebar-primary  li a {
	/* margin: 0.1em 0; */

		width: 95%;
		/* border:1px solid black; */
		background-color: var(--burntrose);
		/* background-color: #926217; */
		color: var(--color-white);
		font-size: var(--font-size-base);
		display: inline-block;
		padding: 15px;
		margin: 8px;
		text-decoration: none;
		border-radius: 10px;
		text-transform: uppercase;
		text-align: center;

		&:hover {
			background-color: var(--color-primary);
			color: var(--color-accent);
			transition: 0.2ms ease-in-out;
		}
	}


/* BLOG ENTRY + IMAGE  
---------------------------------------*/ 

#sidebar-secondary{


}

.blog-grid {
width: 100%;
display: grid; 
grid-template-columns:1fr;
grid-template-rows: repeat (2 1fr);
/* grid-auto-rows: 100px; */


}

/* FUTURES ASIDE — MEET THE TEAM goat screensaver
---------------------------------------*/

/* All portraits stacked in one grid cell so they share the same spot;
   goats.js toggles .is-active to cross-fade between them (no zoom). */
.goat-slideshow {
	display: grid;
	width: 100%;
	margin-top: 20px;
	border-radius: 8px;
	overflow: hidden;
	aspect-ratio: 4 / 5; /* portraits are 600x750; guarantees height on iOS Safari */
}

.goat-slideshow .goat {
	grid-area: 1 / 1;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 2.6s ease-in-out; /* slow, filmic crossfade */
}

.goat-slideshow .goat.is-active {
	opacity: 1;
}

/* Reduce Motion (common on iPhone): swap instantly instead of fading,
   but still rotate so the team is visible. */
@media (prefers-reduced-motion: reduce) {
	.goat-slideshow .goat { transition: none; }
}

/* Footer
---------------------------------------*/


.credits {
	background-color: var(--dimgrey);
	color: #fff;
	padding: 2em 1em;
	text-align: center;

	a {
		color: #fff;

		&:hover {
			color: var(--color-accent);
		}
	}
}


footer {
	text-align: center;
	padding: 60px;
}

.socials-list {
	display: flex;
	justify-content: center;
}

.socials-list img {
	width: 40px;
	margin: 15px;
}

.copyright {
	font-size: var(--font-size-small);
}