@import url('https://fonts.googleapis.com/css2?family=Lexend+Exa&family=Lexend+Tera&display=swap');

@font-face {
	font-family: 'Ogg';
	src: url('ogg-roman.otf');
}

@keyframes rotation {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(-360deg);
	}
}

* {
	margin: 0px;
	padding: 0px;
}

body {
	position: relative;
	top: 0px;
	width: 0px;
	height: 100vh;
	width: 100vw;
	background: #978885;
}

.logo-container {
	position: absolute;
	top: 70px;
	left: 70px;
}

.logo-container h1 {
	font-family: 'Lexend Tera', sans-serif;
	font-size: 26px;
	letter-spacing: -5px;
	color: #1D1D1B;
	cursor: default;
}

.logo-container h1 .appear {
	color: #978885;
	transition: 0.1s;
}

.logo-container h1 .letter:nth-child(6) {
	padding-right: 23px;
}

.logo-container h1:hover .appear {
	color: #1D1D1B;
}

.text-container {
	position: absolute;
	bottom: 70px;
	left: 70px;
}

.text-container h2 {
	font-family: 'Ogg';
	font-weight: 500;
	color: #1D1D1B;
	font-size: 100px;
    line-height: 1.2;
}

.text-container h2 #change-text {
	color: #FFF;
	transition: all 0.25s;
	position: relative;
	left: 0px;
}

.circle-container {
	position: absolute;
	top: 70px;
	right: 70px;
}

.circle-container img {
	width: 200px;
	height: 200px;
	vertical-align: top;
	transform-origin: center;
	animation-name: rotation;
	animation-duration: 7s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

.contacts-container {
	position: absolute;
	width: 20px;
	bottom: 70px;
	right: 70px;
	transform: rotate(-90deg);
	transform-origin: 0% 0%;
}

.contacts-container a {
	position: absolute;
	top: 0px;
	left: 0px;
	font-family: 'Lexend Exa', sans-serif;
	font-size: 16px;
	text-decoration: none;
	color: #1D1D1B;
}

.contacts-container a:hover {
	color: #FFF;
}

@media screen and (max-width: 1600px) {

	.logo-container h1 {
		font-size: 22px;
		letter-spacing: -6px;
	}

	.text-container h2 {
		font-size: 60px;
	}

	.circle-container img {
		width: 150px;
		height: 150px;
	}

}

@media screen and (max-width: 800px) {

	.text-container h2 {
		font-size: 50px;
	}
}


@media screen and (max-width: 700px) {

	.logo-container {
		top: 30px;
		left: 30px;
	}

	.logo-container h1 {
		font-size: 17px;
	}

	.text-container {
		bottom: 30px;
		left: 30px;
	}

	.text-container h2 {
		font-size: 30px;
		line-height: 1.3;
	}

	.circle-container {
		top: 100px;
		right: 30px;
		top: 30px;
	}

	.circle-container img {
		width: 100px;
		height: 100px;
	}

	.contacts-container {
		bottom: 30px;
		right: 30px;
	}

	.contacts-container a {
		font-size: 14px;
	}
}


@media screen and (max-width: 320px) {

	.text-container h2 {
		font-size: 26px;
	}

	.circle-container img {
		width: 80px;
		height: 80px;
	}
}