:root {
	--white: #fff;
	--lightgrey: #F7FAFE;
	--darkgrey: #323232;
	--lightred: #FCE1EE;
	--lightred2: #F9BCDB;
	--pink: #DD2581;
	--lightblue: #0268D1;
	--lightblue2: #8CC5FF;
	--darkblue: #0D0064;
}

* {
	box-sizing: border-box;
}

html, body {
	margin: 0;
}

body {
	background-color: var(--lightgrey);
}

header #status-notification {
	background-color: var(--pink);
	color: var(--white);
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0 3rem 0 1rem;
	transition: 0.5s;

	> svg {
		position: absolute;
		right: 1rem;
		cursor: pointer;
		transition: 0.2s;

		&:hover {
			opacity: 0.75;
		}
	}
}

header #hero {
	min-height: 400px;
	margin: 1.5rem 16rem;
	border-radius: 1rem;
	padding: 1rem;
	position: relative;
	overflow: hidden;

	video {
	  position: absolute;
	  top: 50%;
	  left: 50%;
	  min-width: 100%;
	  min-height: 100%;
	  width: auto;
	  height: auto;
	  z-index: -1;
	  transform: translate(-50%, -50%);
	  object-fit: cover;
	  background-color: var(--lightblue);
	}

	#logo-container {
		height: 6rem;
		width: 100%;

		> img {
			height: 100%;
		}
	}

	#text-container {
		margin: 8rem 4rem;
		display: flex;
		flex-direction: column;
		gap: 1rem;

		> h1 {
			color: var(--white);
			margin: 0;
		}

		> p {
			line-height: 36px;
			color: var(--white);
			font-size: 1.25rem;
			margin: 0;
		}
	}
}

main #highlighted {
	padding: 4rem 16rem;

	> h1 {
		color: var(--darkblue);
	}

	> .card-big {
		background-color: var(--white);
		display: flex;
		max-height: 32rem;
		border-radius: 1rem;
		overflow: hidden;
		cursor: pointer;

		> .card-big-left {
			padding: 1rem;
			position: relative;
			min-width: 24rem;

			> h2 {
				margin-top: 4rem;
				color: var(--darkblue);
			}

			> p {
				line-height: 24px;
				color: var(--darkgrey);
			}

			> div.date-info {
				display: flex;
				flex-direction: column;
				gap: 0.5rem;

				> div {
					display: flex;
					gap: 0.25rem;
					align-items: center;

					> span {
						color: var(--darkblue);
						font-weight: 500;

						&.date {
							font-weight: 800;
						}
					}
				}
			}
		}

		> .card-big-right {

			> img {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}
	}

	> .small-card-container {
		margin-top: 2rem;
		display: flex;
		gap: 2rem;
		flex-wrap: wrap;

		> .card-small {
			flex: 1;
			background-color: var(--white);
			border-radius: 1rem;
			overflow: hidden;
			cursor: pointer;
			min-width: 18rem;

			&.article3 {
				display: none;
			}

			> .card-small-top {
				position: relative;

				> img {
					width: 100%;
				}
			}

			> .card-small-bottom {
				padding: 1rem;
				display: flex;
				flex-direction: column;;
				justify-content: space-between;
				gap: 0.5rem;

				> div.text-preview {
				    display: flex;
					flex-direction: column;
				    gap: 0.5rem;

					> h2 {
						color: var(--darkblue);
						margin: 0;
						font-size: 1.25rem;
					}

					> p {
						line-height: 24px;
						color: var(--darkgrey);
						margin: 0;
					}
				}

				> div.date-info {
					display: flex;
					flex-direction: column;
					gap: 0.5rem;

					> div {
						display: flex;
						gap: 0.25rem;
						align-items: center;

						> span {
							color: var(--darkblue);
							font-weight: 500;

							&.date {
								font-weight: 800;
							}
						}
					}
				}
			}
		}
	}

	.card-type {
		position: absolute;
		top: 1rem;
		left: 0;
		border-top-right-radius: 1rem;
		border-bottom-right-radius: 1rem;
		font-family: "Raleway", sans-serif;
		font-weight: 800;
		color: var(--darkgrey);
		font-size: 0.75rem;
		padding: 0.25rem 1rem;

		&.news {
			background-color: var(--lightred2);
		}

		&.events {
			background-color: var(--lightblue2);
		}
	}
}

