/*
	VARIABLE FONT STUFF
*/

@font-face {
	  font-family: 'Bandeins Strange Variable';
	  src: url('../fonts/BandeinsStrangeVariableGX.ttf') format('truetype');
	  font-weight: 1 880;
}

@font-face {
	  font-family: 'Bandeins Sans Variable';
	  src: url('../fonts/BandeinsSansVariableGX.ttf') format('truetype');
	  font-weight: 1 880;
}

.strange {
	font-family: 'Bandeins Strange Variable', sans-serif;
	font-weight: 600;
}

.strange-light {
	font-family: 'Bandeins Strange Variable', sans-serif;
	font-weight: 300;
}

.sans {
	font-family: 'Bandeins Sans Variable', sans-serif;
	font-weight: 600;
}

.sans-light {
	font-family: 'Bandeins Sans Variable', sans-serif;
	font-weight: 300;
}


.stretchable .var {
	font-variation-settings: "wdth" 0;
	transition: font-variation-settings 1s ease;
}

.stretched .var {
	font-variation-settings: "wdth" 880;
	transition: font-variation-settings 1s ease;
}

/*@supports (font-variation-settings: normal) {
  DO SOMETHING
}*/

html, body {
	margin: 0;
	padding: 0;
}

span {
	margin: 0;
	padding: 0;
}

a {
	color: inherit;
	text-decoration: inherit;
	margin: 0;
	padding: 0;
}

img {
	width: 100%;
	height: auto;
	vertical-align: middle;
}

strong {
	font-weight: 600 !important;
}

/* HOMEPAGE */

.row { 
	min-width: 100vw;
	display: flex;
}
.pad10 {
	padding-bottom: 10px;
}

.pad20 {
	padding-bottom: 20px;
}

.pad40 {
	padding-bottom: 40px;
}

.pad60 {
	padding-bottom: 40px;
}

.content {
	align-items: stretch;
	margin-left: auto;
	margin-right: auto;
	padding: 0 30px;
}

.text {
	font-family: 'Bandeins Sans Variable', sans-serif;
	font-weight: 1;
	font-size: 15px;
	line-height: 1.5;
	min-width: 500px;
	max-width: 500px;
}

.img {
	min-width: 500px;
	max-width: 800px;
}

.video {
	width: 100%;
	min-width: 500px;
	max-width: 800px;
}

.videoContainer {
	width: 100% !important;
	height: auto;
}

.section {
	font-size: 16px;
	line-height: 1.5;
	margin: 0px;
}

.section:hover {
	background-image: linear-gradient(to right, rgba(255,255,0,0.8) 0%, rgba(255,255,0,0.8) 100%);
	background-position: 0px 1em;
	background-repeat: repeat-x;
	/*background-size: 4px 5px;*/
}

.title {
	font-size: 32px;
	margin-top: 100px;
}

.navbar {
	color: gray;
}

.nav {
	font-size: 14px;
	line-height: 1.5;
	margin: 0px;
}

a > .nav:hover {
	background-image: linear-gradient(to right, rgba(255,255,0,0.8) 0%, rgba(255,255,0,0.8) 100%);
	background-position: 0px 13px;
	background-repeat: repeat-x;
	/*background-size: 6px 5px;*/
	color: black;
}

a > .nav-aui:hover {
	background-image: linear-gradient(to right, #48ffa4 0%, #48ffa4 100%);
	background-position: 0px 13px;
	background-repeat: repeat-x;
	/*background-size: 6px 5px;*/
	color: black;
}

.subtitle {
	font-size: 24px;
	margin-top: 20px;
}

hr {
	border: 1px solid #48ffa4;
}

/*#firstRow {
	margin-top: 100px;
}
*/

#grid {
	margin-top: 4px;
	min-width: 500px;
	max-width: 500px;
}

#attr {
	font-size: 10px;
	text-align: center;
	margin-bottom: 20px;
    padding-top: 100px;
}

.turbolinks-progress-bar {
	height: 3px;
	background-color: yellow;
}

.bracketLink > a {
	font-family: 'IBM Plex Mono', monospace;
	font-size: 12px;
	font-style: italic;
	color: hsl(0, 0%, 50%);
	margin: 0;
	padding: 0;
	transition: padding ease 0.5s;
}

