/* #title.on{
  background-color:rgba(255, 255, 255, 1) !important;
  Color:rgba(255, 255, 255, 0) !important;
  } */

	@import url('https://fonts.googleapis.com/css?family=Montserrat:100');
	 html, body, h1 {
		 padding: 0;
		 margin: 0;
		 font-family: 'Montserrat', sans-serif;
		 background-color: black;
	}
	a {
  color: white;
}
	 #app {
		 background: #0a0a0a;
		 /* height: 100vh;
		 width: 100%; */
		 margin: 0;
		 padding: 0;
		 display: flex;
		 flex-direction: column;
		 justify-content: center;
		 align-items: center;
		 background: linear-gradient(rgba(10, 10, 10, .6), rgba(0, 0, 0, .9)), repeating-linear-gradient(0, transparent, transparent 2px, black 3px, black 3px), url('https://images.unsplash.com/photo-1506399558188-acca6f8cbf41?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=7118759521e3184778a3b5e010e202c6');
		 background-size: cover;
		 background-position: center;
		 z-index: 1;
	}
	/* For WebKit (Chrome, Safari) */
    ::-webkit-scrollbar {
    	  width: 4px; /* Set the width of the scrollbar */
    }
    
    ::-webkit-scrollbar-thumb {
      background-color: #343434; /* Set the color of the scrollbar thumb */
      border-radius: 4px; /* Optional: Set the border radius of the thumb */
    }
    
    ::-webkit-scrollbar-track {
      background-color: #f0f0f0; /* Set the color of the scrollbar track */
    }
    
    /* For Firefox */
    /* Note: These properties work in Firefox 64 and later versions */
    html {
      scrollbar-width: thin; /* Set the width of the scrollbar */
      scrollbar-color: #2c2c2c #6a6a6a; /* Set the color of the scrollbar thumb and track */
    }
    
    /* Optional: Set the border radius of the thumb */
    /* For Firefox, this is applied to both horizontal and vertical scrollbars */
    /* To set separately, use `scrollbar-corner` for the corner between the two */
    html::-webkit-scrollbar-thumb {
      border-radius: 4px;
    }
	 #container {
        text-align: center;
        width: 80vw;
            scrollbar-width: thin;
        margin-left: 20vw;
        margin-right: auto;
        max-height: 100vh;
        overflow-y: scroll;
        z-index: 1;
        position: sticky;

	}
	#posts{
		margin-top: 10vh;

	}
	#header{
		position: absolute;
    top: 0;
    z-index:1;
    left: 0;

	}
	#background{
		position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
		}
		.sub {
 		 color: #64dcdc;
 		 /* letter-spacing: 1em; */
 	}
	.bio {
		float: left;
    display: block;
    border: #ffffff21;
    border-style: solid;
		line-height: 1.5em;
    border-width: 1px;
    width: 50vw;
    margin-left: 1vw;
    margin-top: 1vw;
    font-size: 1.5em;
    max-width: 1200px;
    /* position: absolute; */
    height: calc(50vw * .75);
    max-height: calc(1200px * .75);
    background-color: rgba(0, 0, 0, 0.5);
		padding: 1em;
	 }
	 .ASPIR {
 		float: left;
     display: block;
     border: #ffffff21;
     border-style: solid;
 		line-height: 1.5em;
     border-width: 1px;
     width: 60vw;
     margin-left: 1vw;
     margin-top: -4vw;
     font-size: 1.5em;
     max-width: 1400px;
     /* position: absolute; */
     height: calc(51vw * 1.75);
     max-height: calc(1450px * 1.75);
     background-color: rgba(0, 0, 0, 0.5);
 		padding: 1em;
 	 }
	/* Our mixin positions a copy of our text directly on our existing text, while also setting content to the appropriate text set in the data-text attribute. */
	 .glitch {
		 position: relative;
		 color: white;
		 /* font-size: 4em;
		 letter-spacing: 0.5em; */
		/* Animation provies a slight random skew. Check bottom of doc for more information on how to random skew. */
            transition: background-color 0.3s ease;
            padding: 0 2px; /* Adds a little padding around the letters */
            width: auto;

		 animation: glitch-skew 1s infinite linear alternate-reverse;
	}
	     .glitch:hover {
            background-color: lightgray;
            color: black;
            font-weight:bold;
        }
	.post {
		    overflow-wrap: anywhere;
		Color: white;
		    float: left;
		    display: block;
		    border: #ffffff21;
		    border-style: solid;
		    border-width: 2px;
		    width: 20vw;
				margin-left: 1vw;
				margin-top: 1vw;
		    max-width: 600px;
		    /* position: absolute; */
				height: calc(20vw * .75);
				/* height: auto; */
		    max-height: calc(600px * .75);
		    background-color: rgba(0, 0, 0, 0.50);
				}
	.vjs-big-play-button .vjs-icon-placeholder{
		display: none;
	}

	/* .vjs-icon-placeholder{
		color: rgba(255,255,255, 0.5);
	} */


