/*Roboto Flex (Google Fonts)*/
@import url('https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,slnt,wdth,wght,GRAD,XOPQ,XTRA,YOPQ,YTAS,YTDE,YTFI,YTLC,YTUC@8..144,-10..0,25..151,100..1000,-200..150,27..175,323..603,25..135,649..854,-305..-98,560..788,416..570,528..760&display=swap');

/*Orbitron (Google Fonts)*/
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400..900&display=swap');

/*DynaPuff (Google Fonts)*/
@import url('https://fonts.googleapis.com/css2?family=DynaPuff:wdth,wght@75..100,400..700&display=swap');

/*Handjet (Google Fonts)*/
@import url('https://fonts.googleapis.com/css2?family=Handjet:wght,ELGR,ELSH@100..900,1..2,0..16&display=swap');

/*Sixtyfour Convergence (Google Fonts)*/
@import url('https://fonts.googleapis.com/css2?family=Sixtyfour+Convergence:BLED,SCAN,XELA,YELA@0..100,-53..100,-100..100,-100..100&display=swap');

/*Playwrite Ireland (Google Fonts)*/
@import url('https://fonts.googleapis.com/css2?family=Playwrite+IE:wght@100..400&display=swap');

/*Gridlite (Rosetta)*/
@font-face {
	font-family: 'Gridlite';
  src: url('fonts/GridlitePEVFTRIAL-All.ttf') format('woff2-variations');
}

/*Fit (DJR)*/
@font-face {
	font-family: 'FitVariable';
  src: url('fonts/FitVariable-VF-Testing.woff2') format('woff2-variations');
}

/*Whoa Spine (FutureFonts)*/
@font-face {
	font-family: 'WhoaSpine';
  src: url('fonts/WHOA-Spine-v0.4.1.ttf') format('woff2-variations');
}

/*Whoa Top (FutureFonts)*/
@font-face {
	font-family: 'WhoaTop';
  src: url('fonts/WHOA-Top-v0.4.1.ttf') format('woff2-variations');
}

/*Science Gothic (GitHub)*/
@font-face {
	font-family: 'ScienceGothic';
  src: url('fonts/ScienceGothic[YOPQ,slnt,wdth,wght].ttf') format('woff2-variations');
}

/*Graduate (GitHub)*/
@font-face {
	font-family: 'Graduate';
  src: url('fonts/GRADUATE.ttf') format('woff2-variations');
}







:root {
	font-family: 'Roboto Flex';
  }

body {
	background-color: #f9e300;
	margin: 0;
	padding: 0;
	overflow-x: hidden;
}

body.hintergrundbild {
	background-image: url("pictures/cta-chicago-transit-authority-logo2.png");
	background-repeat: repeat;
	background-size: 300px;
	animation-name: hintergrund-animation;
	animation-duration: 2s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

@keyframes hintergrund-animation {
	from {background-position: 0 0;}
	to {background-position: -300px 0;}
}

header {
	height: 100vh;
}


.uebertitel-container {
	display: flex;
	position: relative;
	top: -110px;
	height: 400px;
	overflow: hidden;
}

h1 {
	margin: 0 0 0 100vw;
	font-size: 20rem;
	font-weight: 750;
	font-variation-settings: "slnt" -10;
	letter-spacing: 1rem;
	color: white;
	text-transform: uppercase;
	white-space: nowrap;
	position: absolute;
	animation-name: uebertitel-animation;
	animation-duration: 10s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

@keyframes uebertitel-animation {
	from {transform: translateX(0);}
	to {transform: translateX(calc(-100vw - 100%));}
}

.name-container {
	display: flex;
	position: relative;
	top: -250px;
	height: 100px;
	overflow: hidden;
}

.name-text {
	margin: 0 0 0 100vw;
	font-size: 5rem;
	font-weight: 750;
	font-variation-settings: "slnt" -10;
	letter-spacing: 1rem;
	color: white;
	text-transform: uppercase;
	white-space: nowrap;
	position: relative;
	animation-name: name-animation;
	animation-duration: 11s;
	animation-delay: 1s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

@keyframes name-animation {
	from {transform: translateX(0);}
	to {transform: translateX(calc(-100vw - 100%));}
}


#grund-flexbox {
	display: flex;
	justify-content: flex-start; 
	align-items: flex-start;
	flex-direction: column;
	position: relative;
}

.kategorientitel-container {
	display: flex;
	position: relative;
	height: 4rem;
	margin-top: 5rem;
	overflow: hidden;
}

.kategorientitel {
	margin: 0 0 0 100vw;
	font-size: 5rem;
	font-weight: 750;
	font-variation-settings: "slnt" -10;
	letter-spacing: 1rem;
	color: white;
	text-transform: uppercase;
	white-space: nowrap;
	position: relative;
	animation-name: kategorientitel-animation;
	animation-duration: 10s;
	animation-delay: 1s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

.sonstigevariationentitel {
	animation-delay: 2s;
}

@keyframes kategorientitel-animation {
	from {transform: translateX(0);}
	to {transform: translateX(calc(-100vw - 100%));}
}

a {
	width: 100%;
	text-decoration: none;
}

.untersite-linkbox {
	display: flex;
	justify-content: flex-start; 
	align-items: flex-start; 
	width: 100%;
	padding: 6px;
}


.bommeli {
	display: flex;
	justify-content: center; 
	align-items: center; 
	position: absolute;
	background-color: white;
	height: 28px;
	width: 28px;
	border-radius: 28px;
	font-size: 1rem;
	font-weight: 500;
	font-variation-settings: "wdth" 110;
	text-align: center;
}

.link-titel {
	padding: 3px 0 3px 38px;
	font-size: 1.2rem;
	font-weight: 650;
	font-variation-settings: "wdth" 110;
	letter-spacing: 0.04rem;
	color: white;
	transition-duration: 0.8s;
}

.untersite-linkbox:hover > .link-titel {
	font-variation-settings: "wdth" 110, "slnt" -10;
	letter-spacing: 0.5rem;
}




.red {
	background-color: #c60c30;
}

.blue {
	background-color: #00a1de;
}

.brown {
	background-color: #62361b;
}

.green {
	background-color: #009b3a;
}

.orange {
	background-color: #f9461c;
}

.pink {
	background-color: #e27ea6;
}

.purple {
	background-color: #522398;
}


.text-red {
	color: #c60c30;
}

.text-blue {
	color: #00a1de;
}

.text-brown {
	color: #62361b;
}

.text-green {
	color: #009b3a;
}

.text-orange {
	color: #f9461c;
}

.text-pink {
	color: #e27ea6;
}

.text-purple {
	color: #522398;
}