main #article1, main #article2, main #article3, main #article4 {
	display: none;
	background-color: rgba(0, 0, 0, 0.75);
	width: 100vw;
	height: 100vh;
	position: fixed;
	inset: 0;
	padding: 5% 25%;

	> div {
		background-color: var(--lightgrey);
		max-height: 100%;
		overflow-y: scroll;
		padding: 2rem;
		/*
		border-radius: 1.5rem;
		scrollbar-width: none;
  		-ms-overflow-style: none;
		*/
		position: relative;

		> img {
			width: 100%;
			border-radius: 1.5rem;
			margin-top: -2rem;
		}

		> h1 {
			color: var(--darkblue);
			margin-top: 2.5rem;
			margin-bottom: 2.5rem;
		}

		> h2 {
			margin-bottom: -1.5rem;
			font-size: 1.25rem;
			color: var(--darkblue);
		}

		> ul {
			margin-top: 2rem;

			> li {
				line-height: 26px;
			}
		}

		> p {
			line-height: 26px;
			margin-top: 2rem;
			margin-bottom: 2rem;

			&.ingress {
				font-size: 1.25rem;
				line-height: 28px;
			}
		}

		a {
			font-weight: 800;
			color: var(--lightblue);
			text-decoration: none;
		}

		> a.article2-download {
			border-radius: 1.5rem;
			background-color: var(--pink);
			color: var(--white);
			font-weight: 800;
			padding: 0.5rem 1rem;
			margin-top: 2rem;
			cursor: pointer;
			transition: 0.2s;
			text-decoration: none;
			display: flex;
			justify-content: center;
			max-width: 22rem;
			text-align: center;

			&:hover {
				opacity: 0.75;
			}
		}

		> div.article-tags {
			display: flex;
			gap: 1rem;
			color: var(--darkblue);
			flex-wrap: wrap;
			align-items: center;

			> div {
				display: flex;
				gap: 0.25rem;
				align-items: center;
			}

			> span.news {
				background-color: var(--lightred2);
				border-radius: 1rem;
				font-family: "Raleway", sans-serif;
				font-weight: 800;
				color: var(--darkgrey);
				font-size: 0.75rem;
				padding: 0.25rem 1rem;
			}
		}

		> div.close-article {
			position: sticky;
			top: 1rem;
			left: 100%;
			margin-right: 1rem;
			width: 2rem;
			height: 2rem;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 50%;
			background-color: var(--lightred2);
			cursor: pointer;
			transition: 0.2s;
			box-shadow: 0 0 10px black;

			&:hover {
				opacity: 0.75;
			}
		}

		> div.event-contact {
			background-color: var(--white);
			padding: 1rem;
			border-radius: 2rem;
			display: flex;
			flex-direction: column;
			gap: 1rem;
			color: var(--darkgrey);

			> p {
				font-weight: 800;
			}

			> div {
				display: flex;
				flex-direction: column;
				gap: 0.5rem;

				> p.event-contact-name {
					font-weight: 800;
				}

				> a.event-contact-email {
					font-weight: 800;
					color: var(--lightblue);
					word-wrap: break-word;
				}
			}

			p, a {
				margin: 0;
			}
		}
	}
}

