html {
  background-color: #ffffff;
  height: 100%;
}
body {
	font-family: 'Inter';
	font-size: 12px;
	text-transform: uppercase;
	font-weight: bold;
	line-height: 12px;
	letter-spacing: -2%;
	height: 100vh;
    height: 100dvh;
    min-height: 0 !important;
    overflow: hidden;
}
.white-mode, .white-mode a {
	color: #3f4a5a;
}
.dark-mode, .dark-mode a {
	color: #fff;
}
.white-mode .element-dark,
.dark-mode .element-white {
	display: none;
}
.white-mode .speed {
	border: 1px solid #3f4a5a;
	color: #3f4a5a;
}
.dark-mode .speed {
	border: 1px solid #fff;
	color: #fff;
}
.play-pause {
	background: url('../images/spin.svg') center center no-repeat;
	animation: rotate .5s linear infinite;
}
@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
.white-mode.play .play-pause {
	background: url('../images/pause-dark.svg') center center no-repeat;
	animation: none;
}
.white-mode.pause .play-pause {
	background: url('../images/play-dark.svg') center center no-repeat;
	animation: none;
}
.dark-mode.play .play-pause {
	background: url('../images/pause-white.svg') center center no-repeat;
	animation: none;
}
.dark-mode.pause .play-pause {
	background: url('../images/play-white.svg') center center no-repeat;
	animation: none;
}
a {
	display: block;
	text-decoration: none;
}
header, footer {
	padding: 16px !important; 
	flex: 0 0 auto;
}
.socials, .contacts {
	padding-top: 24px;
}
.full-name {
	display: none;
}
.short-name {
	display: inline;
}
.transparent {
	opacity: 0.5;
}
.main-visual {
  flex: 1 1 0;
  min-height: 0;
  padding: 40px 16px;
  display: flex;
}
.main-visual-inner {
  width: 100%;
  flex: 1 1 auto;
  display: none;
  align-items: center;
  justify-content: center;
}
.main-visual-inner img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.play-pause {
	width: 27px;
	height: 27px;
	margin-bottom: 24px;
	cursor: pointer;
}
.speed {
    width: 27px;
    height: 27px;
    border-radius: 100px;
    text-transform: none;
    cursor: pointer;
    display: none;
}
.play .speed {
	display: flex;
}
@media (min-width: 992px) {
	a:hover:before {
		content: '_________ ';
	}
	.socials, .contacts {
		padding-top: 0;
	}
	.main-visual {
		padding: 20px 80px;
	}
	footer {
		padding-bottom: 48px !important;
	}
	.full-name {
		display: inline;
	}
	.short-name {
		display: none;
	}
}
@media (max-width: 991px) {
	.socials {
		display: flex;
	}
	.socials a {
	    display: flex;
	    width: 27px;
	    height: 27px;
	    border: 1px solid;
	    justify-content: center;
	    align-items: center;
	    border-radius: 50px;
	    margin-right: 0.25rem;
	}
	.dark-mode .socials a {
		border: 1px solid #fff;
	}
	.white-mode .socials a {
		border: 1px solid #3f4a5a;
	}
}
@media (max-width: 1200px) {
	.hires {
		max-width: 1200px;
	}
}
@media (max-height: 480px) {
	header, footer {
		display: none;
	}
}