@font-face {
	font-family: 'Roboto Mono';
	font-style: normal;
	font-weight: 400;
	src: local('Roboto Mono Regular'), local('RobotoMono-Regular'),	url('../fonts/RobotoMono-Regular.woff2') format('woff2'), url('../fonts/RobotoMono-Regular.woff') format('woff');
}

:root {
	--purple: #201432;
	--lipurple: #766793;
	--gold: #d6c9c4;
	--light: #eae7e7;
	--dist-small: .5rem;
	--dist-medium: 1.5rem;
	--dist-large: 3.5rem;
	--dist-right: 0rem;
}

body, html {
	overflow-x: hidden;
	margin: 0;
}

body {
	font-family: 'Roboto Mono', Courier, monospace;
	line-height: 1.5;
	background-color: var(--light);
	scroll-behavior: smooth;
}

.skip-to-content {
	position: absolute;
	left: -9999px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.skip-to-content:focus {
	position: static;
	width: auto;
	height: auto;
	overflow: visible;
}

h1, h2, h3 {
	font-weight: 700;
	color: var(--purple);
}

a {
	color: #3a2856;
	text-decoration: none;
}

a:hover {
	color: var(--lipurple);
}

/* wrapper */
.wrapper, .wrapper-small {
	padding-right: 15px;
	padding-left: 15px;
	margin-right: auto;
	margin-left: auto;
	transition: width .3s ease;
}

@media (min-width: 768px) {
	.wrapper, .wrapper-small {
		width: 750px;
	}
}

@media (min-width: 992px) {
	.wrapper {
		width: 970px;
	}

	.wrapper-small {
		width: 720px;
	}
}

@media (min-width: 1200px) {
	.wrapper {
		width: 1170px;
	}

	.wrapper-small {
		width: 820px;
	}
}

@media (min-width: 1400px) {
	.wrapper {
		width: 1320px;
	}
}

/* class for flex items */
.is-flex {
	display: flex;
}

.float-right {
	float: right;
}

.float-left {
	float: left;
}

/*  PADDING / MARGIN
*   small / medium / large size for all directions.
*   (only a few of these are currently in use)
*/
.p-small {
	padding: var(--dist-small);
}

.p-medium {
	padding: var(--dist-medium);
}

.p-large {
	padding: var(--dist-large);
}

.py-small {
	padding-top: var(--dist-small);
	padding-bottom: var(--dist-small);
}

.py-medium {
	padding-top: var(--dist-medium);
	padding-bottom: var(--dist-medium);
}

.py-large {
	padding-top: var(--dist-large);
	padding-bottom: var(--dist-large);
}

.px-small {
	padding-left: var(--dist-small);
	padding-right: var(--dist-small);
}

.px-medium {
	padding-left: var(--dist-medium);
	padding-right: var(--dist-medium);
}

.px-large {
	padding-left: var(--dist-large);
	padding-right: var(--dist-large);
}

.m-small {
	margin: var(--dist-small);
}

.m-medium {
	margin: var(--dist-medium);
}

.m-large {
	margin: var(--dist-large);
}

.mx-small {
	margin-left: var(--dist-small);
	margin-right: var(--dist-small);
}

.mx-medium {
	margin-left: var(--dist-medium);
	margin-right: var(--dist-right);
}

.mx-large {
	margin-left: var(--dist-large);
	margin-right: var(--dist-large);
}

.my-small {
	margin-top: var(--dist-small);
	margin-bottom: var(--dist-small);
}

.my-medium {
	margin-top: var(--dist-medium);
	margin-bottom: var(--dist-right);
}

.my-large {
	margin-top: var(--dist-large);
	margin-bottom: var(--dist-large);
}

.pt-small {
	padding-top: var(--dist-small);
}

.pt-medium {
	padding-top: var(--dist-medium);
}

.pt-large {
	padding-top: var(--dist-large);
}

.pb-small {
	padding-bottom: var(--dist-small);
}

.pb-medium {
	padding-bottom: var(--dist-medium);
}

.pb-large {
	padding-bottom: var(--dist-large);
}

.mt-small {
	margin-top: var(--dist-small);
}

.mt-medium {
	margin-top: var(--dist-medium);
}

.mt-large {
	margin-top: var(--dist-large);
}

.mb-small {
	margin-bottom: var(--dist-small);
}

.mb-medium {
	margin-bottom: var(--dist-medium);
}

.mb-large {
	margin-bottom: var(--dist-large);
}

/*  COLUMNS
*   grid column size system.
*   (not all column sizes are currently in use)
*/
.row {
	display: flex;
	flex-wrap: wrap;
}

.column-1, .column-2, .column-3, .column-4, .column-5, .column-6, .column-7, .column-8, .column-9, .column-10, .column-11, .column-12 {
	box-sizing: border-box;
	width: 100%;
}

@media (min-width: 768px) {
	.column-1 {
		width: 8.33333%;
	}

	.column-2 {
		width: 16.66667%;
	}

	.column-3 {
		width: 25%;
	}

	.column-4 {
		width: 33.33333%;
	}

	.column-5 {
		width: 41.66667%;
	}

	.column-6 {
		width: 50%;
	}

	.column-7 {
		width: 58.33333%;
	}

	.column-8 {
		width: 66.66667%;
	}

	.column-9 {
		width: 75%;
	}

	.column-10 {
		width: 83.33333%;
	}

	.column-11 {
		width: 91.66667%;
	}

	.column-12 {
		width: 100%;
	}

	.column-offset-1 {
		margin-left: 8.33333%;
	}

	.column-offset-2 {
		margin-left: 16.66667%;
	}

	.column-offset-3 {
		margin-left: 25%;
	}

	.column-offset-4 {
		margin-left: 33.33333%;
	}

	.column-offset-5 {
		margin-left: 41.66667%;
	}

	.column-offset-6 {
		margin-left: 50%;
	}

	.column-offset-7 {
		margin-left: 58.33333%;
	}

	.column-offset-8 {
		margin-left: 66.66667%;
	}

	.column-offset-9 {
		margin-left: 75%;
	}

	.column-offset-10 {
		margin-left: 83.33333%;
	}

	.column-offset-11 {
		margin-left: 91.66667%;
	}

	.column-offset-12 {
		margin-left: 0;
	}
}


/* --- HEADER --- */
header.site-header {
	z-index: 99;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	padding: 1rem;
	pointer-events: none;
}

header.site-header .wrapper {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	position: relative;
}

/* - header - logo - */
header.site-header .logo-link-header, header.site-header .menu-wrapper {
	pointer-events: auto;
}

header .logo-header img {
	height: clamp(6.875rem, 6rem + 4.6667vw, 11.25rem);
}

/* - header - menu - */
header.site-header .menu-wrapper {
	position: fixed;
	top: 2rem;
	right: 3rem;
}

header .menu-wrapper {
	--menuWidth: 36px;
	--menuBarSize: 4px;
	--menuBarMargin: 10px;
}

header .menu-wrapper input {
	display: none;
}

header input:checked ~ #nav-menu {
	display: block;
	opacity: 1;
	pointer-events: all;
}

