/* fonts.css
Josh Reed 2020

Collection of common fonts and general text formats that are used frequently across the site.
*/

:root {

	--base-letter-spacing: 0px;

	--font-family: "Open Sans", sans-serif;
	--font-weight: normal;
	--font-stretch: normal;

	--font-size-mult: 1;
	--f-scale-unit: 1vmax;
	
	--f-apply-custom: var(--font-family) var(--font-weight) var(--font-stretch) calc(var(--font-size-mult) * var(--f-scale-unit));
}

.label {letter-spacing: 1.5px !important;}

.f-label {
	--label-spacer: calc(var(--font-size-mult) * 1px);
	letter-spacing: calc(var(--base-letter-spacing) + var(--label-spacer)) !important;
}

.f-brandon {
	--font-family: "BrandonGrotesqueWeb-Regular", sans-serif;
	font-family: var(--font-family);
	font-weight: var(--font-weight);
	font-stretch: var(--font-stretch);
	font-size: calc(var(--font-size-mult) * var(--f-scale-unit));
}
.f-brandon * {
	--font-family: "BrandonGrotesqueWeb-Regular", sans-serif;
	font-family: var(--font-family);
	font-weight: var(--font-weight);
	font-stretch: var(--font-stretch);
	font-size: calc(var(--font-size-mult) * var(--f-scale-unit));
}

.f-heavy {
	--font-weight: bold;

	--base-letter-spacing: 0.5px;
	letter-spacing: var(--base-letter-spacing);
}
.f-heavy * {
	--font-weight: bold;

	--base-letter-spacing: 0.5px;
	letter-spacing: var(--base-letter-spacing);
}

.f-small {
	--font-size-mult: 0.7;
}

.f-info {
	--font-size-mult: 0.85;
}

.f-para {
	--font-size-mult: 1;
}

.f-subtitle {
	--font-size-mult: 1.25;
}

.f-title {
	--font-size-mult: 1.5;
}

.f-subhead {
	--font-size-mult: 1.75;
}

.f-medium {
	--font-size-mult: 2;
}

.f-head {
	--font-size-mult: 2.5;
}

.f-scale-vmax {
	--f-scale-unit: 1vmax;
}
.f-scale-vmax {
	--f-scale-unit: 1vmax;
}

.f-scale-vmin {
	--f-scale-unit: 1vmin;
}
.f-scale-vmin * {
	--f-scale-unit: 1vmin;
}

.f-scale-vw {
	--f-scale-unit: 1vw;
}
.f-scale-vw * {
	--f-scale-unit: 1vw;
}

.f-scale-vh {
	--f-scale-unit: 1vh;
}
.f-scale-vh * {
	--f-scale-unit: 1vh;
}

/* Font with height set */
.f-brandon-head-heavy {font-family: "BrandonGrotesqueWeb-Regular", sans-serif; font-weight: bold; font-size: 3vw;}
.f-brandon-head {font-family: "BrandonGrotesqueWeb-Regular", sans-serif; font-weight: normal; font-size: 3vw;}
.f-brandon-medium-heavy {font-family: "BrandonGrotesqueWeb-Regular", sans-serif; font-weight: bold; font-size: 2.25vw;}
.f-brandon-medium {font-family: "BrandonGrotesqueWeb-Regular", sans-serif; font-weight: normal; font-size: 2.25vw;}
.f-brandon-subhead-heavy {font-family: "BrandonGrotesqueWeb-Regular", sans-serif; font-weight: bold; font-size: 1.75vw;}
.f-brandon-subhead {font-family: "BrandonGrotesqueWeb-Regular", sans-serif; font-weight: normal; font-size: 1.75vw;}
.f-brandon-title-heavy {font-family: "BrandonGrotesqueWeb-Regular", sans-serif; font-weight: bold; font-size: 1.25vw; letter-spacing: 0.5px;}
.f-brandon-title {font-family: "BrandonGrotesqueWeb-Regular", sans-serif; font-weight: normal; font-size: 1.25vw;}
.f-brandon-title-lable {font-family: "BrandonGrotesqueWeb-Regular", sans-serif; font-weight: normal; font-size: 1.25vw; letter-spacing: 1.5px;}
.f-brandon-para-heavy {font-family: "BrandonGrotesqueWeb-Regular", sans-serif; font-weight: bold; font-size: 1vw;}
.f-brandon-para {font-family: "BrandonGrotesqueWeb-Regular", sans-serif; font-weight: normal; font-size: 1vw;}
.f-brandon-para-lable {font-family: "BrandonGrotesqueWeb-Regular", sans-serif; font-weight: normal; font-size: 1vw; letter-spacing: 1px;}
.f-brandon-para-heavy-lable {font-family: "BrandonGrotesqueWeb-Regular", sans-serif; font-weight: bold; font-size: 1vw; letter-spacing: 1px;}
.f-brandon-small {font-family: "BrandonGrotesqueWeb-Regular", sans-serif; font-weight: normal; font-size: 0.7vw;}
.f-brandon-small-lable {font-family: "BrandonGrotesqueWeb-Regular", sans-serif; font-weight: normal; font-size: 0.7vw; letter-spacing: 1px;}
.f-brandon-small-heavy-lable {font-family: "BrandonGrotesqueWeb-Regular", sans-serif; font-weight: bold; font-size: 0.7vw; letter-spacing: 1px;}

