@import url('https://fonts.googleapis.com/css2?family=Poppins&family=Flavors&display=swap');

* {
	margin: 0px;
	padding: 0px;
	box-sizing: border-box;
	font-family: Poppins;
}

h1, h2, h3 {
	font-family: Flavors;
}

@media (orientation: portrait) {
	:root {
		--bg-url: url("/assets/horizontal-bg.svg");
	}
}
@media (orientation: landscape) {
	:root {
		--bg-url: url("/assets/horizontal-bg.svg");
	}
}

:root {
	--main-bg: 		rgba(58, 79, 82, 0.5); /*#3A4F52*/
	--main-txt: 	#E5D4CD; /*#E5D4CD*/
	--second-bg:	#C1115A;
	--second-bg-t:	rgba(83, 4, 35, 0.7); /*#C1115A*/
	--second-txt:	#F8C6C9;
	--controllers-main:	#21282E; 
	--blur-color : linear-gradient(transparent, #F8C6C9);
}

:root {
	background-color: var(--main-bg);
	background-image: var(--bg-url);
	background-size: cover;
	background-repeat: repeat-y;
}

body {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.main-color {
	background-color: var(--main-bg);
	color: var(--main-txt);
}

.second-color {
	background-color: var(--second-bg);
	color: var(--second-txt);
}