/* Default theme*/
:root {
	--bg-color: #011627;
	--text-color: #D9BCAF;
	--link-bg: #8A9688;
	--link-hover-bg: #795663;
	--link-hover-text: #CFC4B1;
	--fieldset-bg: #283D3B;
	--warning-color: #795663; 
}

/* Light theme*/
.theme-light {
	--bg-color: #EDECDE;
	--text-color: #000000;
	--link-bg: #6BB1AD;
	--link-hover-bg: #E6948E;
	--link-hover-text: #EDECDE;
	--fieldset-bg: #A7BCBD;
	--warning-color: #ACAFC8;
}

/* Pastel theme*/
.theme-pastel {
	--bg-color: #B3977D;
	--text-color: #e0e0e0;
	--link-bg: #907557;
	--link-hover-bg: #463618;
	--link-hover-text: #F2DFC3;
	--fieldset-bg: #907557;
	--warning-color: #6A5A30;
}

/* Blue theme*/
.theme-blue {
	--bg-color: #0a192f;
	--text-color: #ccd6f6;
	--link-bg: #1e3a8a;
	--link-hover-bg: #1e40af;
	--link-hover-text: #60a5fa;
	--fieldset-bg: #112240;
	--warning-color: #141414;
}

/* Ocean Teal Neo Bathroom theme (found on pintrest xD)*/
.theme-OceanTealNeoBathroom {
	--bg-color: #748B9E;
	--text-color: #F1F1F1;
	--link-bg: #C39D9C;
	--link-hover-bg: #3F809A;
	--link-hover-text: #C39D9C;
	--fieldset-bg: #697C70;
	--warning-color: #9090AE;
}

/* Heartstory theme (found on pintrest xD)*/
.theme-Heartstory {
	--bg-color: #A9835C;
	--text-color: #3F1816;
	--link-bg: #C39D9C;
	--link-hover-bg: #3F809A;
	--link-hover-text: #C39D9C;
	--fieldset-bg: #E5AA7B;
	--warning-color: #9090AE;
}

/* Standart HTML Elements*/
* {
	font-family: monospace;
	background-color: var(--bg-color);
	color: var(--text-color);
}

main {
	max-width: 1200px;
	background: transparent;
	margin: 0 auto;
}

p, label, span, a, div {
	background: transparent;
}

fieldset {
	max-width: 500px;
	background: var(--fieldset-bg);
	border-radius: 20px;
	text-align: center;
	border-color: transparent;
	margin: 0 auto;
}

legend {
	text-align: center;
	margin: 0 auto;
}

h3, h2 {
	background: transparent;
	margin: 0 auto; /*needed for Firefox*/
}

/* Classes*/
.center-Text {
	text-align: center;
	align-content: center;
}

.quick-links {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 0px 5px;
}

.quick-links a {
	padding: 5px 10px;
	font-size: 1.5rem;
	background-color: var(--link-bg);
}

.quick-links a:hover {
	padding: 5px 10px;
	font-size: 1.5rem;
	background-color: var(--link-hover-bg);
	color: var(--link-hover-text);
	box-shadow:  10px 10px 60px var(--link-hover-bg),
				-10px -10px 60px var(--link-hover-bg);
}

.quick-link-Button-Element {
	text-decoration: none;
	border-radius: 50px;
	margin: 5px;
	
	transition: all 0.3s ease;
}

.warning {
	max-width: 900px;
	padding: 2px 8px;
	border-radius: 15px;
	background: var(--warning-color);
	margin: 0 auto;
}

.theme-picker {
	position: fixed;
	top: 10px;
	right: max(10px, calc(50% - 600px + 10px));
	z-index: 1000;
	padding: 2px 8px;
	border-radius: 25px;
	background-color: transparent;
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px); /*needed for Safari */
}

.theme-picker select {
	color: var(--text-color);
	border: none;
	padding: 4px;
	border-radius: 25px;
	background-color: transparent;
	margin-left: 5px;
	max-width: 80px;
	overflow: hidden; 
	text-overflow: ellipsis;
}