.bracketLink > a:hover {
	font-style: italic;
	padding: 0 5px;
}

.bracketLink::before {
	content: "[";
	color: black;
	font-size: 12px;
	font-family: 'IBM Plex Mono';
}

.bracketLink::after {
	content: "]";
	color: black;
	font-size: 12px;
	font-family: 'IBM Plex Mono';
}

.bodyLink {
	background-image: linear-gradient(to right, rgba(128,128,128,0.3) 50%, rgba(128,128,128,0.3) 100%);
	background-position: 0 0.9em;
	background-repeat: repeat-x;
	/*background-size: 4px 5px;*/
}

.bodyLink:hover {
	background-image: linear-gradient(to right, rgba(255,255,0,0.8) 0%, rgba(255,255,0,0.8) 100%);
	background-position: 0 0.9em;
	background-repeat: repeat-x;
	/*background-size: 4px 5px;*/
}

.auiLink {
	background-image: linear-gradient(to right, rgba(128,128,128,0.3) 50%, rgba(128,128,128,0.3) 100%);
	background-position: 0 0.9em;
	background-repeat: repeat-x;
	/*background-size: 4px 5px;*/
}

.auiLink:hover {
	background-image: linear-gradient(to right, #48ffa4 0%, #48ffa4 100%);
	background-position: 0 0.9em;
	background-repeat: repeat-x;
	/*background-size: 4px 5px;*/
}

/*.bodyLinkDotted {
	background-image: linear-gradient(to right, black 33%, rgba(255,255,255,0) 0%);
	background-position: bottom;
	background-size: 4px 1px;
	background-repeat: repeat-x;
}*/

.gridItem {
	border: 2px solid black;
	filter: grayscale(100%);
	transition: all 1s cubic-bezier(.25,.8,.25,1);
}

.gridItem:hover {
  	box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
  	filter: grayscale(0%);
  	opacity: 1;
  	transform: scale(1.02);
}

.gridLabel {
	padding: 10px;
	/*margin-bottom: 10px;*/
}

.gridTitle {
	font-size: 20px;
	font-family: 'Bandeins Sans Variable', sans-serif;
	padding-bottom: 3px;
}

.gridSubtitle {
	font-size: 12px;
	font-family: 'Bandeins Sans Variable', sans-serif;
	color: rgba(128, 128, 128, 1);}

.tileBackground {
	opacity: 0.75;
	transition: opacity 1s cubic-bezier(.25,.8,.25,1);
}

.tileBackground:hover {
	opacity: 1;
	filter: grayscale(0%);
}

ul, ol {
	padding-inline-start: 20px;
    margin-block-start: 5px;
}

blockquote {
	padding-left: 10px;
	margin-left: 0;
	border-left: 4px solid rgba(128, 128, 128, 0.3);
}

.footer {
	position: absolute;
	bottom: 0;
}

.downloadBox {
	background-color: rgba(128, 128, 128, 0.3);
	padding: 10px;
	color: black;
	font-family: 'Bandeins Sans Variable', sans-serif;
	font-variation-settings: "wght" 400;
	margin-right: 10px;
}

.downloadBox:hover {
	background-color: yellow;
}

.caption {
	font-family: 'Bandeins Sans Variable', sans-serif;
	font-size: 14px;
	text-align: center;
	padding-top: 5px;
}

.caption-big {
	font-family: 'Bandeins Sans Variable', sans-serif;
	font-size: 16px;
	text-align: center;
	padding-top: 5px;
}

.caption-small {
	font-family: 'Bandeins Sans Variable', sans-serif;
	font-size: 12px;
	padding-top: 5px;
}

.project {
	width: 500px;
	display: flex;
}

.project > .indicator {
	width: 200px;
	height: 200px;
	filter: grayscale(100%);
	margin-right: 20px;
}

.project > .indicator:hover {
	filter: grayscale(0%);
}

.projectText{
	font-family: 'Bandeins Sans Variable', sans-serif;
	font-weight: 1;
	font-size: 15px;
	line-height: 1.5;
}