header .button-main-menu span {
	width: var(--menuWidth, 2rem);
	height: var(--menuBarSize);
	display: block;
	background-color: var(--gold);
	border-radius: 1px;
	transition: all ease-in-out .2s;
}

header .button-main-menu span:nth-of-type(2) {
	margin: var(--menuBarMargin) 0;
}

header input:checked ~ .button-main-menu:not(.collapsed) span {
	transform-origin: center center;
}

header input:checked ~ .button-main-menu:not(.collapsed) span:nth-of-type(1) {
	transform: translatey(calc(var(--menuBarMargin) + var(--menuBarSize))) rotate(45deg);
}

header input:checked ~ .button-main-menu:not(.collapsed) span:nth-of-type(2) {
	transform: scaleX(0);
}

header input:checked ~ .button-main-menu:not(.collapsed) span:nth-of-type(3) {
	transform: translatey(calc(-1 * var(--menuBarMargin) - var(--menuBarSize))) rotate(-45deg);
}

/* - header - menu button - */
header .button-main-menu {
	width: var(--menuWidth), 2rem;
	display: inline-block;
	height: auto;
	cursor: pointer;
}

/* - header - menu container - */
header #nav-menu {
	right: 0px;
	background: var(--purple);
	z-index: -1;
	border-radius: 7px;
	padding: 1.5rem;
	opacity: 0;
	pointer-events: none;
	transition: all .3s ease;
	position: absolute;
	line-height: 2em;

}

header #nav-menu nav a {
	display: block;
	color: var(--gold);
	text-decoration: none;
}

