*,
::after,
::before {
	box-sizing: border-box;
	padding: 0;
	margin: 0;
	background: 0 0;
	text-decoration: none;
	outline: 0;
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	font-weight: inherit;
	color: inherit;
	touch-action: manipulation;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-feature-settings: "onum", "kern", "liga", "clig", "calt";
	transition-delay: 0ms;
	transition-duration: 150ms;
	transition-property: none;
	transition-timing-function: ease-out
}


:root {
	--c-bg: white;
	--c-text: black;
	--f-family: "Raleway", Helvetica, Arial, sans-serif;
	--f-size: 14px;
	--f-height: 20px;
	--f-weight: 300;
	--spacer: 1rem;
	--f-scale-s: 0.8;
	--f-scale-m: 1.25;
	--f-scale-l: 1.563;
	--f-scale-xl: 1.953;
	--f-scale-xxl: 2.441;
	font-size: var(--f-height);
	font-family: var(--f-family);
	font-weight: var(--f-weight);
	background: var(--c-bg);
	color: var(--c-text)
}

@media (prefers-color-scheme:dark) {
	:root {
		--c-bg: black;
		--c-text: white
	}
}

@media (min-width:450px) {
	:root {
		--spacer: 0.5rem;
		--f-size: 18px;
		--f-height: 24px
	}
}

@media (min-width:1150px) {
	:root {
		--f-size: 22px;
		--f-height: 30px
	}
}

body {
	font-size: var(--f-size);
	line-height: var(--f-height)
}


@media (min-width:650px) {
	
}

@media (min-width:900px) {
	
}

@media (min-width:1400px) {
	
}

.menu {
	font-size: 14px;
	line-height: 20px;
	padding: var(--spacer);
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	font-weight: 700;
	gap: var(--spacer)
}

@media (min-width:450px) {
	.menu {
		font-size: 18px;
		line-height: 24px
	}
}

@media (min-width:1150px) {
	.menu {
		font-size: 22px;
		line-height: 30px
	}
}

.menu-title {
	grid-column: span 2
}

.menu-item {
	justify-self: start;
	text-align: left;
	border: 0;
	transition: opacity 150ms;
	cursor: pointer
}

.menu-item:hover {
	opacity: .25
}

.info {
	font-size: 14px;
	line-height: 20px;
	width: 100%;
	min-height: 100vh;
	padding: 0 var(--spacer) var(--spacer);
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem var(--spacer);
	position: relative;
	grid-template-areas: "bio bio""services clients""contacts .""footer footer";
	align-items: start;
	align-content: start;
	grid-template-rows: auto auto auto;
	opacity: 0;
	transition: transform 500ms ease-in-out, opacity 500ms ease-in-out;
	transform: translateY(-1rem)
}

@media (min-width:450px) {
	.info {
		font-size: 18px;
		line-height: 24px
	}
}

@media (min-width:1150px) {
	.info {
		font-size: 22px;
		line-height: 30px
	}
}

.animate .info {
	opacity: 1;
	transform: initial
}

@media (min-width:950px) {
	.info {
		grid-template-areas: "bio bio services contacts""bio bio clients contact";
		grid-template-columns: repeat(4, 1fr);
		grid-template-rows: auto 1fr
	}
}

@media (min-width:1400px) {
	.info {
		grid-template-columns: repeat(5, 1fr);
		grid-template-areas: "bio bio services clients contacts";
		grid-template-rows: auto
	}
}

.bio {
	grid-area: bio;
	padding: 1rem;
}

.services {
	grid-area: services;
	padding: 1rem;
}

.clients {
	grid-area: clients;
	padding: 1rem;
}

.contacts {
	grid-area: contacts;
	padding: 1rem;
}

.info-title {
	font-size: 14px;
	line-height: 20px;
	font-weight: 700;
	margin-bottom: .5rem;
	padding-top: var(--spacer)
}

@media (min-width:450px) {
	.info-title {
		font-size: 18px;
		line-height: 24px
	}
}

@media (min-width:1150px) {
	.info-title {
		font-size: 22px;
		line-height: 30px
	}
}

.footer {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--spacer);
	grid-template-areas: "logo credits""logo legal";
	justify-items: start;
	align-items: end;
	grid-area: footer
}

@media (min-width:950px) {
	.footer {
		grid-template-areas: "logo . legal credits";
		grid-template-columns: repeat(4, 1fr);
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		padding: var(--spacer)
	}
}

@media (min-width:1400px) {
	.footer {
		grid-template-columns: repeat(5, 1fr);
		grid-template-areas: "logo . . legal credits"
	}
}

.footer-logo {
	grid-area: logo
}

.footer-privacy {
	grid-area: legal
}

.mark {
	display: block;
	width: 2.5rem;
	height: auto
}

@media (min-width:950px) {
	.mark {
		width: 5rem
	}
}

.footer-credits {
	grid-area: credits
}

.footer-credit,
.footer-privacy {
	font-size: 10px;
	line-height: 15px
}

@media (min-width:950px) {

	.footer-credit,
	.footer-privacy {
		font-size: 14px;
		line-height: 20px
	}
}

@media (min-width:950px) and (min-width:450px) {

	.footer-credit,
	.footer-privacy {
		font-size: 12px;
		line-height: 20px
	}
}

.error-message {
	font-size: 14px;
	line-height: 20px;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	font-weight: 700;
	padding: var(--spacer);
	align-items: end;
	height: 100vh
}

@media (min-width:450px) {
	.error-message {
		font-size: 18px;
		line-height: 24px
	}
}

@media (min-width:1150px) {
	.error-message {
		font-size: 22px;
		line-height: 30px
	}
}

.error-message span:first-child {
	grid-column: span 2
}

.text-page {
	font-size: 14px;
	line-height: 20px;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	padding: var(--spacer);
	grid-template-areas: "title title content content content"
}

@media (min-width:450px) {
	.text-page {
		font-size: 18px;
		line-height: 24px
	}
}

@media (min-width:1150px) {
	.text-page {
		font-size: 22px;
		line-height: 30px
	}
}

.text-title {
	grid-area: title
}

.text-content {
	grid-area: content
}

ol,
ul {
	list-style: none
}

ul li:before {
	content: "_"
}

p:not(:last-child) {
	margin-bottom: 1rem
}

@media (min-width:950px) {

	li,
	p {
		max-width: 50ch;
		line-height: 1.5;
	}
}

p a {
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: text-decoration-color 150ms
}

p a:hover {
	text-decoration-color: var(--c-bg)
}

.editor h2 {
	font-weight: 700;
	margin-top: 2rem;
	margin-bottom: 1rem
}

.editor ol,
.editor ul {
	list-style-position: outside;
	padding-left: 1rem;
	margin: 1rem 0
}

.editor ul li::before {
	display: none
}

.editor ul {
	list-style-type: disc
}

.editor ol {
	list-style-type: decimal
}

.holder {
	position: relative
}

.image {
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0
}