/* /- COLORS-start -/ */

:root {
	--color-background-light: #f8f1e5;
	--color-background-dark: #f7e0d4;
	--color-title-light: #678ffe;
	--color-title-dark: #315eda;
	--color-text-light: #f4f4f4;
	--color-text-dark: #342b09;
	--color-section-light: #f4f4f4;
	--color-section-dark: #d2d2d2;
	--height-menu: 50px;
	--height-title: 7vh;
}

* {
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}

body {
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	font-size: 10px;
	min-width: 450px;
	min-height: 250px;
	background: var(--color-background-light);
	line-height: 1.6;
}

h1 {
	font-size: 2em;
	font-weight: 700;
}

h2 {
	font-size: 1.6em;
}

h3 {
	font-size: 1.4em;
}

h4 {
	font-size: 1.2em;
}

h5 {
	font-size: 1.1em;
}

h6 {
	font-size: 1.05em;
}

a,
a:visited {
	text-decoration: none;
	font-weight: 700;
	color: var(--color-text-light);
	transition: color 0.4;
}

a:hover {
	cursor: pointer;
	color: var(--color-text-dark);
	transition: color 0.4;
}

.btn {
	margin-top: 10px;
	padding: 10px 15px;
	background-color: var(--color-title-light);
	color: var(--color-text-light);
	border: 1px solid var(--color-title-dark);
	border-radius: 10px;
}

.btn:hover {
	background-color: var(--color-title-dark);
	color: var(--color-text-dark);
	border: 1px solid var(--color-section-light);
	transition: 0.5s linear;
}
.shadow {
	color: var(--color-text-light);
	text-shadow: -1px 0 var(--color-title-dark), 0 1px var(--color-title-dark), 1px 0 var(--color-title-dark),
		0 -1px var(--color-title-dark);
}

main {
	max-width: 1600px;
	margin: 0 auto;
}

.container {
	width: 100%;
}

/* /- MEDIA-/ */

@media (min-width: 450px) and (min-height: 360px) {
	body {
		font-size: 11px;
	}
}

@media (min-width: 500px) and (min-height: 400px) {
	body {
		font-size: 12px;
	}
}

@media (min-width: 600px) or (min-height: 400px) {
	body {
		font-size: 13px;
	}
}

@media (min-width: 800px) or (min-height: 600px) {
	body {
		font-size: 16px;
	}
}