@charset "UTF-8";
/* CSS Document */

html {
	scroll-behavior:smooth;
	overflow-x: hidden;
	transition:.3s ease;
	font-family: "FuturaNowDisplayVar";
	font-style: normal;
	font-stretch: normal;
	font-weight: 400;
	line-height:1.0;
	background:#000000;
}

* {
	color:#FFFFFF;
	margin:0;
	padding:0;
	box-sizing:border-box;
	text-align:center;
	font-family:inherit;
	line-height:inherit;
	font-weight:inherit;
	font-style: inherit;
	font-stretch: inherit;
}

.clear {
	clear:both;
}

#bg {
	background-image:url("../_img/bg.jpg");
	position: fixed;
	background-size:cover;
    height: 100vh;
    width: 100vw;
    background-attachment: scroll;
    background-position: center;
    z-index: -2;
}

@media only screen and (min-width: 668px) {
	#bg {
		background-attachment: fixed;
	}
}

a.button.main {
	font-size:34px;
	text-transform:uppercase;
	font-weight:1000;
	z-index: 20;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    width: 160px;
    margin: 0 auto 0;
    /* transform: translateY(-6px); */
    padding: 5px 17px 5px;
    letter-spacing: 1px;
	color: #000000;
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#fea400+0,fed602+50,fea400+100 */
background: linear-gradient(to right,  #fea400 0%,#fed602 50%,#fea400 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter:drop-shadow(0 0 17px rgba(0,0,0,.5));
	text-decoration:none;


}

@media only screen and (max-width: 768px) {
	a.button.main {
		position: fixed;
		bottom: 0;
		top:unset;
		width: 100%;
		right: 0;
		left: 0;
		max-width: none;
		padding: 17px;
		transform:none;
		border-radius:0;
		
	}
	
}

h1, h2, h3, h4, h5 {
	text-transform:uppercase;
	letter-spacing:1px;
}

h1, h2, h3, h4, h5, p {
	margin:0 auto 22px;
	font-weight:1000;
}

h1 {
	font-size:52px;
}

h2 {
	font-size: 48px;
}

h3 {
	font-size: 36px;
}

h4 {
	font-size: 28px;
}

h5 {
	font-size:22px;
}

p {
	font-size:18px;
	line-height:1.8;
	font-family: "Noto Sans";
	font-style: normal;
/*	font-stretch: condensed;*/
	font-weight: 400;
	font-variation-settings:
    "wdth" 90;
	text-align:center;
}

.max-width {
	max-width:1000px;
	margin:0 auto 0;
}
	
#wrapper {
	position:relative;
	z-index:2;
	padding:44px 22px;
	margin:0 auto 0;
	background:rgba(0,0,0,.2);
	overflow:hidden;
}

@media only screen and (min-width: 768px) {
	#wrapper {
		padding:77px 44px;
	}
}

.mobile {
	display:block;
}

.desktop {
	display:none;
}

@media only screen and (min-width: 768px) {
	.mobile {
		display:none;
	}

	.desktop {
		display:block;
	}
}

#quotator {
	display:block;
	margin:0 auto 33px;
	width:100%;
}

#art {
	width:100%;
	display:block;
	margin:22px auto 44px;
}

#art img {
	width:100%;
}

#about {
	display:block;
	margin:55px auto 0;
	max-width:700px;
	padding:44px 57px 44px;
}

@media only screen and (max-width: 768px) {
	#about {
	display:block;
	margin:55px auto 0;
	max-width:700px;
	padding:44px 0 44px;
	}
}

/* FOOTER */


#footer {
	padding: 44px 0px 77px;
	text-align:center;
}

#footer p {
	text-align:center;
}

#email {
	margin: 44px auto 0;
	display:block;
	position:relative;
	z-index:5;
}

#email.nav-email {
	float: right;
    margin: 0;
    transform: translate(7px,-5px);
    width: calc(100% - 54px);
}

#social {
	margin: 44px auto 22px;
}

#social i {
			color:#FFFFFF;
			font-size:32px;
			margin:0 6px 17px;
		}
		
		#social i:hover {
			color:#f0d200;
		}
		
