/* variables and general styles */
:root{
	/* site colors */
	--site-accent-color: #fddd10;
	--site-secondary-accent-color: #007E71;
	/* branding colors */
	--tb-accent-color: #0A8C61;
	--ghm-accent-color: #ffcc00;
	--person-accent-color: #ffc2c2;
	/* generic colors (base) */
	--base-charcoal: #333333;
	--base-off-white:#eeeeee;
	--base-white: #ffffff;

	/* default: light theme */
	--site-background-color: var(--base-white);
	--site-text-color: var(--base-charcoal);
}


/*reset*/
*{
	box-sizing: border-box;
  background-position:center;
  background-size:contain;
  background-repeat:no-repeat;
	scroll-behavior: inherit;
  -webkit-tap-highlight-color: transparent;
}

*::selection{
	background-color: var(--site-accent-color);
}
*::-moz-selection{
	background-color: var(--site-accent-color);
}


body::-webkit-scrollbar-track{
	background-color: var(--site-background-color);
}

*::-webkit-scrollbar{
	width: 10px;
	background-color: var(--site-background-color);
}

*::-webkit-scrollbar-thumb{
	background-color: var(--site-accent-color);
	border-radius:50px;
}


body{
	font-family: "Open Sans", sans-serif;
	background-color:var(--site-background-color);
  color:var(--site-text-color);
	font-size: 18px;
	transition:opacity 1s;
}

/*layout styles*/
.force-inlineb{
  display:inline-block;
}

/* banners */
.banner{
  position: fixed;
  left: 0;
  z-index: 900;
  top: 0;
  width: 100%;
  background-color: #db2a2a;
  color: var(--base-white);
  padding: 15px 20px;
  font-size: 12px;
}

/*shared native element attributes*/
h1, h2, h3, h4, button{
	font-family: 'Poppins', sans-serif;
}
/*big intro text*/
h1{
  font-size:90px;
  line-height:80px;
}
/* styles specific to hero h1 are found in the hero-styles.css */
/*intro subtitle text and section titles*/
h2{
  font-size:20px;
  margin-bottom:20px;
}

h3{
  font-size:32px;
  margin-bottom:30px;
}
h4{}

p{
	line-height: 1.7;
	margin-bottom:20px;
}
p:last-child{
	margin-bottom:0;
}

/*links*/
a{
  color:currentColor;
	text-decoration:none;
}
a[href]{
	cursor:pointer;
}
/*text links with underline*/
a.text-link{
	transform:scale(1);
	position:relative;
	display:inline-block;
	transition:.25s;
}
a.text-link:after{
	content:"";
	opacity:1;
	position:absolute;
	left:0;
	top:calc(100% - 2px);
	width:100%;
	height:.85px;
	background-color:currentColor;
}
@media (hover: hover) and (pointer: fine) {
  a.text-link:hover:after{
    animation:hoverLink .55s;
  }
}
@keyframes hoverLink{
	/* fade out */
	0%{
		opacity:1;
	}
	25%{
		opacity:0;
	}
	30%{
		width:0;
	}
	35%{
		opacity:1;
	}
	100%{
		width:100%;
	}
}
a.text-link:active{
	transform:scale(.95);
}
/*image links/thumbnails/category*/
a[href] img.material-shadow,
a[href].item-category-badge{
	transform:scale(1);
	transition:.25s;
}
@media (hover: hover) and (pointer: fine) {
  a[href] img.material-shadow:hover,
  a[href].item-category-badge:hover{
    transform:scale(1.05);
    /* box-shadow:0px 8px 17px -8px rgba(0,0,0,0.5); */
    box-shadow:0px 8px 22px -8px rgba(0,0,0,0.4);
  }
}
a[href] img.material-shadow:active,
a[href].item-category-badge:active{
	transform:scale(.98);
	box-shadow:none;
}
/*icon links*/
.icon-links-container{
	width:80%;
	margin:0 auto;
}
.icon-link{
	position:relative;
	display:inline-block;
	cursor: pointer;
	font-size: 2rem;
	opacity:1;
  line-height: calc(100% + 2px);
	top:0;
	transform:scale(1);
	transition:.25s;
	transition-delay: .15s;
}
.icon-link img,
.icon-link svg{
	width:70px;
	height:70px;
}
@media (hover: hover) and (pointer: fine) and (min-width:750px) {
  .icon-link:hover{
    top:-15px;
    transform:scale(1.05);
    transition-delay: 0s;
  }
}
.icon-link:active{
  transform:scale(1);
	opacity:.8;
}
/*icon link tooltips shown on icon hover*/
.icon-link-tooltip{
  opacity:0;
  pointer-events:none;
  position:absolute;
  transition:.25s;
	bottom:calc(100% - 5px);
  left:50%;
	transform: translateX(-50%);
	white-space: nowrap;
}
@media (hover: hover) and (pointer: fine) {
  .icon-link:hover .icon-link-tooltip{
    opacity:1;
  }
}

/*small tablet*/
@media only screen and (max-width: 750px){
	body{
		font-size: 1rem;
	}
	.icon-links-container{
		width:100%;
	}
	.icon-link img,
	.icon-link svg{
		width:70px;
		height:auto;
	}
}