/* Brandon with vh scale */
/* Font with height set */
.fh-brandon-head-heavy {font-family: "BrandonGrotesqueWeb-Regular", sans-serif; font-weight: bold; font-size: 5.25vh;}
.fh-brandon-head {font-family: "BrandonGrotesqueWeb-Regular", sans-serif; font-weight: normal; font-size: 5.25vh;}
.fh-brandon-medium-heavy {font-family: "BrandonGrotesqueWeb-Regular", sans-serif; font-weight: bold; font-size: 3vh;}
.fh-brandon-medium {font-family: "BrandonGrotesqueWeb-Regular", sans-serif; font-weight: normal; font-size: 3vh;}
.fh-brandon-title-heavy {font-family: "BrandonGrotesqueWeb-Regular", sans-serif; font-weight: bold; font-size: 2.25vh; letter-spacing: 0.5px;}
.fh-brandon-title {font-family: "BrandonGrotesqueWeb-Regular", sans-serif; font-weight: normal; font-size: 2.25vh;}
.fh-brandon-title-lable {font-family: "BrandonGrotesqueWeb-Regular", sans-serif; font-weight: normal; font-size: 2.25vh; letter-spacing: 1.5px;}
.fh-brandon-para-heavy {font-family: "BrandonGrotesqueWeb-Regular", sans-serif; font-weight: bold; font-size: 1.75vh;}
.fh-brandon-para {font-family: "BrandonGrotesqueWeb-Regular", sans-serif; font-weight: normal; font-size: 1.75vh;}
.fh-brandon-para-lable {font-family: "BrandonGrotesqueWeb-Regular", sans-serif; font-weight: normal; font-size: 1.75vh; letter-spacing: 1px;}
.fh-brandon-para-heavy-lable {font-family: "BrandonGrotesqueWeb-Regular", sans-serif; font-weight: bold; font-size: 1.75vh; letter-spacing: 1px;}


