@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300;400;500;600;700&display=swap');

:root {
	--primary: #2cbfc4;
	--primary-hover: #27abb0;
	--secondary: #1868a7;
	--secondary-hover: #155d96;
	--sun: #f5ad42;
}

body {
	font-family: "Comfortaa", sans-serif;
}

header {
	background-image: url("../images/relax.jpg");
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

@media only screen and (max-device-width: 1366px) {
	header {
		background-attachment: scroll;
	}
}

.btn-primary {
	background: var(--primary);
	border: var(--primary);
}

.btn-primary:hover, .btn-primary:active, .btn-primary:focus {
	background: var(--primary-hover) !important;
	border: var(--primary-hover) !important;
}

.btn-secondary {
	background: var(--secondary);
	border: var(--secondary);
}

.btn-secondary:hover, .btn-secondary:active, .btn-secondary:focus {
	background: var(--secondary-hover) !important;
	border: var(--secondary-hover) !important;
}

a {
	color: var(--primary);
}

a:hover {
	color: var(--primary);
}

.badge-primary {
	background: var(--primary);
}

.badge-secondary {
	background: var(--secondary);
}

.bg-primary {
	background: var(--primary) !important;
}

.bg-secondary {
	background: var(--secondary) !important;
}

a.text-secondary, a.text-secondary:hover {
	color: var(--secondary) !important;
}

footer a {
	color: var(--sun);
}

footer a:hover {
	color: var(--white);
}