header #nav-menu nav a.current-item {
	color: var(--lipurple);
}

/* --- FOOTER --- */
footer {
	color: var(--light);
}

.footer-inner, .footer-dots:before {
	background-color: #0f0a1a;
}

footer .planet-row {
	position: relative;
}

footer .footer-address {
	position: relative;
	padding-top: 5.5rem;
	padding-bottom: 5rem;
	font-size: 1rem;
}

footer .footer-address .title {
	color: var(--lipurple);
}

footer .has-planet .planet-container {
	position: absolute;
	top: 7.25rem;
	width: 80px;
	height: 80px;
	background-size: cover;
	background-position: center;
	transform: translatey(-50%);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' style='enable-background:new 0 0 80 80' fill='%23766793' viewBox='0 0 80 80'%3E%3Cpath d='M40 0C17.9 0 0 17.9 0 40s17.9 40 40 40 40-17.9 40-40S62.1 0 40 0zm36.3 30.6c-1.3 3.3-3 6.1-4 8.6-1.9 13.4-13.8-8.2-18.4 2.2 7.9 3.7 7.3 7.8-1 9.4-9.3-9.7-9.5.6.7 2 7.7 2-9.9 25.4-17.6 21.3-7.5-6.7 1.3-20.7-15.1-20.2C-2 23.4 57.3 47.6 40 38.3c-.8-.4-1.3-.5-1.9-.9-.2-.1-1.1 1.1-2.1.8s-1.2-3.3-1.7-3.6c-2.3-1.3-2-.6-3.8.9-2.9 2.4-8.5 2.9-5.6-2.4 1.5-.9 2.8-1.4 4-2 1.4-.7 1.5-2.9 2.4-3.6 2.9-2.2 4.4-3 6.5-3.2 1.7-.2 1.6-3.3 4.4-3.8 19.1 2.5 10.1-10 9.2-16.3 12.3 4.1 21.7 14.1 24.9 26.4zm-46.6-5.9c.4-.8 0-3.1 1-2.6.7.3 1.4 1.6 1.5 3.2.2 1.7-1.9 2.4-3.7 2s.8-1.7 1.2-2.6zm-.8-20.5c6.3.8 10.5 3.5 7.4 8.1-8.4 12.1-3.8-2.7-8.7-2.1-4.4.5-10.4 10.2-18.6 8.7C13.7 12 20.7 6.7 28.9 4.2zM2.7 35.8C4 43 7.9 53 8.3 60c-3.7-5.8-5.8-12.6-5.8-20 0-1.4.1-2.8.2-4.2z'/%3E%3C/svg%3E");
}

footer .has-planet .planet-container a {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}

footer .has-planet:after {
	content: "";
	position: absolute;
	top: 6.25rem;
	left: 60px;
	right: 36%;
	height: 2px;
	background-color: var(--lipurple);
	pointer-events: none;
}

footer .row.planet-row p {
	margin-left: 15px;
}

@media (max-width: 767px) {
	footer .has-planet .address-column {
		width: 50%;
		margin-left: auto;
		font-size: clamp(0.8rem, 0.3rem + 2.6667vw, 1rem);
	}

	footer .has-planet:after {
		right: calc(50% + 1em);
	}
}

footer .footer-bottom {
	background-color: var(--purple);
	font-size: .8rem;
	line-height: 1.35rem;

}

footer .footer-bottom .wrapper {
	justify-content: space-between;
	align-items: flex-end;
}

@media (max-width: 500px) {
	footer .footer-bottom .wrapper {
		flex-direction: column;
		align-items: flex-start;
	}

	footer .footer-bottom .wrapper > div {
		width: 100%;
		text-align: center;
	}

	footer .footer-bottom .socials-footer {
		padding: 1rem 0;
	}
}

footer .txt-footer {
	opacity: .35;
	min-width: 33%;
}

footer .txt-footer.copyright-footer {
	text-align: right;
}

footer .txt-footer a {
	color: #fff;
	text-decoration: none;
}

footer .socials-footer a {
	width: 30px;
	display: inline-block;
}


/* --- DOTS PATTERN --- */
.dot-clip {
	position: absolute;
}

.dots-overlap {
	margin-top: -10vw;
}

.dotpadding-bottom {
	padding-bottom: 10vw;
}

.dots-top {
	position: relative;
	width: 100%;
	height: 10vw;
	overflow: hidden;
}

