/* main css! */
@import url(style.css);

:root {
	--body-width: 60vw;
}

body {
	background: var(--comp1);
	color: var(--comp3);
}

header,
main {
	margin: auto;
	max-width: var(--body-width);
}

wrapper {
	display: block;
}

a {
	color: var(--comp3);
}

header {
	margin-top: 10px;
	display: flex;
	flex-wrap: wrap;
	/* border: 1px solid red; */
	wrapper.header-left {
		flex: 1 1 200px;
		/* border: 1px solid yellow; */
		nav.socials {
			padding: 5px;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-around;
			align-items: center;
			a {
				display: block;
				background: var(--primary1);
				max-width: 50px;
				margin-bottom: 10px;
			}
			img {
				display: block;
			}
		}
	}
	hr {
		margin: 0;
		border: 0;
		border-bottom: 4px solid var(--accent2);
	}
	wrapper.header-right {
		flex: 1 1 77%;
		max-width: 100%;
		img.logo {
			display: block;
			margin: auto;
			max-width: 90%;
		}
	}
}