/* Brandon with vh scale, but capped in width as well so that it looks nice on Mobile too */
.fhw-brandon-large {font-family: "BrandonGrotesqueWeb-Regular", sans-serif; font-weight: normal; font-size: min(7vh, 5.25vw);}
.fhw-brandon-large.portrait {font-size: min(7vh, 7vw);}
.fhw-brandon-head {font-family: "BrandonGrotesqueWeb-Regular", sans-serif; font-weight: normal; font-size: min(5.25vh, 4vw);}
.fhw-brandon-head.heavy {font-weight: bold;}
.fhw-brandon-head.portrait {font-size: min(5.25vh, 6vw);}
.fhw-brandon-head.lable {letter-spacing: 2px;}
.fhw-brandon-medium {font-family: "BrandonGrotesqueWeb-Regular", sans-serif; font-weight: normal; font-size: min(3vh, 2.75vw);}
.fhw-brandon-medium.dense {line-height: 1.1em;}
.fhw-brandon-medium.heavy {font-weight: 700;}
.fhw-brandon-medium.portrait {font-size: min(3vh, 4vw);}
.fhw-brandon-medium.lable {letter-spacing: 2px;}
.fhw-brandon-subhead {font-family: "BrandonGrotesqueWeb-Regular", sans-serif; font-weight: normal; font-size: min(2.6vh, 2.25vw);}
.fhw-brandon-subhead.portrait {font-size: min(3vh, 3.5vw);}
.fhw-brandon-subhead.lable {letter-spacing: 1.75px;}
.fhw-brandon-title {font-family: "BrandonGrotesqueWeb-Regular", sans-serif; font-weight: normal; font-size: min(2.25vh, 1.75vw);}
.fhw-brandon-title.dense {line-height: 1.1em;}
.fhw-brandon-title.heavy {font-weight: bold; letter-spacing: 0.5px;}
.fhw-brandon-title.lable {letter-spacing: 1.5px;}
.fhw-brandon-title.portrait {font-size: min(4vh, 4vw);}
.fhw-brandon-subtitle {font-family: "BrandonGrotesqueWeb-Regular", sans-serif; font-weight: normal; font-size: min(2vh, 1.4vw);}
.fhw-brandon-subtitle.portrait {font-size: min(3vh, 3vw)}
.fhw-brandon-subtitle.lable {letter-spacing: 1.5px;}
.fhw-brandon-para {font-family: "BrandonGrotesqueWeb-Regular", sans-serif; font-weight: normal; font-size: min(1.75vh, 1vw);}
.fhw-brandon-para.lable {letter-spacing: 1.2px;}
.fhw-brandon-small {font-family: "BrandonGrotesqueWeb-Regular", sans-serif; font-weight: normal; font-size: min(1.5vh, 0.85vw);}
.fhw-brandon-small.portrait {font-size: min(1.5vh, 1.5vw)}
.fhw-brandon-small.lable {letter-spacing: 1.5px;}

/* Opensans with vh scale, but capped in width as well so that it looks nice on Mobile too */
.fhw-opensans-large {font-family: "Open Sans", sans-serif; font-weight: normal; font-size: min(7vh, 5.25vw);}
.fhw-opensans-large.portrait {font-size: min(7vh, 7vw);}
.fhw-opensans-head {font-family: "Open Sans", sans-serif; font-weight: normal; font-size: min(5.25vh, 4vw);}
.fhw-opensans-head.heavy {font-weight: bold;}
.fhw-opensans-head.portrait {font-size: min(5.25vh, 6vw);}
.fhw-opensans-medium {font-family: "Open Sans", sans-serif; font-weight: normal; font-size: min(3vh, 2.75vw);}
.fhw-opensans-medium.dense {line-height: 1.1em;}
.fhw-opensans-medium.heavy {font-weight: 700;}
.fhw-opensans-medium.portrait {font-size: min(3vh, 4vw);}
.fhw-opensans-title {font-family: "Open Sans", sans-serif; font-weight: lighter; font-size: min(2.25vh, 1.75vw);}
.fhw-opensans-title.dense {line-height: 1.1em;}
.fhw-opensans-title.heavy {font-weight: bold; letter-spacing: 0.5px;}
.fhw-opensans-title.lable {letter-spacing: 1.5px;}
.fhw-opensans-title.portrait {font-size: min(4vh, 4vw);}
.fhw-opensans-subtitle {font-family: "Open Sans", sans-serif; font-weight: lighter; font-size: min(2vh, 1.4vw);}
.fhw-opensans-subtitle.portrait {font-size: min(3vh, 3vw)}
.fhw-opensans-para {font-family: "Open Sans", sans-serif; font-weight: lighter; font-size: min(1.75vh, 1vw);}
.fhw-opensans-para.portrait {font-size: min(2vh, 2vw)}

