/* Global embedded entities */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,200;0,300;0,500;0,700;1,300&display=swap');

/* Global meta-entities */
:root {
	--accent: #4cb;
	--accent2: #f48;
	--accentBg: #fff;
	--accentBg2: #555;
	--accentFont: #000;
	--accentFont2: #fff;
}
::-webkit-scrollbar { width: 0; height: 0; background: #0000 }
::selection { background: var(--accentSub) }
::-moz-selection { background: var(--accentSub) }
html { scrollbar-width: none; scroll-padding-top: 10vmin }
body {
	font: var(--fontMain); z-index: -10;
	color: var(--accentFont); margin: 0;
	position: absolute; top: 0; left: 0;
	width: 100vw; height: 100vh;
	transition: 0.5s linear;
}

/* Global meta-classes */
.i { margin: auto }
.n { margin: 0 }
.nil { pointer-events: none }
.nosel {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	user-drag: none; 
	-webkit-user-drag: none;
}
.bounded {
	overflow: hidden;
	overscroll-behavior-x: none;
	overscroll-behavior-y: none;
}
.break { float: left; width: 100%; height: 1px; margin: 0; display: block }
.center { display: flex; flex-wrap: wrap; justify-content: center }
.fill { width: 100%; height: 100%; margin: 0 }
.text { font: inherit; color: inherit; text-decoration: none }
.inputForm { border: none; outline: none; border-bottom: 1px solid #000 }
.bgFill {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.bgCont {
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}
.ref {
	transition: color 0.15s;
	font: inherit; color: inherit;
	text-decoration: none;
}
.ref:hover { color: var(--accent) }

/* Local entities */
.block { width: 100vw; z-index: -2; margin: 0 0 10vmin 0 }
.tile {
	position: relative;
	width: var(--tileW); min-height: var(--tileH);
	margin: 0; color: var(--accentFont);
	background: linear-gradient(170deg,
		var(--accentBg) 85%, var(--accent2) 85.2%,
		var(--accent2) 86%, #0000 86.2%);
	overflow: hidden;
	overscroll-behavior-x: none;
	overscroll-behavior-y: none;
}
.tile2 {
	position: relative;
	width: var(--tileW); min-height: 100vh;
	margin: 0; color: var(--accentFont2);
}
.frame {
	position: relative; width: 80%;
	display: flex; flex-wrap: wrap;
	float: right; margin: 10% 0 0 0;
}
.frame2 {
	margin: auto; max-width: 80%;
	background: linear-gradient(90deg,
		var(--accentBg) 50%, var(--accent) 50%);
	border-radius: 5vmin 0 5vmin 0;
}

.photo {
	margin: auto; padding: 3vmin;
	max-width: 90%; max-height: 90%;
	background-color: none;
	border-radius: 7vmin 0 7vmin 0
}

.cellA1 {
	position: relative; width: 10%;
	font: var(--fontCap); font-size: 8vmin;
	margin: 0; text-align: center;
	display: flex; flex-wrap: wrap;
}
.cellA2 {
	position: relative; width: 90%;
	font: var(--fontTitle); margin: 0 0 5% 0;
	background: var(--accent);
	display: flex; flex-wrap: wrap;
}
.cellA3 { position: relative; width: 100% }
.cellA4 {
	position: absolute; width: 1.5vmin;
	height: calc(100% - 25vh);
	background: var(--accent2);
}
.cellA5 {
	overflow-y: scroll; width: 80%;
	margin: 1vmin 0 25vh 10%;
	display: inline-block
}

._a { order: var(--orderA); border-radius: 0 7vmin 0 0 }
._b { order: var(--orderB); border-radius: 7vmin 0 0 0 }
._aX { order: var(--orderAx); border-radius: 0 7vmin 0 0 }
._bX { order: var(--orderBx); border-radius: 7vmin 0 0 0 }

#partners {
	margin: 0 0 20vmin 0; width: 90vw;
	background: var(--accentBg);
	clip-path: polygon(10% 0%, 100% 0%, 90% 100%, 0% 100%);
}

@media screen and (min-width: 1920px) {
	#partners {
		padding: 0 10%;
	}
}
.ptnr {
	background-color: var(--accentBg);
	width: 30vmin; height: 10vmin;
	display: inline-block;
	margin: 1vmin 5vmin 1vmin 9vmin;
	box-shadow: 0 0 0 #0000;
	transform: translateX(-5vmin);
	border-radius: 3vmin;
	transition: 0.3s, box-shadow 0.6s ease-out
}
.ptnr:hover {
	box-shadow: 0.5vmin -0.5vmin 0 #0ff, -0.5vmin 0.5vmin 0 #f07;
	transform: translateX(-5vmin) scale(1.2);
}

#topA1 {
	box-shadow: 0 3vmin 15vmin #000;
	margin: 0 0 20vmin 0;
	background: var(--accent2);
}
#topA2 {
	border-radius: 0;
	background-image: url('assets/pattern2.svg');
	background-color: var(--accentBg);
	clip-path: polygon(0 0, 100% 0%, 100% 100%, 10% 100%);
}
#topA3 {
	width: 86%; height: 70%;
	margin: auto 0 auto auto;
	background: #325; font: var(--fontTitle);
	font-size: 5vmin; font-style: italic;
	clip-path: polygon(17% 18%, 76% 0, 100% 19%, 100% 54%, 42% 100%, 0 70%);
}
#post1 {
	float: left; margin: auto;
	padding-top: 7vh; color: #fff;
	width: 50vmin; height: 40vmin;
}
#topA5 {
	border-radius: 0; filter: saturate(1);
	background-image: url('assets/pic0.jpg');
	clip-path: polygon(0 0, 90% 0, 100% 100%, 0% 100%);
	transition: 1s ease-out;
	background-position: 0 32%;
}
#topA6 { transition: 0.7s; position: absolute; backdrop-filter: brightness(0.5) contrast(0.85) }
#topic1 {
	max-height: 30%; width: 80%;
	font: var(--fontSub); margin: auto;
	z-index: 1
}