.video-js:hover .vjs-big-play-button {
  background-color: rgba(255,255,255, 0.1);
	transition: all 1.0s;

}

	.video-js .vjs-big-play-button {

		font-size: 3em;
		line-height: 1.5em;
		height: 100%;
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
		padding: 0;
		cursor: pointer;
		opacity: 1;
		border: none;
		/* background-color: #2b333f4f; */
		background-color: rgba(255,255,255, 0.05);
		border-radius: 0em;
		transition: all 1.0s;
	}
.my-video-dimensions {
		width: 22vw;
		max-width: 600px;
		height: calc(30vw * .75);
		max-height: calc(600px * .75);
	}

	.blog{
		background-color: rgba(255, 255, 255, 0.02);

	}
	 .glitch::before {
		 content: attr(data-text);
		 position: absolute;
		 top: 0;
		 left: 0;
		 width: 100%;
		 height: 100%;
		 left: 2px;
		 text-shadow: -2px 0 #ff00c1;
		/* Creates an initial clip for our glitch. This works in a typical top,right,bottom,left fashion and creates a mask to only show a certain part of the glitch at a time. */
		 clip: rect(44px, 450px, 56px, 0);
		/* Runs our glitch-anim defined below to run in a 5s loop, infinitely, with an alternating animation to keep things fresh. */
		 animation: glitch-anim 2s infinite linear alternate-reverse;
	}
	 .glitch::after {
		 content: attr(data-text);
		 position: absolute;
		 top: 0;
		 left: 0;
		 width: 100%;
		 height: 100%;
		 left: -1px;
		 text-shadow: -2px 0 #00fff9, 2px 2px #ff00c1;
		 animation: glitch-anim2 0.1s infinite linear alternate-reverse;
	}
	.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

	.glitch {

		cursor: pointer;
	Color:rgba(255, 255, 255, 1) ;
	background-color:rgba(255, 255, 255, 0) ;
	/* height:10vw; */
	position: absolute;
}
.noHover {
	cursor: default !important;
}
.photo img{
	    max-width: 100%;
			height: auto;
			top: 50%;
	    transform: translateY(-50%);
			position: relative;
		}
.portrait img{
	    height: 100%;

}
@media only screen and (max-width: 600px) {
	.post {
	    overflow-wrap: anywhere;
	    Color: white;
	    float: left;
	    display: block;
	    border: #ffffff21;
	    border-style: solid;
	    border-width: 1px;
	    width: 70vw;
	    margin-left: 4vw;
	    margin-top: 1vw;
	    max-width: 600px;
	    /* position: absolute; */
	    height: calc(65vw * .75);
	    max-height: calc(600px * .75);
	    background-color: rgba(0, 0, 0, 0.02);
	}
	.glitch {
	font-size: 1.5em !important;
	}
	.subGlitch {
	font-size: .75em !important;
	}
	.my-video-dimensions {
			width: 70vw;
			max-width: 600px;
			height: calc(65vw * .75);
			max-height: calc(600px * .75);
		}

		.bio {
    width: 65vw;
    margin-left: 1vw;
    /* margin-top: 25vw; */
    font-size: 1em;
    max-width: 1200px;
    /* position: absolute; */
    height: calc(154vw * .75);
    max-height: calc(1200px * .75);
}
		#quintic{
			    font-size: 0.3em;
		}
}