/* Raleway with vh scale, but capped in width as well so that it looks nice on Mobile too */
.fhw-raleway-large {font-family: "Raleway", sans-serif; font-weight: normal; font-size: min(7vh, 5.25vw);}
.fhw-raleway-large.portrait {font-size: min(7vh, 7vw);}
.fhw-raleway-head {font-family: "Raleway", sans-serif; font-weight: normal; font-size: min(5.25vh, 4vw);}
.fhw-raleway-head.heavy {font-weight: bold;}
.fhw-raleway-head.portrait {font-size: min(5.25vh, 6vw);}
.fhw-raleway-medium {font-family: "Raleway", sans-serif; font-weight: normal; font-size: min(3vh, 2.75vw);}
.fhw-raleway-medium.dense {line-height: 1.1em;}
.fhw-raleway-medium.heavy {font-weight: 700;}
.fhw-raleway-medium.portrait {font-size: min(3vh, 4vw);}
.fhw-raleway-title {font-family: "Raleway", sans-serif; font-weight: lighter; font-size: min(2.25vh, 1.75vw);}
.fhw-raleway-title.dense {line-height: 1.1em;}
.fhw-raleway-title.heavy {font-weight: bold; letter-spacing: 0.5px;}
.fhw-raleway-title.lable {letter-spacing: 1.5px;}
.fhw-raleway-title.portrait {font-size: min(4vh, 4vw);}
.fhw-raleway-subtitle {font-family: "Raleway", sans-serif; font-weight: lighter; font-size: min(2vh, 1.4vw);}
.fhw-raleway-subtitle.portrait {font-size: min(3vh, 3vw)}
.fhw-raleway-para {font-family: "Raleway", sans-serif; font-weight: lighter; font-size: min(1.75vh, 1vw);}
.fhw-raleway-para.portrait {font-size: min(2vh, 2vw)}

.f-ptmono-subhead {font-family: 'PT Mono', monospace; font-weight: normal; font-size: 1.75vw}
.f-ptmono-title {font-family: 'PT Mono', monospace; font-weight: normal; font-size: 1.25vw}
.f-ptmono-para {font-family: 'PT Mono', monospace; font-weight: normal; font-size: 1vw}

/* Monospace fonts with vh scale */
.fh-ptmono-medium {font-family: 'PT Mono', monospace; font-weight: normal;font-size: 3vh;}
.fh-ptmono-para {font-family: 'PT Mono', monospace; font-weight: normal;font-size: 2vh;}
.fh-ptmono-low {font-family: 'PT Mono', monospace; font-weight: normal;font-size: 1.8vh;}
.fh-ptmono-small {font-family: 'PT Mono', monospace; font-weight: normal;font-size: 1.3vh;}

/* Fonts imported from www.theroot.tech/static/content/css/general.css */
.f-raleway-head {font-family: 'Raleway', serif;font-weight: 500;font-size: 200%;}
.f-raleway-medium {font-family: 'Raleway', sans-serif;font-weight: normal;font-size: 150%;}
.f-raleway-para {font-family: 'Raleway', sans-serif;font-weight: normal;font-size: 120%;}
.f-raleway-low {font-family: 'Raleway', sans-serif;font-weight: normal;font-size: 90%;}
.f-raleway-small {font-family: 'Raleway', sans-serif;font-weight: normal;font-size: 75%;}
.f-playfair-head {font-family: 'Playfair Display', serif;}
.f-playfair-head2 {font-family: 'Playfair Display', serif;font-weight: 500;font-size: 200%;}
.f-playfair-para {font-family: 'Playfair Display', serif;font-weight: normal;}
.f-playfair-subhead {font-family: 'Playfair Display', serif;font-weight: normal;font-size: 150%;}

/* raleway fonts that scale based on vh */
.fh-raleway-head {font-family: 'Raleway', serif;font-weight: 500;font-size: 5vh;}
.fh-raleway-medium {font-family: 'Raleway', sans-serif;font-weight: normal;font-size: 3vh;}
.fh-raleway-para {font-family: 'Raleway', sans-serif;font-weight: normal;font-size: 2vh;}
.fh-raleway-low {font-family: 'Raleway', sans-serif;font-weight: normal;font-size: 1.8vh;}
.fh-raleway-small {font-family: 'Raleway', sans-serif;font-weight: normal;font-size: 1.3vh;}

/* Font effects */
.f-underline {text-decoration: underline;}
.f-nowrap {white-space: nowrap;}
.f-outline-black {text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;}