@font-face {
	font-family: 'Roboto';
	src: url('./resources/fonts/Roboto-Italic.woff2') format('woff2'),
		url('./resources/fonts/Roboto-Italic.woff') format('woff');
	font-weight: normal;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'Roboto';
	src: url('./resources/fonts/Roboto.woff2') format('woff2'),
		url('./resources/fonts/Roboto.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

* {
	margin: 0;
}

html {
	height: 100%;
	font-family: "Roboto", system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

body {
	height: 100%;

	display: grid;

	grid-template-rows: 1fr 6fr;
	grid-template-columns: 1fr 4.5fr;

	grid-template-areas:
		"sidebar header"
		"sidebar main-content";
}

.sidebar {
	padding: 1.2rem;
	background-color: #1992d4;
	color: white;

	grid-area: sidebar;
}

.sidebar img {
	filter: invert();
}

.branding {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 1em;
}

.branding img {
	max-height: 3em;
}

.sidebar-links {
	display: grid;
	padding-top: 3.1rem;
}

.sidebar-link {
	display: flex;
	gap: 0.9em;
	min-height: 5ch;

	align-items: center;
}

.sidebar-link img {
	max-height: 1em;
	filter: invert();
}

.sidebar-link a {
	text-decoration: none;
	color: white;
	font-weight: 600;
}

.header {
	padding: 1rem 2rem;
	grid-area: header;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 1.5rem;
}

.header-section {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 6em;
}

.searchbar {
	display: flex;
	flex: 1;
	gap: 1rem;
}

.searchbar input[type="search"] {
	flex: 1;
	background-color: #e2e8f0;
	border: none;
	border-radius: 16px;
	max-width: 500px;
}

.search-section input[type="image"] {
	max-height: 1.6rem;
}

.user-controls {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	text-align: center;

	padding: 0 0.5rem;
	gap: 1.3rem;
}

.user-controls h3 {
	white-space: nowrap;
}

.user-controls img {
	max-height: 2.5rem;
}

.greeting {
	display: flex;
	align-items: center;
	gap: 1em;
}

.greeting img {
	max-height: 4rem;
}

.projects-controls {
	flex: 1;
	display: flex;
	justify-content: flex-end;
	gap: 1.2em;
}

.projects-controls [type="button"] {
	border: none;
	border-radius: 24px;
	background-color: #1992d4;
	color: white;
	padding: 1em 3em;
}

.main-content {
	grid-area: main-content;

	display: grid;
	grid-template-areas:
		"your-projects announcements"
		"your-projects trending";

	grid-template-rows: repeat(2, 1fr);
	grid-template-columns: 2.5fr 1fr;

	gap: 1.5rem;

	background-color: #e2e8f0;

	padding: 2rem 1.5rem 3rem;
}

.your-projects,
.announcements,
.trending {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.cards-container,
.announcements-container,
.trending-container {
	flex: 1;
	border-radius: 0.8rem;
}

.your-projects {
	grid-area: your-projects;
}

.cards-container {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: repeat(3, 1fr);
	gap: 1em;
}

.project-card,
.announcements-container,
.trending-container {
	background-color: white;
}

.project-card {
	border-left: 0.6rem solid #f0b429;
	border-radius: 0.8rem;
	padding: 2rem 1.2rem;

	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.project-controls {
	align-self: flex-end;
	padding: 0 2rem 0 0;

	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
}

.card-text h2 {
	margin-block-end: 0.5rem;
}

.project-controls input[type="image"] {
	height: 1.5rem;
}

.announcements-container {
	display: grid;
	grid-template-rows: repeat(3, 1fr);
	padding: 2rem;
}

.announcement {
	display: flex;
	flex-direction: column;
}

.announcement h3 {
	margin-block-end: 0.5rem;
}

.announcement hr {
	align-self: flex-end;
	width: 100%;
	margin-top: auto;
	margin-bottom: auto;
	max-height: 1px;
}

.trending {
	grid-area: trending;
}

.trending-container {
	padding: 1.2rem;

	display: grid;
}

.container-item {
	display: flex;
	gap: 1rem;
	align-items: center;
}

.container-item img {
	max-height: 7ch;
}