.dots-top:before {
	content: "";
	width: 100%;
	height: 10vw;
	position: absolute;
	top: 0;
	-webkit-clip-path: url(#dotClip);
	clip-path: url(#dotClip);
	transform-origin: top center;
}

@media (max-width: 1200px) {
	.dots-overlap {
		margin-top: -15vw;
	}

	.dotpadding-bottom {
		padding-bottom: 15vw;
	}

	.dots-top {
		height: 15vw;
	}

	.dots-top:before {
		transform: scale(1.5);
	}
}

@media (max-width: 900px) {
	.dots-overlap {
		margin-top: -20vw;
	}

	.dotpadding-bottom {
		padding-bottom: 20vw;
	}

	.dots-top {
		height: 20vw;
	}

	.dots-top:before {
		transform: scale(2);
	}
}

@media (max-width: 600px) {
	.dots-overlap {
		margin-top: -30vw;
	}

	.dotpadding-bottom {
		padding-bottom: 30vw;
	}

	.dots-top {
		height: 30vw;
	}

	.dots-top:before {
		transform: scale(3);
	}
}

@media (max-width: 300px) {
	.dots-overlap {
		margin-top: -40vw;
	}

	.dotpadding-bottom {
		margin-bottom: 40vw;
	}

	.dots-top {
		height: 40vw;
	}

	.dots-top:before {
		transform: scale(4);
	}
}


/* --- PAGE - HOME --- */
/* - home - intro - */
.intro-home {
	color: var(--purple);
	font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem);
	line-height: clamp(3.2rem, 3.05rem + 0.6vw, 3.5rem);
}

/* - home - quicknav - */
.quicknav-home {
	--colourAbout: #62778f;
	--colourCases: #5c9186;
	--colourVacancies: #9b6f75;
	--colourTechnology: #766793;
}

.quicknav-home #about h2, .quicknav-home #about a, .quicknav-home #about svg {
	color: var(--colourAbout);
}

.quicknav-home #cases h2, .quicknav-home #cases a, .quicknav-home #cases svg {
	color: var(--colourCases);
}

.quicknav-home #vacancies h2, .quicknav-home #vacancies a, .quicknav-home #vacancies svg {
	color: var(--colourVacancies);
}

.quicknav-home #technologies h2, .quicknav-home #technologies a, .quicknav-home #technologies svg {
	color: var(--colourTechnology);
}

.quicknav-home #about h2:after {
	background-color: var(--colourAbout);
}

.quicknav-home #cases h2:after {
	background-color: var(--colourCases);
}

.quicknav-home #vacancies h2:after {
	background-color: var(--colourVacancies);
}

.quicknav-home #technologies h2:after {
	background-color: var(--colourTechnology);
}

.quicknav-home-inner, .quicknav-home-dots:before {
	background-color: #dbd5d5;
}

.quicknav-home .row {
	align-items: center;
}

.quicknav-home h2 {
	position: relative;
	font-size: 2rem;
}

.quicknav-home h2:after {
	content: "";
	height: 2px;
	display: inline-block;
	position: absolute;
	top: calc(50% + 2px);
	background: var(--purple);
	width: 100%;
	opacity: .3;
	margin-left: 2rem;
}

.quicknav-home .row:nth-of-type(even) h2:after {
	margin-left: 0;
	width: 9rem;
	left: -10rem;
	opacity: .2;
}

.quicknav-home .col-img {
	z-index: 1;
}

.quicknav-home .col-img.is-flex {
	justify-content: center;
}

.quicknav-home .read-more-link {
	text-transform: uppercase;
	font-weight: 700;
	margin-top: 1rem;
	display: inline-block;
}

.quicknav-home p, .quicknav-home a {
	font-size: 1.2rem;
}

.quicknav-home .quicknav-home-img {
	position: relative;
}

.quicknav-home .quicknav-home-img .img-wrapper {
	height: 240px;
	width: 240px;
	border-radius: 50%;
	overflow: hidden;
	background-size: cover;
	background-position: center;
}

.quicknav-home .quicknav-home-img .img-wrapper .img-colour-overlay {
	width: 100%;
	height: 100%;
	mix-blend-mode: overlay;
}

.quicknav-home #about .img-colour-overlay {
	background: var(--colourAbout);
}

.quicknav-home #cases .img-colour-overlay {
	background: var(--colourCases);
}