main #partner-with-hch {
	background-color: var(--lightblue);
	background-image: url("assets/kaaret_sininen.png");
	background-position: center;
	background-repeat: no-repeat;
	background-size: 110%;
	padding: 4rem 36rem;
	display: flex;
	flex-direction: column;
	gap: 2rem;
	align-items: center;

	> h1 {
		color: var(--white);
		text-align: center;
	}

	> .expand-card {
		background-color: var(--white);
		padding: 2rem;
		border-radius: 1rem;
		display: flex;
		gap: 2rem;
		width: 42rem;

		> .expand-card-left {
			display: flex;
			justify-content: center;
			align-items: center;

			> img {
				width: 100px;
				height: 100px;
			}
		}

		> .expand-card-right {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			gap: 0.5rem;

			> h3 {
				color: var(--darkblue);
				margin: 0;
				font-size: 1.25rem;
			}

			> p {
				margin: 0;
				line-height: 24px;
				color: var(--darkgrey);
				max-height: 0;
				overflow: hidden;
				transition: 0.5s;
				margin: 1rem 0;
			}

			> div {
				cursor: pointer;
			}

			> div a {
				font-weight: 800;
				color: var(--pink);
				transition: 0.2s;
				
				&:hover {
					opacity: 0.75;
				}

				> svg {
					transition: 0.5s;
				}
			}
		}
	}
}

main #partners {
	min-height: 32rem;
	padding: 4rem 16rem;

	> h1 {
		color: var(--darkblue);
		text-align: center;
	}

	> p {
		color: var(--darkgrey);
		text-align: center;
		margin: 0 20rem;
		font-weight: 500;
		line-height: 26px;
	}

	> .partner-card-container {
		margin-top: 4rem;
		display: flex;
		flex-wrap: wrap;
		gap: 2rem;
		justify-content: center;

		> .partner-card {
			background-color: var(--darkblue);
			border-radius: 1rem;
			padding: 1rem;
			width: 16rem;
			display: flex;
			flex-direction: column;
			align-items: center;
			min-height: 22rem;

			> div {
				display: flex;
				justify-content: center;
				align-items: center;
				height: 50%;

				> img {
					width: 80%;
				}
			}

			> p {
				height: 50%;
				margin: 0;
				color: var(--white);
				font-weight: 500;
				line-height: 20px;
			}
		}
	}
}

main #contact-us {
	background-color: var(--lightblue);
	min-height: 32rem;
	padding: 4rem 16rem;

	> h1 {
		color: var(--white);
		text-align: center;
	}

	> .contact-column-container {
		display: flex;
		justify-content: center;
		gap: 8rem;
		flex-wrap: wrap;

		> .contact-column {
			display: flex;
			flex-direction: column;
			align-items: center;

			> img {
				width: 16rem;
				border-radius: 50%;
			}

			> h2 {
				text-align: center;
				color: var(--white);
				font-size: 1.25rem;
				margin-bottom: 0.25rem;
			}

			> p {
				text-align: center;
				color: var(--white);
				margin: 0.25rem 0;
			}
		}
	}
}

main #join-hch {
	background-color: var(--lightred);
	padding: 4rem 16rem;
	background-image: url("assets/kaaret_vaaleanpunainen.png");
	background-position: center top;
	background-size: 110%;

	> h1 {
		color: var(--darkblue);
		text-align: center;
	}

	p {
		text-align: center;
		color: var(--darkgrey);
	}

	> form {
		display: flex;
		justify-content: center;
		gap: 1rem;
		margin-top: 4rem;

		> input {
			border: none;
			height: 3rem;
			min-width: 32rem;
			border-radius: 1.5rem;
			padding-left: 1.5rem;
			padding-right: 1.5rem;

			&#validator {
				display: none !important;
			}

		}

		> button {
			border: none;
			height: 3rem;
			border-radius: 1.5rem;
			background-color: var(--pink);
			color: var(--white);
			font-weight: 800;
			padding-left: 1.5rem;
			padding-right: 1.5rem;
			cursor: pointer;
			transition: 0.2s;
			min-width: 8rem;

			&:hover {
				opacity: 0.75;
			}

			> svg {
				margin-left: 0.25rem;
			}
		}
	}
}

