@import url('https://fonts.googleapis.com/css2?family=Cantarell:ital,wght@0,400;0,700;1,400;1,700&display=swap');

/* CSS RESET */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:inherit;font:inherit;vertical-align:baseline}a{text-decoration:none}html{font-size:12pt;font-family:sans-serif}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote::before,blockquote::after,q::before,q::after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}b,strong{font-weight:bold}i,em{font-style:italic}u{text-decoration:underline}select,option,optgroup,input,textarea,button{font:inherit}button{color:inherit}select:focus,select:focus-visible,input:focus,input:focus-visible,textarea:focus,textarea:focus-visible,button:focus,button:focus-visible{outline:none}
a,a:visited{color:inherit}

/* Core */
	a:hover {
		opacity: 0.8;
	}
	a:active {
		opacity: 0.6;
	}
	body {
		font-family: "Cantarell", sans-serif;
		font-size: 20px;
		line-height: 1.5;
	}
	h1, h2, h3, h4, h5, h6 {
		font-weight: bold;
		margin-bottom: 10px;
	}
	h1 { font-size: 56px; }
	h2 { font-size: 50px; }
	h3 { font-size: 44px; }
	h4 { font-size: 40px; }
	h5 { font-size: 36px; }
	h6 { font-size: 32px; }
	p {
		margin-bottom: 8px;
	}

	.text-center {
		text-align: center;
	}
	.text-left {
		text-align: left;
	}
	.text-right {
		text-align: right;
	}
	.text-justify {
		text-align: justify;
	}
	.text-big {
		font-size: 120%;
	}
	.text-small {
		font-size: 80%;
	}
	.text-faded {
		opacity: 0.5;
	}

/* Root */
	:root {
		--theme-color: #284f38;
		--theme-gray: #dfdfdf;
		--theme-card: #ebebeb;
	}

/* Layout */
	.section {
		max-width: 100%;
		overflow: hidden;
	}

	.container {
		max-width: 1280px;
		margin: auto;
		padding: 60px;
	}

	.spacer {
		height: 30px;
	}

	.row {
		display: flex;
		flex-wrap: wrap;
	}
	.row-v-center {
		align-items: center;
	}
	.row-h-center {
		justify-content: center;
	}
	.col {
		flex-grow: 1;
	}
	.col-1  { width: calc(8.3333%  - 30px); }
	.col-2  { width: calc(16.6667% - 30px); }
	.col-3  { width: calc(25%      - 30px); }
	.col-4  { width: calc(33.3333% - 30px); }
	.col-5  { width: calc(41.6667% - 30px); }
	.col-6  { width: calc(50%      - 30px); }
	.col-7  { width: calc(58.3333% - 30px); }
	.col-8  { width: calc(66.6667% - 30px); }
	.col-9  { width: calc(75%      - 30px); }
	.col-10 { width: calc(83.3333% - 30px); }
	.col-11 { width: calc(91.6667% - 30px); }
	.col-12 { width: calc(100%     - 30px); }

	.gap-1 { row-gap: 20px; column-gap: 20px; }
	.gap-2 { row-gap: 40px; column-gap: 40px; }
	.gap-3 { row-gap: 60px; column-gap: 60px; }

	@media only screen and (max-width: 980px) {
		.col-1  { width: calc(16.6667% - 30px); }
		.col-2  { width: calc(33.3333% - 30px); }
		.col-3  { width: calc(50%      - 30px); }
		.col-4  { width: calc(66.6667% - 30px); }
		.col-5  { width: calc(83.3333% - 30px); }
		.col-6  { width: calc(100%     - 30px); }
		.col-7  { width: calc(100%     - 30px); }
		.col-8  { width: calc(100%     - 30px); }
		.col-9  { width: calc(100%     - 30px); }
		.col-10 { width: calc(100%     - 30px); }
		.col-11 { width: calc(100%     - 30px); }
		.col-12 { width: calc(100%     - 30px); }
	}

	@media only screen and (max-width:768px) {
		.col-1  { width: calc(25%      - 30px); }
		.col-2  { width: calc(50%      - 30px); }
		.col-3  { width: calc(75%      - 30px); }
		.col-4  { width: calc(100%     - 30px); }
		.col-5  { width: calc(100%     - 30px); }
		.col-6  { width: calc(100%     - 30px); }
	}

/* Specific layout */
	.section-green {
		background-color: var(--theme-color);
		color: white;
	}
	.section-gray {
		background-color: var(--theme-gray);
	}

	.menu-container {
		padding-top: 5px;
		padding-bottom: 10px;
	}

	.menu {
		font-size: 16px;
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		text-align: center;
	}
	.menu .menu-item a {
		display: block;
		padding: 18px 15px;
	}

/* Components */
	.card {
		padding: 25px 15px;
		background-color: var(--theme-card);
		border-radius: 20px;
		box-shadow: 0 8px 10px #00000020;
	}

	.button.button {
		background-color: var(--theme-color);
		color: white;
		padding: 10px 40px;
		display: inline-block;
		border-radius: 4px;
	}

	.thumbnail-link {
		text-align: center;
		text-decoration: underline;
		font-weight: bold;
	}
	.thumbnail-link img {
		max-width: 150px;
		display: block;
		margin: 0 auto 15px;
		border: 1px solid black;
	}

	.calendar-placeholder {
		padding: 100px 20px;
		border: 1px solid #808080;
		border-radius: 10px;
		background-color: var(--theme-card);
	}

/* Header / Footer */
	.header {
		background-image: url("./images/cover.jpg");
		background-position: center;
		background-size: cover;
		position: relative;
		padding: 50px;
		line-height: 1.3;
		z-index: 0;
	}
	.header:after {
		content: "";
		display: block;
		z-index: -1;
		position: absolute;
		inset: 0;
		background-color: #333333b2;
	}
	.header p {
		margin: 0;
	}

	.header-logo {
		width: 30%;
		max-width: 220px;
		display: block;
		margin: 30px auto;
	}
	.header-title {
		color: white;
		text-align: center;
		font-size: 56px;
		font-weight: bold;
		position: relative;
	}
	.header-title-firstline {
		text-transform: uppercase;
		font-size: 64%;
	}
	.header-title-title {
		margin-bottom: 0.2em;
	}
	.header-title-subtitle {
		font-size: 46%;
	}
	.header-title-top-lines {
		position: relative;
		margin: 0 auto;
		max-width: 10.2em;
	}
	.header-title-top-lines:before,
	.header-title-top-lines:after {
		content: "";
		position: absolute;
		border-bottom: 0.05em solid white;
		width: 3.4em;
		top: -0.15em;
	}
	.header-title-top-lines:before {
		left: 0;
	}
	.header-title-top-lines:after {
		right: 0;
	}
	.header-title-bottom-line1,
	.header-title-bottom-line2,
	.header-title-bottom-line3 {
		position: relative;
		border-bottom: 0.05em solid white;
		margin: 0.25em auto;
	}
	.header-title-bottom-line1 {
		max-width: 7.6em;
	}
	.header-title-bottom-line2 {
		max-width: 4.3em;
	}
	.header-title-bottom-line3 {
		max-width: 2.9em;
	}

	.footer-logo {
		width: 40%;
		max-width: 400px;
		display: block;
		margin: 0 auto 20px;
		opacity: 0.2;
	}
	.footer-copyright {
		font-size: 18px;
		font-weight: bold;
		opacity: 0.4;
	}

	@media only screen and (max-width:980px) {
		.header-title {
			font-size: 44px;
		}
	}

	@media only screen and (max-width:768px) {
		.header-title {
			font-size: 30px;
		}
	}