*{
			box-sizing: border-box;
		}
		@font-face {
			font-family: title;
			src: url('/ff/MetrikTrial-Medium.otf');
		}
		@font-face{
			font-family: sublitle;
			src: url('/ff/MetrikTrial-LightItalic.otf');
		}
		
		@keyframes pulse {
			0%{
				transform: scale(1.0);
			}
			15%{
				transform: scale(1.05);
			}
			25%{
				transform: scale(1.015);
			}
			40%{
				transform: scale(1.075);
			}
			100%{
				transform: scale(1.0);
			}
			
		}

		form{
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			width: 40vh;

		}

		input{
			padding: 1vh;
			width: inherit;
			height: 5vh;
			font-family: title;
			font-size: 3vh;
			margin-top: 2vh;
			border: 0.2vh white solid;
			color: white;
			background-color: rgba(0, 0, 0, 1.0);
		}

		button{
			transition: 0.25s;
			width: inherit;
			height: 5vh;
			margin-top: 4vh;
			cursor: pointer;
			font-family: title;
			color: white;
			background-color: rgba(0, 0, 0, 1.0);
			border: 0.5vh white solid;
			font-size: 3vh;
		}

		button:hover{
			color: black;
			background-color: #fff;
			cursor: pointer;

		}

		#sbscrb_b{
			cursor: pointer;
			position: relative;
			width: 20vh;
			margin-top: 20;
			opacity: .5;
			padding: 0;
			transition: 0.2s;
			display: none;
		}

		#sbscrb_b:hover{
			cursor: pointer;
			opacity: 1;
		}

		#hidden_msg{
			visibility: hidden;
			position: absolute;
			z-index: 5;

			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;

			width: 70%;
			height: 80vh;

			border: 0.5vh white solid;
			background-color: rgba(0, 0, 0, .8);
			backdrop-filter: blur(0.2vh);
			transition: 1s;
		
			transform: scale(0.8);
			opacity: 0;
		
		}

		#popUp_header{
			position: absolute;
			margin-top: -65vh;
		}

		#hidden_msg.show{
			visibility: visible;
			transform: scale(1);
			opacity: 1;
		}
		
		html,body{
			width: 100%;
			height: 100vh;
			padding: 0;
			margin: 0;
			padding-bottom: 5vh;
			display: flex;
			flex-direction: column;
			background-color: #000;
			justify-content: center;
			align-items: center;
			overflow: hidden;
		}

		img{
			width: 100%;
		}


		.block{
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		#hero{
			flex-direction: column;

		}

		.pic{
			display: block;
			position: relative;
			width: 20vh;
			object-fit: contain;
			margin-bottom: 2vh;
			z-index: 1;
			opacity: .8;
			transition: .5s;
			animation: pulse 1s infinite;

		}
		
		.title,h1{
			z-index: 2;
			margin: 0;
			padding: 0;
			color: #fff;
			font-family: title;
			font-size: 7vh;
		}
		
		.subtitle,h2{
			z-index: 2;
			margin: 0;
			padding: 0;
			color: #fff;
			opacity: .9;
			font-family: sublitle;
			font-size: 3vh;
		}

		#social{
			width: 100%;
			flex-direction: row;
			margin: 0;
			padding: 0;
			margin-top: 70vh;
			position: absolute;

		}

		.icon{
			margin: 0;
			padding: 0;
			width: 9vh;
			height: 10vh;
			margin: 1vh;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		#ig{
			width: 6.25vh;
		}

		#tg{
			width: 8vh;
		}

		.social_icon{
			opacity: .2;
			transition: 0.2s;
			filter: invert();
		}

		.social_icon:hover{
			opacity: 1;
			transform: scale(1.2)
		}