:root {
	--colorPrimary:rgb(27,27,27);
	--colorSecondary:rgb(69,69,69);
	--colorPost:rgb(96,96,96);
	--colorPink:rgb(169,0,169);
	--colorRed:rgb(255,96,96);
	--colorGreen:rgb(96,196,96);
	--colorBlue:rgb(0,169,169);
	--colorYellow:rgb(255,169,0);
	--colorHover:rgb(200,200,200);
	--colorTrans:rgba(255,255,255,0.7);
	--colorFront:rgb(255,255,255);
	--colorBackground:rgb(230,230,230);
	--defaultBackground:radial-gradient(circle at top left, #F00, transparent 50%), radial-gradient(circle at top right, #0F0, transparent 50%), radial-gradient(circle at bottom left, #00F, transparent 50%), radial-gradient(circle at bottom right, #999, transparent 50%);
	--widthMain:666px;
} * {
	padding:0;
	margin:0;
	box-sizing:border-box;
	font-family:'Roboto', sans-serif;
	user-select:none;
} input, button, textarea, select, option {
	outline:none;
	box-shadow:none;
	min-width:0;
} img {
	pointer-events:none;
}

.button {
	position:relative;
	display:flex;
	align-items:center;
	gap:6px;
	text-decoration:none;
	border-radius:3px;
	border:none;
	background-color:var(--colorBackground);
	padding:6px 9px;
	margin-left:auto;
	white-space:nowrap;
	overflow:hidden;
} .button::before {
	position:absolute;
	content:'';
	width:100%;
	bottom:0;
	left:0;
	height:2px;
	background-color:var(--colorHover);
	transition:height 0.15s;
} .button:hover::before {
	height:100%;
} .button span {
	font-size:16px;
	color:var(--colorSecondary);
	z-index:0;
} .button p {
	font-size:15px;
	color:var(--colorSecondary);
	overflow:hidden;
	text-overflow:ellipsis;
	z-index:0;
}

body {
	position:relative;
	width:100vw;
	height:100vh;
	background:var(--defaultBackground);
	background-size:100%;
	background-position:center;
	overflow:hidden;
} body::before {
	content:"";
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-color:var(--colorTrans);
	z-index:-1;
} #loader {
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background-color:var(--colorFront);
	z-index:8;
} @keyframes animateLoader {
	0% {background-position:0%;}
	100% {background-position:400%;}
} #loader div {
	width:0;
	height:5px;
	background:linear-gradient(69deg, rgb(255,0,0), rgb(0,0,255), rgb(255,0,0), rgb(0,255,0), rgb(255,0,0));
	background-size:400%;
	transition:all 1s;
} #loader.full div {
	width:100%;
	animation:animateLoader 9s infinite linear;
} #intro {
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	display:none;
	justify-content:center;
	align-items:center;
	overflow:hidden;
	z-index:9;
} #intro::before {
	position:absolute;
	content:'';
	top:0;
	left:0;
	right:0;
	bottom:0;
	background-color:var(--colorTrans);
} #intro div {
	position:relative;
	width:169px;
	height:169px;
} #intro div img {
	position:absolute;
	width:100%;
	height:auto;
	transition:all 0.5s;
} #intro div img:nth-child(1) {
	transform:translateX(-96px) scale(2.1);
} #intro div img:nth-child(2) {
	transform:translateX(96px) scale(2.1);
} #intro div img:nth-child(3) {
	transform:scale(3.1);
} #intro.full div img {
	transform:translateX(0) scale(1);
}

main {
	width:100%;
	height:100%;
	display:flex;
	flex-direction:column;
	align-items:center;
	overflow-x:hidden;
	overflow-y:auto;
} header {
	position:relative;
	width:69px;
	height:69px;
	margin-top:69px;
	transform:perspective(1000px);
	transform-style:preserve-3d;
	transition:transform 0.1s ease-out;
} header div {
	position:absolute;
	width:100%;
	height:100%;
} header div img {
	position:absolute;
	width:100%;
	height:auto;
} header div img:first-child {
	filter:blur(9px);
} #mainDiv {
	display:flex;
	flex-direction:column;
	width:var(--widthMain);
	margin-top:69px;
	padding:27px 18px;
	background-color:var(--colorFront);
	border-radius:5px;
	border-left:5px solid var(--colorBlue);
} #mainDiv > p {
	width:100%;
	margin-bottom:12px;
	font-size:16px;
	color:var(--colorSecondary);
} #soonDiv {
	width:var(--widthMain);
	display:flex;
	flex-direction:column;
	align-items:center;
	margin-top:69px;
} #soonDiv div {
	width:132px;
	height:9px;
	border-radius:9px;
	background:linear-gradient(69deg, rgb(255,0,0), rgb(0,0,255), rgb(255,0,0), rgb(0,255,0), rgb(255,0,0));
	background-size:400%;
	animation:animateLoader 9s infinite linear;
	opacity:0.6;
} #soonDiv p {
	font-size:12px;
	color:var(--colorSecondary);
	margin-top:18px;
	text-align:center;
}

@media screen and (orientation: portrait) {
:root {
	--widthMain:calc(100% - 18px);
}