.vimeo{
	position: relative;
  top: 50%;
  transform: translateY(-50%);
}

	/* Creates an animation with 20 steaps. For each step, it calculates a percentage for the specific step. It then generates a random clip box to be used for the random glitch effect. Also adds a very subtle skew to change the 'thickness' of the glitch.*/
	 @keyframes glitch-anim {
		 0% {
			 clip: rect(88px, 9999px, 81px, 0);
			 transform: skew(1deg);
		}
		 5% {
			 clip: rect(7px, 9999px, 78px, 0);
			 transform: skew(1deg);
		}
		 10% {
			 clip: rect(32px, 9999px, 86px, 0);
			 transform: skew(0.5deg);
		}
		 15% {
			 clip: rect(11px, 9999px, 71px, 0);
			 transform: skew(0.5deg);
		}
		 20% {
			 clip: rect(23px, 9999px, 70px, 0);
			 transform: skew(0.5deg);
		}
		 25% {
			 clip: rect(25px, 9999px, 93px, 0);
			 transform: skew(1deg);
		}
		 30% {
			 clip: rect(1px, 9999px, 47px, 0);
			 transform: skew(0.5deg);
		}
		 35% {
			 clip: rect(62px, 9999px, 35px, 0);
			 transform: skew(1deg);
		}
		 40% {
			 clip: rect(85px, 9999px, 49px, 0);
			 transform: skew(0.5deg);
		}
		 45% {
			 clip: rect(73px, 9999px, 93px, 0);
			 transform: skew(0.5deg);
		}
		 50% {
			 clip: rect(51px, 9999px, 25px, 0);
			 transform: skew(1deg);
		}
		 55% {
			 clip: rect(60px, 9999px, 59px, 0);
			 transform: skew(1deg);
		}
		 60% {
			 clip: rect(68px, 9999px, 60px, 0);
			 transform: skew(0.5deg);
		}
		 65% {
			 clip: rect(89px, 9999px, 90px, 0);
			 transform: skew(0.5deg);
		}
		 70% {
			 clip: rect(98px, 9999px, 76px, 0);
			 transform: skew(0.5deg);
		}
		 75% {
			 clip: rect(75px, 9999px, 56px, 0);
			 transform: skew(0.5deg);
		}
		 80% {
			 clip: rect(32px, 9999px, 17px, 0);
			 transform: skew(1deg);
		}
		 85% {
			 clip: rect(5px, 9999px, 50px, 0);
			 transform: skew(0.5deg);
		}
		 90% {
			 clip: rect(36px, 9999px, 73px, 0);
			 transform: skew(0.5deg);
		}
		 95% {
			 clip: rect(22px, 9999px, 75px, 0);
			 transform: skew(0.5deg);
		}
		 100% {
			 clip: rect(62px, 9999px, 80px, 0);
			 transform: skew(1deg);
		}
	}
	 @keyframes glitch-anim2 {
		 0% {
			 clip: rect(13px, 9999px, 49px, 0);
			 transform: skew(0.5deg);
		}
		 5% {
			 clip: rect(64px, 9999px, 35px, 0);
			 transform: skew(1deg);
		}
		 10% {
			 clip: rect(73px, 9999px, 89px, 0);
			 transform: skew(1deg);
		}
		 15% {
			 clip: rect(23px, 9999px, 50px, 0);
			 transform: skew(0.5deg);
		}
		 20% {
			 clip: rect(23px, 9999px, 41px, 0);
			 transform: skew(1deg);
		}
		 25% {
			 clip: rect(31px, 9999px, 17px, 0);
			 transform: skew(1deg);
		}
		 30% {
			 clip: rect(6px, 9999px, 10px, 0);
			 transform: skew(0.5deg);
		}
		 35% {
			 clip: rect(89px, 9999px, 38px, 0);
			 transform: skew(0.5deg);
		}
		 40% {
			 clip: rect(47px, 9999px, 61px, 0);
			 transform: skew(0.5deg);
		}
		 45% {
			 clip: rect(81px, 9999px, 63px, 0);
			 transform: skew(1deg);
		}
		 50% {
			 clip: rect(13px, 9999px, 31px, 0);
			 transform: skew(0.5deg);
		}
		 55% {
			 clip: rect(1px, 9999px, 33px, 0);
			 transform: skew(0.5deg);
		}
		 60% {
			 clip: rect(29px, 9999px, 46px, 0);
			 transform: skew(1deg);
		}
		 65% {
			 clip: rect(64px, 9999px, 25px, 0);
			 transform: skew(1deg);
		}
		 70% {
			 clip: rect(66px, 9999px, 51px, 0);
			 transform: skew(0.5deg);
		}
		 75% {
			 clip: rect(99px, 9999px, 41px, 0);
			 transform: skew(0.5deg);
		}
		 80% {
			 clip: rect(91px, 9999px, 88px, 0);
			 transform: skew(0.5deg);
		}
		 85% {
			 clip: rect(10px, 9999px, 30px, 0);
			 transform: skew(0.5deg);
		}
		 90% {
			 clip: rect(91px, 9999px, 13px, 0);
			 transform: skew(0.5deg);
		}
		 95% {
			 clip: rect(77px, 9999px, 41px, 0);
			 transform: skew(0.5deg);
		}
		 100% {
			 clip: rect(40px, 9999px, 17px, 0);
			 transform: skew(1deg);
		}
	}
	 @keyframes glitch-skew {
		 0% {
			 transform: skew(-1deg);
		}
		 10% {
			 transform: skew(-1deg);
		}
		 20% {
			 transform: skew(0deg);
		}
		 30% {
			 transform: skew(0deg);
		}
		 40% {
			 transform: skew(-1deg);
		}
		 50% {
			 transform: skew(-1deg);
		}
		 60% {
			 transform: skew(0deg);
		}
		 70% {
			 transform: skew(0deg);
		}
		 80% {
			 transform: skew(0deg);
		}
		 90% {
			 transform: skew(0deg);
		}
		 100% {
			 transform: skew(0deg);
		}
	}