#email input#mce-EMAIL {
	text-align: center;
    border: none;
    height: 43px;
    margin: 0;
    padding: 3px 8px 0;
    vertical-align: top;
    font-size: 20px;
    background: rgba(255, 255, 255, 1);
    color: #0b0a09;
    width: 100%;
    max-width: 300px;
    -webkit-border-radius: 0;
    -webkit-appearance: none;
    border-radius: 0;
}
		
#email input.button {
	font-size:28px;
	text-transform:uppercase;
	font-weight:1000;
	z-index: 20;
    width: 140px;
    margin: 0 auto 0;
    /* transform: translateY(-6px); */
    padding: 5px 17px 5px;
    letter-spacing: 1px;
	color: #000000;
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#fea400+0,fed602+50,fea400+100 */
background: linear-gradient(to right,  #fea400 0%,#fed602 50%,#fea400 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter:drop-shadow(0 0 17px rgba(0,0,0,.5));
}

#mice p {
	font-size: 13px;
}

#email button:hover {
	background:#FFFFFF;
}
		
#mice {
	position: relative;
	text-align: center;
	display: block;
	width: 100%;
	margin:77px auto 22px;
	max-width:500px;
}
		
#social a {
	color:#C6C6C6;
}

#social a:hover {
	color:#FFFFFF;
}

#mice a {
	color:#C6C6C6;
}

#mice a:hover {
	color:#FFFFFF;
}

#noise-wrapper {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	opacity: 1;
	overflow: hidden;
	z-index: 1;
	
	&:after {
    	content: '';
    	position: absolute;
    	top: 0;
    	right: 0;
    	bottom: 0;
    	left: 0;
    	background: radial-gradient(ellipse at center, rgba(0,0,0,0) 0%,rgba(0,0,0,0.75) 100%);
	}
}

#noise {
	position: absolute;
	top: -500px;
	right: -500px;
	bottom: -500px;
	left: -500px;
	background: transparent url('../_img/noise.png') 0 0;
	background-size: 320px 320px;
	opacity: .35;
	animation: noise 1s steps(8,end) infinite both;
	transition:3s ease;
}

#noise::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(rgba(0, 0, 0, 0.2) 50%, transparent 50%);
        background-size: 100% 2px; /* Adjust 2px for scanline thickness */
        animation: scanline-roll 5s linear infinite; /* Optional animation */
    }

    @keyframes scanline-roll {
        from { background-position: 0 0; }
        to { background-position: 0 100%; }
    }

#noise.disappear {
	opacity:.2;
	transition: 3s ease;
}

@keyframes noise {
	0% {
		transform: translateX(0px,0px); }
	10% {
		transform: translate(-100px, 100px);
	}
	20% {
		transform: translate(150px, -100px);
	}
	30% {
    	transform: translate(-100px,100px);
	}
	40% {
    	transform: translate(100px, -150px);
	}
	50% {
		transform: translate(-100px, 200px);
	}
	60% {
		transform: translate(-200px, -100px);
	}
	70% {
		transform: translateY(50px, 100px);
	}
	80% {
		transform: translate(100px, -150px);
	}
	90% {
		transform: translate(0px, 200px);
	}
	100% {
		transform: translate(-100px, 100px);
	}
}

@keyframes flicker {
  0% {
  opacity: 0.27861;
  }
  5% {
  opacity: 0.34769;
  }
  10% {
  opacity: 0.23604;
  }
  15% {
  opacity: 0.90626;
  }
  20% {
  opacity: 0.18128;
  }
  25% {
  opacity: 0.83891;
  }
  30% {
  opacity: 0.65583;
  }
  35% {
  opacity: 0.67807;
  }
  40% {
  opacity: 0.26559;
  }
  45% {
  opacity: 0.84693;
  }
  50% {
  opacity: 0.96019;
  }
  55% {
  opacity: 0.08594;
  }
  60% {
  opacity: 0.20313;
  }
  65% {
  opacity: 0.71988;
  }
  70% {
  opacity: 0.53455;
  }
  75% {
  opacity: 0.37288;
  }
  80% {
  opacity: 0.71428;
  }
  85% {
  opacity: 0.70419;
  }
  90% {
  opacity: 0.7003;
  }
  95% {
  opacity: 0.36108;
  }
  100% {
  opacity: 0.24387;
  }
}

.crt::after {
  content: " ";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(18, 16, 16, 0.1);
  opacity: 0;
  z-index: 2;
  pointer-events: none;
  animation: flicker 0.15s infinite;
}