@font-face {
  font-family: 'Alexandria';
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/alexandria/v6/UMBXrPdDqW66y0Y2usFeai3dA5E64Bc.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


html {
	-webkit-box-sizing: border-box;
			box-sizing: border-box;
	font-size: 100%;
	line-height: 1.2;
	-webkit-text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	scroll-behavior: smooth;
}

*,
*::before,
*::after {
	box-sizing: inherit;
}

* {
	margin: 0;
	padding: 0;
}

body {
	background-color: #ebebeb;
	font-family: "Alexandria", sans-serif;
	font-optical-sizing: auto;
	font-weight: 300;
	font-style: normal;
	font-size: 14px;
	line-height: 18px;
	text-align: center;
}

strong {
	font-weight: 500;
}

header {
	background-color: #182027;
	height: 260px;
}

main {
	padding: 20px;
}

h1.main-logo {
	font-size: 0;
	line-height: 0;
	background: url(img/cga-logo.webp) center no-repeat;
	background-size: 282px;
	width: 100%;
	max-width: 350px;
  	height: 150px;
  	margin: 10px auto 30px;
}

picture {
	margin: auto;
}

img {
	max-width: 100%;
	height: auto;
}

@media (max-width: 389px) {

	h1.main-logo {
		background-size: 278px;
	}
}

h2,
h3 {
	font-size: 14px;
	line-height: 18px;
	font-weight: 300;
}

h2 {
	padding: 0 10px;
	margin: auto;
	max-width: 534px;
}

h3 {
	margin: 0 0 20px;
}

p {
	margin: 0 0 15px;
}

p:last-child {
	margin-bottom: 0;
}

.info {
	margin: 40px 0 0;
}

.panel {
	border: 1px solid #fff;
	border-radius: 10px;
	padding: 19px 10px;
	margin: 0 auto 20px;
	max-width: 534px;
}

a {
	color: #000;
	text-decoration: none;
	transition: color 0.25s ease-in-out;
}

a:hover {
	color: #2d7c11;
}

@media (min-width: 1024px) {

	html {
		height: 100%;
		align-content: center;
		background: linear-gradient(90deg,rgba(24, 32, 39, 1) 0%, rgba(24, 32, 39, 1) 50%, rgba(235, 235, 235, 1) 50%, rgba(235, 235, 235, 1) 100%);
	}

	body {
		display: flex;
		margin: auto;
	}

	body,
	h2,
	h3 {
		font-size: 16px;
		line-height: 19px;
	}

	.columns {
		display: flex;
		width: 100%;
		height: auto;
	}

	header,
	main {
		display: flex;
		width: 50%;
		height: auto;
	}
	.container {
		margin: auto;
	}

	h1.main-logo {
		margin: 0 auto 70px;
	}

	h2 {
		padding: 0 20px;
	}

	.info {
		margin: 80px 0 0;
	}

}

@media (min-width: 1440px) {

	picture {
		margin: auto 25px auto auto;
	}

	.container {
    	margin: auto auto auto 70px;
  	}

}