/*buttons (not used)*/
button{
	transform:scale(1);
	border:none;
	border-radius:6px;
	background-color:var(--base-white);
	padding:15px 70px;
	cursor:pointer;
	/* box-shadow:0px 8px 17px -8px rgba(0,0,0,0.5); */
	transition:.25s;
	font-size:inherit;
	color:inherit;
	font-family:inherit;
}
@media (hover: hover) and (pointer: fine) {
  button:hover{
    transform:scale(1.05);
    box-shadow:0px 8px 17px -8px rgba(0,0,0,0.5);
  }
}
button:focus{
	outline:none;
}
button:active{
	transform:scale(1);
	box-shadow:none;
}

/* code snippets */
code{
  padding:3px 8px;
  background-color:transparent;
  color:var(--site-secondary-accent-color);
  white-space: nowrap;
  border:1px solid var(--base-off-white);
  border-radius:2px;
}

img{
	user-select: none;
	user-drag: none;
	-webkit-user-drag: none;
}

svg{
	fill:currentColor;
}
/*small mobile styles*/
@media only screen and (max-width:450px){
	h1{
		font-size: 4rem;
    line-height: 1em;
	}
	h2{
		font-size:1.5rem;
	}
	a.standard-link,
  a.text-link{
		text-decoration:underline;
	}
	a.standard-link:after,
  a.text-link:after{
		background-color:transparent;
	}
}


/*shared custom element attributes*/
.hide,
[hide],
[hidden]{
	display:none;
	opacity:0;
}
/* contextual hiding */
@media only screen and (max-width:750px){
	.hide-on-mobile-only{
		display:none;
	}
	.show-on-mobile-only{
		display:block;
	}
}
@media only screen and (min-width:750px){
	.hide-on-mobile-only{
		display:block;
	}
	.show-on-mobile-only{
		display:none;
	}
}
.show{
	display:block!important;
}

.highlighter-container{
	display:inline-block;
	position:relative;
  background-color:var(--site-accent-color);
}
/* default text offset */
.highlighter-container span{
  position:relative;
}

h1 .highlighter-container{
  margin-left:28px;
  line-height: 60%;
}
h1 .highlighter-container span{
  top:-18px;
  left:-28px;
}
h2 .highlighter-container{
  /* line-height: 80%; */
	margin-left:2px;
  line-height: 111%;
  top:10px;
}
h2 .highlighter-container span{
  /* top:20px;
	left:10px; */
	top: -10px;
  left: -2px;
}
h3 .highlighter-container{
  line-height:111%;
}
h3 .highlighter-container span{
  top: -14px;
  left: 10px;
}
h4 .highlighter-container{
  /* line-height:111%; */
}
h4 .highlighter-container span{
  /* top: -14px;
  left: 10px; */
}

.material-shadow{
  box-shadow:0px 8px 17px -8px rgba(0,0,0,0.5);
}

/* filters and badge labels */
.filter-button,
.item-category-badge{
  font-family: 'Poppins', sans-serif;
  border-radius:2px;
  font-size:14px;
  padding: 3px 8px;
  transform:none;
	transition:.15s;
}
.filter-button{
  background-color:transparent;
  border:1px solid var(--site-accent-color);
}
/* item categories */
.item-category-badge{
  background-color: var(--person-accent-color);
  color:var(--base-white);
}
/* terrabyte badges */
.item-category-badge.terrabyte-badge{
  background-color:var(--tb-accent-color);
}
/* golden harp media badges */
.item-category-badge.goldenharpmedia-badge{
  background-color:var(--ghm-accent-color);
}

/* filter chips */
.filter-chip{
  border-radius: 100px;
  padding: 5px 15px;
	user-select: none;
	cursor:pointer;
	transform:scale(1);
}
.filter-chip input{
	display:none;
	opacity:0;
}
/* hover */
@media (hover: hover) and (pointer: fine) {
  .filter-chip:hover{
    transform:scale(1.05);
  }
}
/* active click */
.filter-chip:active{
	opacity:.75;
}
/* selected/checked */
.filter-chip[aria-checked="true"]{
	background-color:var(--site-accent-color);
	color:var(--base-white);
}

.item-row h3{
  margin-bottom:0px;
}
/* responsive styles */
@media only screen and (max-width: 865px){
  .item-header.align-center,
  .item-header[data-au~="align-center"]{
    align-items:initial;
  }
  .item-category-badge{
    height:100%;
  }
  .item-category-badge span{
    display:none;
  }
}
/*dark mode styles*/
@media (prefers-color-scheme: dark) and (min-width: 865px){
  .item-category-badge{
    background-color: transparent!important;
    border:1px solid var(--person-accent-color);
  }
  .item-category-badge.terrabyte-badge{
    border-color:var(--tb-accent-color);
  }
  .item-category-badge.goldenharpmedia-badge{
    border-color:var(--ghm-accent-color);
  }
}


/*headers that are towards the middle*/
@media only screen and (min-width: 865px){
  .middle-ish-header{
    margin-top:80px;
  }
}


/* OVERWRITES */
/* dark theme */
@media (prefers-color-scheme: dark) {
	:root{
		/* dark theme */
		--site-background-color: var(--base-charcoal);
		--site-text-color: var(--base-white);
		--site-accent-color: var(--site-secondary-accent-color);
	}
	body img{
		opacity:.9;
	}
  code{
    /* code in dark mode */
    border-color: #eeeeee22;
    background-color: #007E7125;
  }
}