@font-face {
    font-family: 'Voire';
    src: url('assets/fonts/Voire-Medium.eot');
    src: url('assets/fonts/Voire-Medium.eot?#iefix') format('embedded-opentype'),
        url('assets/fonts/Voire-Medium.woff2') format('woff2'),
        url('assets/fonts/Voire-Medium.woff') format('woff'),
        url('assets/fonts/Voire-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}


body {
	background-image: url('assets/images/mouth.png');
	background-repeat: no-repeat;
	background-attachment: scroll;
	min-height: 100vh;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

a {
	color: #E30093;
}

h1 {
	font-family: 'Voire', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

h1 span {
	color: #E30093;
}

p  {
	color: #6B6B6B;
}

.main {
	overflow-x: hidden;
	min-height: 100vh;
	display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.container {
	display: flex;
	flex-direction: column;
}

.container .logo {
	display: block;
	width: 217px;
	height: 99px;
	transform: translateX(-25px);
}

.footer {
	position: relative;
	display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
	gap: 27px;
}

.footer div:last-child {
	display: flex;
    justify-content: center;
    align-items: center;
	font-size: 40px;
	font-weight: 300;
	color: #aaa;
	transform: translateX(-8px);
}

.footer a {
	color: #000;
	font-size: .8333rem;
    padding: 8px 12px 0;
    transition: .2s;
    /* display: inline-block; */
    text-decoration: none;
    display: inline-block;
    line-height: 1;
	font-weight: bold;
	text-transform: uppercase;
}

.footer a:hover {
	transform: scale(1.1);
	color:#E30093;
}





@media(max-width: 575px) {
	body {
		background-size: 80%;
	    background-position: 270% 110%;
	    margin: 0;
	}
	
	h1 {
		font-size: calc(1.875rem + 1.5vw);
		line-height: 1.1;
	}

	p  {
		padding-top: 0;
		font-size: 17px;
		margin-bottom: 27px;
	}

	.container {
		justify-content: start;
		padding-left: 36px;
		padding-right: 36px;
	}

	.container h1 {
		flex: 0 0 auto;
		width: 100%;
		margin-bottom: 27px;
	}
	.container p {
		flex: 0 0 auto;
		width:100%;
		line-height: 1.333333;
	}
	.container .logo {
		display: block;
		width: 130px;
		height: 90px;
	}

	.container .logo img {
		width: auto;
		height: 100%;
	}
}

@media(max-width: 575px) and (min-height: 840px) {
	body {
		background-size: 85%;
	    background-position: 240% 120%;
	    margin: 0;
	}

	p  {
		font-size: 21px;
		margin-bottom: 31.5px;
	}
	
	.footer{
		flex-direction: row;
		flex-direction: row;
		justify-content: start;
	}
	.footer div:last-child { 
		transform: none;
	}


}


@media(min-width: 576px) {
	body {
		background-size: 70%;
	    background-position: 130% 90%;
	   	margin: 0;
	}
	h1 {
		font-size: calc(3.125rem + 1.5vw);
		line-height: 1.1;
	}

	p  {
		font-size: 21px;
		margin-bottom: 31.5px;
	}

	.container {
		justify-content: center;
		padding-top: 0;
		padding-bottom: 140px;
		padding-left:80px;
		padding-right: 80px;
		margin: 0 auto;
	}

	.container h1 {
		flex: 0 0 auto;
		width: 100%;
		margin-bottom: 45px;
	}
	.container p {
		flex: 0 0 auto;
		width:75%;
		line-height: 1.333333;
	}
	
	.footer a {
		font-size: 1rem;
	}
	

}

@media(min-width: 768px) {
	body {
		background-size: 65%;
	    background-position: 130% 120%;
	   	margin: 0;
	}
	h1 {
	font-size: calc(3.125rem + 1.5vw);
		line-height: 1.1;
	}

	p  {
		font-size: 21px;
		margin-bottom: 31.5px;
	}

	.container {
		justify-content: center;
		padding-top: 0;
		padding-bottom: 140px;
		max-width: 640px;
		padding-left: 0;
		padding-right: 0;
	}

	.container h1 {
		flex: 0 0 auto;
		width: 100%;
		margin-bottom: 45px;
	}
	.container p {
		flex: 0 0 auto;
		width:75%;
		line-height: 1.333333;
	}
	.footer {
		position: relative;
		display: flex;
		gap: 27px;
		align-items: center;
		flex-direction: row;
		justify-content: start;
	}
	
}


@media(min-width: 992px) {
	body {
		background-size: 68%;
    	background-position: 210% 50%;
	}
	h1 {
	font-size: calc(2.5rem + 1.5vw);
		line-height: 1.1;
	}
	.container {
		max-width: 800px;
		padding-bottom: 0px;
	}

	.container h1 {
		flex: 0 0 auto;
		width: 75%;
		margin-bottom: 27px;
	}
	.container p {
		flex: 0 0 auto;
		width:66.66666%;
		line-height: 1.333333;
	}
	
	.footer {
		position: relative;
		display: flex;
		gap: 27px;
		align-items: center;
		flex-direction: row;
		justify-content: start;
	}

}

@media(min-width: 1025px) {
	body {
		background-size: 68%;
    	background-position: 210% 50%;
	}
	h1 {
		font-size: calc(2.5rem + 1.5vw);
		line-height: 1.1;
	}
	.container {
		max-width: 960px;
		padding-bottom: 0px;
	}

	.container h1 {
		flex: 0 0 auto;
		width: 66.66666%;
		margin-bottom: 27px;
	}
	.container p {
		flex: 0 0 auto;
		width:50%;
		line-height: 1.333333;
	}
	
	.footer {
		position: relative;
		display: flex;
		gap: 27px;
		align-items: center;
		flex-direction: row;
		justify-content: start;
	}

}



@media(min-width: 1200px) {
	body {
		background-size: 68%;
    	background-position: 195% 50%;
	}
	h1 {
		font-size: calc(2.5rem + 1.5vw);
		line-height: 1.1;
	}
	.container {
		max-width: 1100px;
	}

	.container h1 {
		flex: 0 0 auto;
		width: 58.333333%;
		margin-bottom: 27px;
	}
	.container p {
		flex: 0 0 auto;
		width: 58.333333%;
		margin-bottom: 63px;
		line-height: 1.333333;
	}
	
	.footer {
		position: relative;
		display: flex;
		gap: 27px;
		align-items: center;
		flex-direction: row;
		justify-content: start;
	}
	

}


@media(min-width: 1440px) {
	body {
		background-size: 57%;
		background-position: 145% 50%;
	}

	h1 {
		font-size: calc(2.75rem + 1.5vw);
		line-height: 1.1;
	}
	.container {
		max-width: 1360px;
	}

	.container h1 {
		width: 58.333333%;
		margin-bottom: 27px;
	}
	.container p {
		width: 50%;
		margin-bottom: 72px;
		line-height: 1.333333;
	}
	.footer {
		position: relative;
		display: flex;
		
		gap: 27px;
		align-items: center;
		flex-direction: row;
		justify-content: start;
	}
	
	
	
}



.glitch {
	position: relative;
	display: inline-block;
   text-shadow: 0.05em 0 0 #00fffc, -0.03em -0.04em 0 #fc00ff,
    0.025em 0.04em 0 #fffc00;
  animation: glitch 725ms infinite;
}

.glitch span {
  position: absolute;
 
  left: 0;
}

.glitch span:first-child {
  animation: glitch 500ms infinite;
  clip-path: polygon(0 0, 100% 0, 100% 35%, 0 35%);
  transform: translate(-0.04em, -0.03em);
  opacity: 0.75;
}

.glitch span:last-child {
  animation: glitch 375ms infinite;
  clip-path: polygon(0 65%, 100% 65%, 100% 100%, 0 100%);
  transform: translate(0.04em, 0.03em);
  opacity: 0.75;
}

@keyframes glitch {
  0% {
    text-shadow: 0.05em 0 0 #00fffc, -0.03em -0.04em 0 #fc00ff,
      0.025em 0.04em 0 #fffc00;
  }
  15% {
    text-shadow: 0.05em 0 0 #00fffc, -0.03em -0.04em 0 #fc00ff,
      0.025em 0.04em 0 #fffc00;
  }
  16% {
    text-shadow: -0.05em -0.025em 0 #00fffc, 0.025em 0.035em 0 #fc00ff,
      -0.05em -0.05em 0 #fffc00;
  }
  49% {
    text-shadow: -0.05em -0.025em 0 #00fffc, 0.025em 0.035em 0 #fc00ff,
      -0.05em -0.05em 0 #fffc00;
  }
  50% {
    text-shadow: 0.05em 0.035em 0 #00fffc, 0.03em 0 0 #fc00ff,
      0 -0.04em 0 #fffc00;
  }
  99% {
    text-shadow: 0.05em 0.035em 0 #00fffc, 0.03em 0 0 #fc00ff,
      0 -0.04em 0 #fffc00;
  }
  100% {
    text-shadow: -0.05em 0 0 #00fffc, -0.025em -0.04em 0 #fc00ff,
      -0.04em -0.025em 0 #fffc00;
  }
}

@supports (-webkit-touch-callout: none) {
  body, .main {
    /* The hack for Safari */
    min-height: -webkit-fill-available;
  }
}