@import url(../fontawesome/css/all.min.css);
@import url(text.css);
@import url(navigation.css);
@import url(forms.css);
@import url(lists.css);
@import url(tables.css);
@import url(details.css);
@import url(features.css);
@font-face {
	font-family: 'Menu';
	src: url(../fonts/Poppins-Light.ttf);
}
@font-face {
	font-family: 'Main';
	src: url(../fonts/Inter_18pt-Light.ttf);
	font-weight: bold;
}
@font-face {
	font-family: 'Title';
	src: url(../fonts/Poppins-SemiBold.ttf);
}

* {
	margin-top: 0;
	box-sizing: border-box;
}
body {
	margin: 0;
	padding: 0;
	font-family: 'Main', sans-serif;
	font-size: 16px;
	line-height: 1.75;
	background-color: #F5F6FA;
	color: hsl(217, 10%, 55%);
	user-select: none;
}

/* HEADER */

header {
	height: 88px;
	display: flex;
	background-color: #F87745;
}
	header > * {
		flex-grow: 1;
	}
	header .title {
		padding: 24px;
		background-color: #F4A783;
		background-image: url(../images/header-left.svg);
		background-position: right;
		background-repeat: repeat-y;
		display: flex;
		align-items: center;
	}
		#logo {
			display: block;
			opacity: 0.9;
		}
		#logo:hover {
			opacity: 1;
		}
			#logo img {
				width: 120px;
				display: block;
			}
	header .separator {
		width: 106px;
		min-width: 106px;
		margin-right: -1px;
		flex-grow: 0;
		background-image: url(../images/header-separator.svg);
		background-size: auto 100%;
		background-repeat: no-repeat;
		background-position: right;
	}
	header .options {
		padding: 24px;
		background-color: #4A5B6B;
		background-image: url(../images/header-right.svg);
		background-position: left;
		background-repeat: repeat-y;
	}

/* CONTENT */

main {
	padding: 32px;
	min-height: 256px;
	background-image: linear-gradient(hsl(203, 15%, 90%), transparent 128px);
}
.container {
	max-width: 1280px;
	margin: auto;
}
.panel {
	background-color: #fff;
	border-radius: 8px;
	padding: 48px;
	box-shadow: 0 48px 48px -32px hsla(210, 75%, 18%, 0.25);
	position: relative;
	margin-bottom: 48px;
}
section {
	margin-bottom: 32px;
}

/* LAYOUT */

.row {
	display: flex;
	gap: 64px;
}
	.row > * {
		flex-grow: 1;
		flex-basis: 50%;
	}
.container > .row {
	gap: 32px;
}
	.container > .row .panel {
		margin-bottom: 32px;
	}

/* LOADING */

@keyframes Loading {
	0% {
		transform: rotate(0) scale(1);
	}
	50% {
		transform: rotate(180deg) scale(1.1);
	}
	100% {
		transform: rotate(360deg) scale(1);
	}
}
.loading {
	text-align: center;
	padding: 16px;
}
.loading > * {
	display: none !important;
}
.loading::before {
	content: '';
	display: inline-block;
	width: 40px;
	height: 40px;
	border: 16px solid rgba(0,0,0, 0.1);
	border-bottom-color: transparent;
	border-top-color: transparent;
	border-radius: 50%;
	animation-name: Loading;
	animation-duration: 1s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

/* ANIMATIONS */

@keyframes HeaderLeft {
	0% {
		opacity: 0;
		transform: translateY(24px);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}
#logo {
	animation-name: HeaderLeft;
	animation-duration: 1s;
	animation-iteration-count: 1;
}
@keyframes HeaderRight {
	0% {
		opacity: 0;
		transform: translateX(128px);
	}
	25% {
		opacity: 0;
		transform: translateX(128px);
	}
	100% {
		opacity: 1;
		transform: translateX(0);
	}
}
header nav {
	animation-name: HeaderRight;
	animation-duration: 1.5s;
	animation-iteration-count: 1;
}
	
@keyframes Panel {
	0% {
		opacity: 0;
		transform: translateY(-32px);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}
.panel {
	animation-name: Panel;
	animation-duration: 1s;
	animation-iteration-count: 1;
}

/* FOOTER */

footer {
	padding: 48px 32px; 
	background-color: hsl(209, 18%, 87%);  
	color: hsl(217, 10%, 43%);  
	font-size: 90%; 
}
	footer .container {
		display: flex;
		justify-content: space-between;
		align-items: center; 
	}
	footer .container *:last-child {
		text-align: right;
		font-size: 95%; 
	}
		footer section {
			margin-bottom: 0;
		}
			footer h4,
			footer p { 
				margin-bottom: 8px; 
			}
			footer span {
				font-size: 90%; 
			}