#topA2:hover #topA3 { animation: topA3 ease-out 0.7s forwards }
#topA5:hover { filter: saturate(0) }
#topA5:hover #topA6 { backdrop-filter: brightness(0.5) contrast(0.85) blur(0.2vmin) }
#topA5:hover #topic1 { animation: popL ease-out 0.7s forwards }

.tile:hover .cellA2 { animation: slideR ease-out 0.5s forwards }
.tile:hover .cellA3 { animation: slideU ease-out 0.5s forwards }
.tile2:hover .frame2 { animation: photo ease-out 0.5s forwards }

#logoDev {
	width: calc(100% - 0.5vmin);
	height: calc(100% - 0.5vmin);
	background-color: #111;
	border-radius: 2vmin;
	display: block;

}
#logoDevFrame {
	margin: auto;
	border-radius: 2vmin;
	width: 47vmin;
	height: 10vmin;
	padding: 0;
	background: linear-gradient(170deg, #613 0%, #316 100%);
	box-shadow: -1vmin 1vmin 3vmin #3169, 1vmin -1vmin 3vmin #6139;
}
#logoDevFrame:hover { animation: alvirityDev 2s linear infinite }
@keyframes alvirityDev {
	0%, 100% { box-shadow: none }
	20% { box-shadow: 0 -1vmin 3vmin #603 }
	40% { box-shadow: 1vmin 0 3vmin #606 }
	60% { box-shadow:  0 1vmin 3vmin #306; filter: brightness(1.7) }
	80% { box-shadow: -1vmin 0 3vmin #606 }
}
#footer {
	position: relative; width: 100vw;
	padding-bottom: 50px;}
.footer_item {
	font: var(--fontMain); color: #fff;
	font-size: 2.4vmin; display: inline-block;
	margin: auto auto auto 5vmin;
	box-shadow: 0 0 0 #0000;
}
.footerFX { transition: 0.3s }
.footerFX:hover { transform: scale(1.2); filter: brightness(1.5) saturate(1.1) }

#float {
	position: fixed; z-index: 5;
	bottom: 3vmin; right: 0;
	flex-direction: column;
}
#contacts {
	font: 500 var(--socialF) 'Montserrat'; color: #fff;
	width: var(--socialW); height: var(--socialH);
	background: #333; text-align: center;
	border-radius: 3vmin 0 0 3vmin;
	text-shadow: 0.35vmin 0.25vmin 0 #f075,
		-0.2vmin -0.15vmin 0 #0ff7;
	box-shadow: 2vmin 1.5vmin 0 #000;
}
.social {
	width: var(--socialXR); height: var(--socialXR);
	border-radius: 50%; margin: 0.5vmin;
	background-color: #444;
	box-shadow: 0 0 0 #0000;
	transition: 0.3s, box-shadow 0.6s ease-out
}
.social:hover {
	box-shadow: 0.25vmin -0.5vmin 0 #0ff, -0.25vmin 0.5vmin 0 #f07;
	transform: scale(1.2); margin: 0.5vmin 1vmin
}
#lang_frame {
	font: 500 var(--langF) 'Montserrat';
	padding: var(--langP); border-radius: 2vmin;
	background: #000; color: var(--accent);
	margin: auto 1vmin 1vmin auto
}
#lang_frame:hover { background: #222; color: var(--accent2); animation: wobble linear 0.5s forwards }
#bg {
	width: 100%; height: 100%;
	position: fixed; z-index: -11;
	background-image: url('assets/pattern.svg');
	filter: brightness(1) saturate(0.6) contrast(1.2);
	box-shadow: inset 0 0 30vmin #000
}

/* Animations */
@keyframes topA3 {
	0%{ letter-spacing: 50vmin; font-size: 20vmin; color: #0000 }
	35% { transform: rotate(-5deg) scale(0.9); color: #0002 }
	75% { transform: rotate(5deg) scale(1.1); color: #0006 }
	100% { font-size: 5vmin }
}
@keyframes popL { 0% { transform-origin: 0% 0%; transform: scale(0) } }
@keyframes slideR { 0% { transform-origin: 100% 0%; transform: scaleX(0); color: #0000 } 50%{ color: #0000 } }
@keyframes slideU { 0% { transform-origin: 0% 0%; transform: scaleY(0); color: #0000 } 50%{ color: #0000 } }
@keyframes photo {
	0% { box-shadow: 0 0 0 #0000; }
	35% { box-shadow: 2vmin -5vmin 0 #0ffa, -2vmin 5vmin 0 #f07a; }
	100% {
		transform: rotate(3deg);
		box-shadow: -2vmin 5vmin 0 #0ffa, 2vmin -5vmin 0 #f07a;
	}
}
@keyframes wobble {
	35% { transform: rotate(-10deg) scale(0.9) }
	75% { transform: rotate(10deg) scale(1.1) }
}