footer {
	background-color: var(--darkblue);
	padding: 5rem 15rem 2rem 15rem;

	> .column-container {
		display: flex;
		gap: 4rem;
		width: 100%;
		justify-content: center;

		div {
			color: var(--lightred);
			min-width: 16rem;
			flex: 1;

			p {
				margin: 0.5rem 0;
			}

			div {
				margin-bottom: 2rem;
			}

			a {
				cursor: pointer;
				transition: 0.2s;

				&:hover {
					opacity: 0.75;
				}

				> img {
					width: 2rem;
				}
			}
		}

		.address {
			display: flex;
			flex-direction: column;

			> div {
				min-width: auto;

				&.logo-container {
					display: flex;
					justify-content: start;
				}
			}

			img {
				width: 50%;
				margin-top: 4rem;
			}
		}

		hr {
			border-color: var(--lightred);
			margin: 0;
		}
	}

	> .policy {
		display: flex;
		justify-content: center;
		color: var(--lightred);
		gap: 2rem;
		margin-top: 4rem;

		> a {
			color: var(--lightred);
			text-decoration: none;
			transition: 0.2s;

			&:hover {
				opacity: 0.75;
			}
		}

		> span {
			font-weight: 500;
		}
	}
}

h1, h2, h3, h4, p, a, span, button, li {
	font-family: "Raleway", sans-serif;
}

h1 {
	font-size: 2.5rem;
}

h1, h2, h3, h4, span {
	font-weight: 800;
}

p, li {
	font-weight: 500;
}

@media (max-width: 1750px) {
	main {
		#partner-with-hch {
			padding: 4rem 24rem;
		}

		#contact-us {
			padding: 4rem 16rem;
		}

		#partners > p {
			margin: 0 12rem;
		}
	}

	main #article1, main #article2 {
		padding: 10% 20%;
	}
}

@media (max-width: 1500px) {
	main {
		#highlighted,
		#partners,
		#contact-us,
		#join-hch {
			padding: 4rem 8rem;
		}

		#partner-with-hch {
			padding: 4rem 14rem;
		}

		#partner-with-hch {
			background-size: auto 110%;
		}

		#partners > p {
			margin: 0 8rem;
		}
	}

	header #hero {
		margin: 1.5rem 8rem;
	}
}

@media (max-width: 1250px) {
	main {
		#highlighted,
		#partner-with-hch,
		#partners,
		#contact-us,
		#join-hch {
			padding: 4rem 2rem;
		}

		#partners > p {
			margin: 0 2rem;
		}

		#join-hch > form {
			flex-direction: column;

			> input {
				min-width: initial;
			}
		}
	}

	header #hero {
		margin: 1.5rem;
	}

	footer {
		padding: 2rem;
		.column-container {
			flex-direction: column;
			gap: 0;

			.address {
				flex-direction: row;

				.logo-container {
					justify-content: end !important;
				}
			}
		}
	}
}

@media (max-width: 1000px) {
	main #highlighted .card-big {
		display: none;
	}

	main #highlighted .card-small.article3 {
		display: block !important;
	}

	main #article1, main #article2 {
		padding: 4rem 2rem;
	}
}

@media (max-width: 750px) {
	header #hero #text-container {
		margin: 8rem 2rem 2rem 2rem;
	}

	main #partner-with-hch .expand-card {
		flex-direction: column;
		width: auto;
	}

	footer .column-container .address .logo-container img {
		width: 100%;
		margin-top: 0;
	}

	main > div > div > h1 {
		font-size: 1.75rem;
	}

	main #contact-us {
		div.contact-column-container {
			gap: 2rem;
		}
	}
}

@media (max-width: 500px) {
	main #article1, main #article2 {
		padding: 0;
	}

	main #partners {
		padding: 4rem 1rem;

		> p {
			margin: 0;
		}
	}

	main #partners .partner-card-container {
		gap: 1rem;

		> .partner-card {
			min-height: 20rem;
			width: 10rem;
			
			> p {
				font-size: 0.75rem;
				line-height: 16px;
			}
		}
	}
}