.quicknav-home #vacancies .img-colour-overlay {
	background: var(--colourVacancies);
}

.quicknav-home #technologies .img-colour-overlay {
	background: var(--colourTechnology);
}

.quicknav-home .quicknav-home-img svg {
	position: absolute;
	width: 170px;
	height: auto;
	color: var(--purple);
	transition: all .3s ease;
}

.quicknav-home .quicknav-home-img svg.icon-sputnik {
	left: 9rem;
	top: -1rem;
}

.quicknav-home .quicknav-home-img svg.icon-telescope {
	left: -5rem;
	bottom: -1rem;
}

.quicknav-home .quicknav-home-img svg.icon-helmet {
	width: 100px;
	right: 3rem;
	bottom: -1rem;
}

.quicknav-home .quicknav-home-img svg.icon-tech {
	width: 130px;
	bottom: -.8rem;
	left: -2rem;
}

.quicknav-home #about .quicknav-home-img:hover svg {
	transform: translate(2rem, -2rem);
}

.quicknav-home #cases .quicknav-home-img:hover svg {
	transform: rotate(-8deg);
}

.quicknav-home #vacancies .quicknav-home-img:hover svg {
	transform: translate(-3rem, 0);
}

.quicknav-home #technologies .quicknav-home-img:hover svg {
	transform: rotate(120deg);
	transform-origin: 50% 53%;
}

.quicknav-home .row:nth-of-type(odd) {
	padding: 5rem 0 5rem 3rem;
	background: #ffffff22;
}

.quicknav-home .row:nth-of-type(even) {
	padding: 3rem 0;
}

@media (max-width: 767px) {
	.quicknav-home .row:nth-of-type(odd) {
		flex-direction: column-reverse;
		padding: 0;
		background: none;
	}

	.quicknav-home .row:nth-of-type(even) {
		padding: 0;
	}

	.quicknav-home h2:after {
		content: none;
	}

	.quicknav-home .quicknav-home-img {
		width: 240px;
		max-width: 100%;
		margin: auto;
	}

	.quicknav-home .wrapper {
		margin-bottom: 0;
		padding-bottom: 0;
	}
}

/* - home - client logos - */
.logo-wrapper-home .logo-wrapper-inner, .logo-wrapper-home .logo-wrapper-dots:before {
	background-color: #cec5c1;
	color: #464548;
}

.logo-wrapper-home .logo-column {
	align-items: center;
	justify-content: center;
	width: 20%;
}

.logo-wrapper-home h2 {
	font-size: 2.5rem;
	color: var(--purple);
	margin-bottom: 0;
}

.logo-wrapper-home svg, .logo-wrapper-home img {
	width: 200px;
	max-width: 85%;
	max-height: 140px;
}

@media (min-width: 768px) {
	.logo-wrapper-home .logo-column {
		margin-left: calc(20% / 3);
	}

	.logo-wrapper-home .logo-column:nth-of-type(4n + 1) {
		margin-left: 0;
		justify-content: flex-start;
	}

	.logo-wrapper-home .logo-column:nth-of-type(4n) {
		justify-content: flex-end;
	}
}

@media (max-width: 767px) {
	.logo-wrapper-home .logo-column {
		width: calc(80% / 3);
		margin-left: calc(20% / 2);
	}

	.logo-wrapper-home .logo-column:nth-of-type(3n + 1) {
		margin-left: 0;
		justify-content: flex-start;
	}

	.logo-wrapper-home .logo-column:nth-of-type(3n) {
		justify-content: flex-end;
	}
}

@media (max-width: 500px) {
	.logo-wrapper-home .logo-column {
		width: 50%;
		margin-left: 0;
	}

	.logo-wrapper-home .logo-column:nth-of-type(2n+1) {
		justify-content: flex-start;
	}

	.logo-wrapper-home .logo-column:nth-of-type(2n) {
		justify-content: flex-end;
	}
}

/* HOME - PLANETS AND ORBITS */
#space {
	position: relative;
	width: 100vw;
	left: 0;
	top: 0;
	padding: 0;
	height: 400px;
	min-height: 65vh;
	max-height: 85vh;
	clip-path: url(#planetClip);
}

#particles-js {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

.space-back-element {
	width: calc(100% + 20px);
	position: absolute;
	z-index: -1;
}

.space-top {
	top: 0;
	left: 0;
	right: 0;
	bottom: 12.5vw;
	background-color: var(--purple);
	/* animation:spacecolback 15s linear infinite; */
}

