:root {
    --white: #ffffff;
	--orange: #f58220;
	--dkgrey: #58595b;
	--mdgrey: #98999b;
	--ltgrey: #e2e3e4;
	--blue: #00a0dc;
	--yellow: #fdb913;
}

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

body {
	font-family: "Source Serif 4", serif;
	font-optical-sizing: auto;
	font-size:16px;
	color:var(--dkgrey);
	background-color:#f0f0f0;
}

a {
	text-decoration:none;
	color:var(--blue);
}

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


p {
	margin:15px 0;
}

h1, h2 {
	font-family: "Roboto", serif;
	margin:0;
	color:#000000;
}

h1 {
	font-size:24px;
}

h2 {
	font-size:20px;
}

.container {
	display:grid;
	position:relative;
	gap:10px;
	grid-template-areas:
		'header header'
		'main main'
		'item1 item2 '
		'item3 item4'
		'footer footer';
	align-items: stretch;
	padding:10px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

#header {
	grid-area:header;
	position:relative;
	height:7vh;
}

#logo {
	width:75%;
}

#langswitch {
	font-family: "Roboto", serif;
	position:absolute;
	right:10px;
	top:10px;
	font-size:22px;
	font-weight:bold;
	background: var(--blue);
	padding: 5px;
	border-radius: 5px;
	color: #fff;
}

#footer {
	grid-area:footer;
	height:7vh;
	text-align:center;
}

#footer .links {
	font-family:'Roboto',sans-serif;
	font-size:18px;
	text-transform: uppercase;
	padding:0 0 5px 0;
}

#footer .links a {
	display:inline-block;
	padding:0 5px;
}

#footer .copyright {
	font-size:12px;
}

#main {
	grid-area: main;
	height:calc(86vh - (100vw + 20px));
	border-radius:5px;
	padding:0 0 20px 0;
}

.events-page #main {
	grid-area: main;
	height:calc(86vh - 60px);
	border-radius:5px;
	padding:0 0 20px 0;
}

#cards {
	height:100%;
	overflow-y: auto;
	border-radius:5px;
}

.card {
	border-radius: 5px;
	padding:10px;
	margin:0 0 10px 0;
	background-color:#ffffff;
}

.card .category {
	font-size:12px;
	text-transform: uppercase;
	font-family: "Roboto", serif;
	font-weight:bold;	
	color:var(--orange);
}

.card .date {
	font-size:12px;
	text-transform: uppercase;
	font-family: "Roboto", serif;
	font-weight:bold;
	color:var(--mdgrey);
}

.more {
	text-align:right;
}

.more span {
	background:var(--blue);
	color:#ffffff;
	font-family: "Roboto", serif;
	font-weight:bold;
	padding:5px 10px;
	border-radius: 5px;
	text-transform:uppercase;
	text-decoration:none;
}

.item {
	background:#eeeeee;
	height:calc(50vw - 20px);
	border-radius: 5px;
	padding:10px;
	align-content:center;
	color:#ffffff;
	text-align:center;	
}

.item img {
	width:85%;
	height:auto;
	padding:15px;
}

.item-text {
	font-family: "Roboto", serif;
	font-size:12px;
	text-transform:uppercase;	
	text-align:center;	
}

.item a {
	text-decoration:none;
	color:var(--white);
}

.item a:hover {
	color:var(--orange);
}


#item1 {
	grid-area: item1;
	background-color:var(--orange);
}
#item2 {
	grid-area: item2;
	background-color:var(--blue);
}
#item3 {
	grid-area: item3;
	background-color:var(--yellow);
}
#item4 {
	grid-area: item4;
	background-color:var(--dkgrey);
}

.article {
	display:none;
}

/* article page */

.display-article .container {
	display:grid;
	position:relative;
	gap:10px;
	grid-template-areas:
		'header header header header'
		'main main main main'
		'item1 item2 item3 item4'
		'footer footer footer footer';
	align-items: stretch;
	padding:10px;
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.display-article #main {
	grid-area: main;
	height:calc(8vh - (25vw + 30px));
	overflow-y: auto;
}

.article {
	background:#ffffff;
	border-radius: 5px;
	padding:10px;	
}

.display-article .item {
	background:#eeeeee;
	height:calc(25vw - 20px);
	border-radius: 5px;
	padding:10px;	
}

.display-article .item img {
	width: 70%;
	height: auto;
	padding: 0;
}

/* resources page */

.resources .container {
	display:grid;
	position:relative;
	gap:10px;
	grid-template-areas:
		'header header header header'
		'main main main main'
		'item1 item2 item3 item4'
		'footer footer footer footer';
	align-items: stretch;
	padding:10px;
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.resources #main {
	grid-area: main;
	height: calc(86vh - (25vw + 30px));
	overflow-y: auto;
}

.article {
	background:#ffffff;
	border-radius: 5px;
	padding:10px;	
}

.resources .item {
	background:#eeeeee;
	height:calc(25vw - 20px);
	border-radius: 5px;
	padding:10px;	
}

.resources .item img {
	width: 70%;
	height: auto;
	padding: 0;
}