/* Para font */
@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-VariableFont_wght.ttf') format('truetype');
    font-weight: 400 500 700;
    font-style: normal;
}

/* Clean Rubik */
@font-face {
    font-family: 'Rubik';
    src: url('../fonts/Rubik-VariableFont_wght.ttf') format('truetype');
    font-weight: 600 700;
    font-style: normal;
}

/* Typewriter */
@font-face {
    font-family: 'Special Elite';
    src: url('../fonts/SpecialElite-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}



/* Default styling */
body {
	color: #f0f0f0;
	background-color: #101010;
	line-height: 1.4em;
	font-family: 'Montserrat';

    background-image: url('../images/index/tilted_screenshots_background_blurred.jpg');
    background-size: 100% auto;
    background-repeat: repeat-y;
    background-position: center top;
}

/* Don't color/underline links */
a {
  color: inherit;
  text-decoration: none;
}

h1 {
	font-family: "Rubik", sans-serif;
	/*text-transform: lowercase;*/
	color: #f0f0f0;
	line-height: 0.95;
}

h2 {
	font-family: "Rubik", sans-serif;
	/*text-transform: lowercase;*/
	line-height: 1.0;
}

h3 {
	font-family: "Rubik", sans-serif;
	/*text-transform: lowercase;*/
	line-height: 1.0;
	font-size: calc(1.1rem + .5vw);
}

/* Final elements don't have lower margin */
div p:last-child {
    margin-bottom: 0;
}
div h2:last-child {
    margin-bottom: 0;
}

/* Generic button for About, etc. */
.generic-button {
	background-color: #f0f0f0;
	color: #101010;
	text-transform: uppercase;
	border-radius: 7px;
	font-family: "Rubik", sans-serif;
}
.generic-button:hover {
	background-color: #909090;
}

/* Anything with the font of all our buttons */
.button-font {
	text-transform: uppercase;
	font-family: "Rubik", sans-serif;
}

/* Front-page top categories */
.category-button {
	background-color: #f0f0f0;
	color: #101010;
	text-transform: uppercase;
	border-radius: 7px;
	font-family: "Rubik", sans-serif;
}
.category-button:hover {
	background-color: #909090;
}

/* Colored button */
.standard-button {
	text-transform: uppercase;
	color: #f0f0f0;
	background-color: #ff494f;
	font-family: "Rubik", sans-serif;
	font-weight: 700;
}
.standard-button:hover {
	background-color: #9e2d31;
}

/* Video capsule below-label */
.capsule-label {
	text-transform: uppercase;
	font-weight: bold;
	font-size: 20px;
}

/* Any element that glows when mouseovered */
.brighten-on-hover {
    filter: brightness(1.0);
    transition: filter 0.2s;
}
.brighten-on-hover:hover {
	filter: brightness(1.2);
}

/* Any element that glows and grows when mouseovered */
.glow-grow-on-hover {
    filter: brightness(1.0);
    transition: filter 0.15s, transform 0.15s;
}
.glow-grow-on-hover:hover {
	filter: brightness(1.1) drop-shadow(0px 0px 30px #ffffff30);
	transform: scale(1.01);
}

/* Image or video within a 6-pack. */
.six-pack-media {
	box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
}


/* Post Capsules */
.post-capsule-dark h2 {
	color: #101010;
	text-transform: none;
	font-weight: 600;
}
.post-capsule-dark h3 {
	color: #101010;
	text-transform: none;
	font-weight: 600;
}
.post-capsule-dark p {
	color: #101010;
	font-weight: 500;
}
.post-capsule-light h2 {
	color: #15d2e5;
	text-transform: none;
	font-weight: 600;
}
.post-capsule-light h3 {
	color: #15d2e5;
	text-transform: none;
	font-weight: 600;
}
.post-capsule-light p {
	color: #f0f0f0;
	font-weight: 500;
}
.triangle-top {
	position: relative;
}
.triangle-child {
  position: absolute;
  top: -15px;
  left: 0;
  width: 100%;
  height: 32px;
  background: var(--triangle-color);
  clip-path: polygon(0 40%, 100% 0, 100% 60%, 0 100%);
  z-index: 1;
}
p.post-capsule-date {
	font-size: 0.9em;
	line-height: 1.0em;
	text-transform: uppercase;
	font-weight: 700;
	margin-bottom: 8px;
}
.post-capsule-haiku p {
	font-size: 1.5em;
	line-height: 1.25em;
	font-family: "Special Elite";
}