.space-bottom {
	color: var(--purple);
	bottom: 0;
	/* animation: spacecolfront 15s linear infinite; */
}

@keyframes spacecolfront {
	0%, 10%, 90%, 100% {
		color: #201432;
	}
	37% {
		color: #2d1c47;
	}
	63% {
		color: #160d22;
	}
}

@keyframes spacecolback {
	0%, 10%, 90%, 100% {
		background-color: #201432;
	}
	37% {
		background-color: #2d1c47;
	}
	63% {
		background-color: #160d22;
	}
}

#planets-wrapper {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	overflow: hidden;
}

#planets-wrapper .ellipse-planet-pair {
	position: absolute;
}

#planets-wrapper .ellipse {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transform: translatey(0); /* prevents visible line cut on bottom */
}

#planets-wrapper .planet {
	opacity: 0;
	border-radius: 50%;
	position: absolute;
	top: 0;
	left: 0;
	transform: translate(-50%, -50%) translateZ(0);
	cursor: pointer;
	z-index: 9;
	width: var(--planetSize);
	height: var(--planetSize);
	background-color: var(--planetColour);
}

#planets-wrapper .planet .planet-title {
	position: absolute;
	margin-bottom: 0;
	color: #eae7e7;
	top: calc(50% - 10px);
	width: 150px;
	height: 20px;
	left: calc(50% - 75px - var(--ellipseMargin) / 2);
	-webkit-animation: orbit var(--animationSpeed) linear infinite var(--animationDelay) var(--animationDirection), leftright var(--animationSpeed) cubic-bezier(.4, .09, .6, .9) infinite calc(var(--animationSpeed) / 2 + var(--animationDelay)) var(--animationDirection);
	animation: orbit var(--animationSpeed) linear infinite var(--animationDelay) var(--animationDirection), leftright var(--animationSpeed) cubic-bezier(.4, .09, .6, .9) infinite calc(var(--animationSpeed) / 2 + var(--animationDelay)) var(--animationDirection);
	display: flex;
	justify-content: center;
	align-items: center;
}

#planets-wrapper .planet:hover .planet-title {
	animation-play-state: paused;
}

#planets-wrapper .planet .planet-title svg {
	height: 12px;
}

@-webkit-keyframes orbit {
	from {
		-webkit-transform: rotate(0deg) translateX(var(--orbitSize)) rotate(0deg);
	}
	to {
		-webkit-transform: rotate(360deg) translateX(var(--orbitSize)) rotate(-360deg);
	}
}

@keyframes orbit {
	from {
		transform: rotate(0deg) translateX(var(--orbitSize)) rotate(0deg);
	}
	to {
		transform: rotate(360deg) translateX(var(--orbitSize)) rotate(-360deg);
	}
}

@-webkit-keyframes leftright {
	0%, 100% {
		margin-left: 0;
	}
	50% {
		margin-left: var(--ellipseMargin);
	}
}

@keyframes leftright {
	0%, 100% {
		margin-left: 0;
	}
	50% {
		margin-left: var(--ellipseMargin);
	}
}

/* PLANET AND ELLIPSE PROPERTIES */
/* - ellipses - */
#pair1 {
	width: 140vmax;
	height: 120vmin;
	left: -70vmax;
	top: -90vmin;
}

#pair2 {
	width: 152vmax;
	height: 130vmin;
	left: -68vmax;
	top: -87vmin;
}

#pair3 {
	width: 180vmax;
	height: 120vmin;
	left: -79vmax;
	top: -63vmin;
}

/* - planets - */
.planet-1 {
	--planetColour: #c2d4e7;
	--planetSize: 45px;
	--planetSize: clamp(1.875rem, 1.5625rem + 1.6667vw, 2.8125rem);
	--orbitSize: 45px;
	--ellipseMargin: 30px;
	--animationSpeed: 16s;
	--animationDelay: -.5s;
	--animationDirection: reverse;
}

.planet-2 {
	--planetColour: #5da395;
	--planetSize: 120px;
	--planetSize: clamp(4.375rem, 3.3333rem + 5.5556vw, 7.5rem);
	--orbitSize: 85px;
	--ellipseMargin: 30px;
	--animationSpeed: 12s;
	--animationDelay: -3s;
	--animationDirection: normal;
}

