/* prometo */
@font-face {
	font-family: 'prometo';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('https://static.formulastudent.de/dist/prometo/WebStaticFonts/Prometo_W_Rg.woff2') format('woff2');
}
/* Font Awesome 5 */
@font-face {
	font-family: 'Font Awesome 5 Duotone';
	font-style: normal;
	font-weight: 900;
	font-display: swap;
	src: url('https://static.formulastudent.de/fsg/fa/fa-duotone-900.woff2') format('woff2');
}
:root {
	color-scheme: light dark;

	--fsg_yellow_gold: 	#FDD315; /* rgb(253,211,21)	*/
	--fsg_red:  		#E40E1B; /* rgb(228,14,27)	*/
	--fsg_black: 		#1D1D1B; /* rgb(29,29,27)	*/
	--fsg_green_cv: 	#76B82A; /* rgb(118,184,42)	*/
	--fsg_yellow_ev: 	#FFDD00; /* rgb(0,136,182)	*/
	--fsg_cyan_dvc:		#0088B6; /* rgb(253,211,21)	*/
	--fsg_cyan_dve:		#5FC4E1; /* rgb(95,196,225)	*/
	--fsg_blue_judge:	#0069B4; /* rgb(0,105,180)	*/
}
@media (prefers-color-scheme: light) {
	:root {
		--text-color:			#2e2f3e;
		--text-h1:				var(--fsg_blue_judge);
		--background-color: 	#f0f0f0;
		--background-color2:	white;
		--background-color3:	lightgray;
	}	
}
@media (prefers-color-scheme: dark) {
	:root {
		--text-color: 			white;
		--text-h1:				var(--fsg_yellow_gold);
		--background-color: 	#26292d;
		--background-color2:	#393e44;
		--background-color3:	var(--fsg_black);
	}
}

*,
*:before,
*:after {
	box-sizing: border-box;
}
body {
	color: var(--text-color);
	background-color: var(--background-color);
	font-family: "Verdana", sans-serif;
    font-size: 0.9em;
	line-height: 1.4;
	display: flex;
	min-height: 100vh;
	flex-direction: column;
	margin: 0;
}
h1 {
	color: var(--text-h1);
	margin: 20px 0 20px 0;
	font-family: prometo, sans-serif;
	font-weight: 400;
	line-height: 1.5;
    font-size: 3em;
    text-align: center;
}
a {
	color: var(--text-h1);
	text-decoration-color: var(--fsg_red,red);
	text-decoration-line: underline;
}
a:hover {
	color: var(--fsg_red,red);
}
#container{
  margin-top: 15px;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}
#card {
    background-color: var(--background-color2);
    padding: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
#card img {
	width: 300px;
}
div#txt {
    max-width: 750px;	
    margin-bottom: 20px;
    text-align: justify;
    padding: 15px;
}
div#links {
    width: 95%;
    max-width: 750px;
    font-size: 1.3em;
}
#links ul {
	padding:0px;
	margin: 0px;
	list-style-type: none;
	display: flex;
    flex-direction: row;
    justify-content: space-around;
}
#links ul {
	margin: 10px;
}
div#footer {
	background-color: var(--background-color3);
    font-size: 0.8em;
}
#footer ul {
	padding:0px;
	margin: 0px;
	list-style-type: none;
	display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}
/*#################
# duotone icons
#################*/
.duotone {
	position: relative;
	padding-left: 1.1em;
    margin-left: 1.5em;
	--fa-primary-color: var(--text-color);
	--fa-secondary-color: var(--fsg_red);
	--fa-primary-opacity: 1;
	--fa-secondary-opacity: 1;
}
.duotone:hover {
	--fa-primary-color: var(--fsg_red);
	--fa-secondary-color: var(--fsg_yellow_gold);
}
.duotone::before,
.duotone::after {
	font-family: "Font Awesome 5 Duotone";
	font-weight: 900;
	text-align: center;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	position: absolute;
	left: 0px;
	top: -3px;
}
.duotone::before {
	color: var(--fa-primary-color, inherit);
	opacity: var(--fa-primary-opacity, 1.0);
}
.duotone::after {
	color: var(--fa-secondary-color, inherit);
	opacity: var(--fa-secondary-opacity, 0.4);
}
.link-external::before,
.link-external::after,
.link-external-blank::before,
.link-external-blank::after {
    font-size: 0.8em;
    top: 0px;
}
.link-external::before,
.link-external-blank::before {
	content: "\10f08e";
}
.link-external::after,
.link-external-blank::after {
	content: "\f08e";
}
.user::before {
	content: "\f007";	
}
.user::after {
	content: "\10f007";
}
.user-cog::before {
	content: "\f4fe";
    left: -10px;
}
.user-cog::after {
	content: "\10f4fe";
    left: -10px;
}

@media only screen and (max-width:800px) {
	.duotone {
		margin-left: 0em;
	}
	#card {
		width: 100%;
	}
	#container {
    	margin-top: 0px;
	}
}
@media only screen and (max-width:600px) {
	h1 {
		line-height: 1.2;
    	font-size: 7.5vw;
    }
}
@media only screen and (max-width:460px) {
    #card img {
    	width: 70%;
    }
    div#txt {
    	padding: 0px; 
	}
}