.planet-3 {
	--planetColour: var(--lipurple);
	--planetSize: 60px;
	--planetSize: clamp(2.5rem, 2.0833rem + 2.2222vw, 3.75rem);
	--orbitSize: 60px;
	--ellipseMargin: 90px;
	--animationSpeed: 9.5s;
	--animationDelay: -5s;
	--animationDirection: normal;
}

/* responsive ellipse sizes */
.ellipse-planet-pair {
	transition: all .2s ease;
}

@media (max-width: 1600px) {
	#pair1 {
		width: 147vmax;
	}

	#pair2 {
		width: 160vmax;
	}

	#pair3 {
		width: 183vmax;
	}
}

@media (max-width: 1400px) {
	#pair1 {
		width: 150vmax;
	}

	#pair2 {
		width: 164vmax;
	}

	#pair3 {
		width: 190vmax;
	}
}

@media (max-width: 1023px) {
	#pair1 {
		width: 169vmax;
		left: -78vmax;
	}

	#pair2 {
		width: 195vmax;
		left: -82vmax;
	}

	#pair3 {
		width: 200vmax;
	}
}

@media (max-width: 767px) {
	#pair1 {
		width: 172vmax;
		left: -80vmax;
	}

	#pair2 {
		width: 200vmax;
		left: -85vmax;
	}

	#pair3 {
		width: 215vmax;
		left: -87vmax;
	}
}

@media (max-width: 659px) {
	#pair1 {
		width: 170vmax;
		left: -89vmax;
		top: -86vmin;
	}

	#pair2 {
		width: 195vmax;
		left: -93vmax;
		top: -81vmin;
	}

	#pair3 {
		left: -97vmax;
		top: -56vmin;
	}
}

@media (max-width: 599px) {
	#pair1 {
		width: 163vmax;
		left: -88vmax;
		top: -84vmin;
	}

	#pair2 {
		width: 189vmax;
		left: -98vmax;
		top: -78vmin;
	}

	#pair3 {
		width: 194vmax;
		left: -94vmax;
		top: -52vmin;
	}
}

@media (max-width: 549px) {
	#pair1 {
		width: 163vmax;
		left: -88vmax;
		top: -65vmin;
		height: 115vmin;
	}

	#pair2 {
		width: 189vmax;
		left: -98vmax;
		top: -54vmin;
		height: 120vmin;
	}

	#pair3 {
		width: 194vmax;
		left: -94vmax;
		top: -37vmin;
		height: 120vmin;
	}
}

@media (max-width: 549px) and (max-height: 640px) {
	#pair1 {
		top: -84vmin;
	}

	#pair2 {
		top: -78vmin;
	}

	#pair3 {
		top: -52vmin;
	}
}

@media (max-width: 549px) and (min-height: 750px) {
	#pair1 {
		width: 131vmax;
		left: -68vmax;
		top: -61vmin;
	}

	#pair2 {
		width: 155vmax;
		left: -83vmax;
		top: -43vmin;
	}

	#pair3 {
		width: 148vmax;
		left: -69vmax;
		top: -24vmin;
	}
}

@media (max-width: 412px) {
	#pair1 {
		top: -61vmin;
	}

	#pair2 {
		top: -40vmin;
	}

	#pair3 {
		top: -17vmin;
	}
}

@media (max-width: 412px) and (min-height: 750px) {
	#pair1 {
		top: -43vmin;
	}

	#pair2 {
		top: -27vmin;
	}

	#pair3 {
		top: -15vmin;
		height: 133vmin;
	}
}

@media (max-width: 360px) {
	#pair1 {
		top: -55vmin;
	}

	#pair2 {
		top: -34vmin;
	}

	#pair3 {
		top: -12vmin;
		width: 186vmax;
	}
}


/* --- PAGE - CONTACT --- */
.contact-form-container input, .contact-form-container textarea {
	width: 100%;
	padding: .6rem;
	margin: .3rem 0 .6rem 0;
	box-sizing: border-box;
	border: none;
	font-family: 'Roboto Mono', Courier, monospace;
	font-size: 1rem;
	resize: vertical;
}

.contact-form-container input[type=submit] {
	max-width: 8rem;
	background-color: var(--purple);
	transition: all .3s ease;
	color: #fff;
	padding: 1rem;
	float: right;
	border: none;
	cursor: pointer;
}

.contact-form-container input[type=submit]:hover {
	background-color: var(--lipurple);
}