/* Neon stylesheet for stefanmterry.com
written by Stefan M Terry. Go figure.
intended for use with Bootstrap library 

Yellowtail font from Google Fonts.*/

/*********************
* Full Page Settings *
*********************/
html {
	scroll-behavior: smooth;
	font-family: Veranda, Trebuchet, sans-serif;
}

body {
	background-color: #111111;
	transition: background-color 3s;
    color: #EEEEEE;
}

/*************************
* Bootstrap modifiations *
*************************/
/*
.page>.h-100::before {
	height:100%;
}
*/
/****************
* local styling *
****************/

/**** Blocks ***/
.page {
	margin: 0px;
	padding: 0px;
	/*height: 500px;*/
	min-height: 100vh;
}

.backCanvas {
	display: block;
}

.pageHead {
	padding-top: 10em;
}

.pageBody {
	padding-top: 30vh;
	min-height: 95vh;
}

.pageBase {
    
}

.contentContainer {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.boundingContainer {
    margin: 0px;
    padding:0px;
    overflow: hidden;
    height:100%;
    width:100%;
}

.contentBlock {
	background-color: rgba(150,150,150, 0.8);
	box-shadow: 2px 2px rgba(100,100,100, 0.9);
	height: 100%;
	overflow: hidden;
	padding: 2em;
	border-radius: 4px;
}
/*
.background {
	height: 300vh;
}
*/
.parallax-debug .parallax-group {
	-webkit-transform: translate3d(700px, 0, -800px) rotateY(30deg);
    transform: translate3d(700px, 0, -800px) rotateY(30deg);
}

.parallax-debug .parallax-layer {
	box-shadow: 0 0 0 2px #0F0;
}

.parallax {
    position: fixed;
	height: 100vh;
    width: 100vw;
	overflow-x: hidden;
	overflow-y: auto;
	-webkit-perspective: 300px;
	perspective: 300px;
}

.parallax-group {
	position: relative;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
}

.parallax-layer {
	position: absolute;
	top: 0px;
    left: 0px;
	bottom: 0px;
	right: 0px;
}

/*
.parallax-headers {
	height: 30vh;
}

@media (min-width: 768px) {
    .parallax, .parallax-group, parallax-headers {
        height: 100vh;
    }
}
*/

.parallax-background {
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
	-webkit-transform: translateY(400vh) scale(5) rotateX(70deg);
	transform: translateY(400vh) scale(5) rotateX(70deg);
	z-index: 1;
}

.parallax-base {
	-webkit-transform: translateZ(0px);
	transform: translateZ(0px);
	z-index: 3;
}

.parallax-foreground {
	-webkit-transform: translateZ(200px) scale(0.5);
	transform: translateZ(200px) scale(0.5);
	z-index: 5;
	pointer-events: none;
}

.zindex3 {
    z-index: 3;
}

.entryContainer {
	width: 100%;
    font-size: large;
    text-shadow: -1px -1px #333333;
}

.entryContainer .col {
	text-align: center;
}

.entryIcon {
	display: inline-block;
	width: 50px;
	height: 50px;
	background-color: rgba(255, 0, 0, 0.4);
	border-radius: 2px;
	border-color: rgba(200, 0,0, 0.4);
	border-style: solid;
}

a.entry2Link .entryIcon {
    transition: transform 750ms cubic-bezier(0.19, 1, 0.22, 1);
}

a.entry2Link:hover .entryIcon {
    transform: rotateZ(-30deg);
}

.entryBodyWide {
	min-height: 100px;
	/*background-color: rgba(0, 0, 255, 0.4);*/
	display: none;
    margin-bottom: 15px;
    font-size: medium;
}

.tallEntryContainer {
    position: relative;
    transition: left 1000ms cubic-bezier(0.19, 1, 0.22, 1);
}

.entryBodyTall {
	/*background-color: rgba(0, 0, 255, 0.4);*/
	width: 100%;
	padding-top: 30px;
	padding-left: 20px;
	padding-right: 20px;
	float: left;
    font-size: large;
}

.entryTable {
    display: table;
}

.entryTR {
    display: table-row;
}

.entryTD {
    display: table-cell;
}

.entryTitle {
    font-size: larger;
    font-weight: bold;
}

.entrySub {
    font-size: smaller;
    font-style: italic;
}

.entrySubtitle {
    text-align: left;
}

.entryDate {
    text-align: right;
}

.entry2Link {
    display: block;
    width: 100%;
    height: 100%;
    margin-bottom: 15px;
}

.entry2Info {
    display: inline-block;
    height: 100%;
    padding-top: 15px;
    padding-left: 15px;
    vertical-align: bottom;
}

.entry2Info h3 {
    position:absolute;
    top: 33%;
    padding-left: 15px;
}

@media (min-width: 768px) {
    .entryIcon {
        height: 100px;
        width: 100px;
    }

	.entryContainer .col {
		text-align: left;
	}
	
	.entryBodyWide {
		display: block;
	}
	
	.entryBodyTall {
		display: none;
	}
	
	.entryIcon {
		pointer-events: none;
	}
}

/*** Text ***/
h1 {
    font-size: 10vw;
    text-align: center;
    font-family: 'Yellowtail', cursive;
}

h2 {
	font-size: 8vw;
	text-align: center;
	font-family: 'Yellowtail', cursive;
}

a {
    color: #EEEEEE;
    text-decoration: none !important;  
}

a:hover {
    color: #EEEEEE;
}

a:focus {
    color: #EEEEEE;
}

.contentBlock p {
	font-size: 1em;
	letter-spacing: 0.015em;
	color: #EEEEEE;
	text-shadow: 1px 1px #F4F4F4, -1px -1px #333333;
	text-align: left;
}

@media (min-width: 768px) {
    h2 {
        font-size: 5em;
    }

    .contentBlock p {
        font-size: 2em;
    }
}

.coverMain {

}

.coverSub {

}

.mainTitle {
    width: 60vw;
    height: auto;
    transform: rotate(-10deg);
    position: relative;
    top: 15vh;
    left: -5vw;
}

.mainSubtitle {
    position: relative;
    top: 30vh;
    left: 15vw;
}

.entryTitle {
	
}

.entrySubtitle {
	
}

/*** Targeted Adjustments ***/
#cover h2.neonText, .cover h2.neonText {
	
}

#about h2.neonText, .about h2.neonText {
	
}

#education h2.neonText, .education h2.neonText {
	margin-left: -0.3em;
}

#work h2.neonText, .work h2.neonText {
	margin-left: -0.4em;
}

#contact h2.neonText, .contact h2.neonText {
	margin-left: -0.3em;
}

#yellowTape div.pageHead {
	padding-top: 30vh;
}

#yellowTape h2.neonText {
	margin-left: -0.3em;
}

/*** Interface ***/


@keyframes wobble {
	0% { transform: rotateZ(380deg); -webkit-transform: rotateZ(380deg); }
	100% { transform: rotateZ(340deg); -webkit-transform: rotateZ(340deg); }
}

@keyframes primeSpin {
    100% { transform: rotateZ(-25deg); -webkit-transform: rotateZ(-25deg); }
}

.spinButton {
	transform: rotateZ(360deg);
	-webkit-transform: rotateZ(360deg);
	transition: transform 1500ms cubic-bezier(0.19, 1, 0.22, 1);
	-webkit-transition: transform 1500ms cubic-bezier(0.19, 1, 0.22, 1);
}

.spinButton:focus {
    outline: none;
}

.spinButton:hover {
	transform: rotateZ(380deg);
	-webkit-transform: rotateZ(380deg);
    transition: transform 250ms;
    -webkit-transition: 250ms;
	animation: wobble 500ms 250ms ease-in-out infinite alternate;
	-webkit-animation: wobble 500ms 250ms ease-in-out infinite alternate;
}

.spinButton:active {
    transform: rotateZ(-25deg);
    transition: transform 100ms;
    animation: none;
    -webkit-animation: none;
    /*animation: primeSpin 66ms ease-out;
    -webkit-animation: primeSpin 66ms ease-out;*/
}

/***************
* Neon Effects *
***************/
/*** Background Glow ***/

/* color to change the background so as to give a more cohesive lighting impression*/

.neonGlowPink {
	background-color: #11000f;
}

.neonGlowTeal {
	background-color: #001111;
}

.neonGlowPurple {
	background-color: #0b090f;
}

.neonGlowGreen {
	background-color: #001102;
}

.neonGlowOrange {
	background-color: #110300;
}

.neonGlowRed {
	background-color: #110000
}

.neonGlowOff {
	background-color: #111111;
}
/*** Text ***/

/* Just a bunch of stacked shadow rules to give the desired glow effect */

.neonText {
	color: white;
	font-family: 'Yellowtail', cursive;
	transform: rotate(-15deg);
	margin-top: 0.3em;
	margin-bottom: 0.3em;
	
	transition: text-shadow 2.5s, color 3s;
    
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.neonTextPink {
	text-shadow: 
	0px 0px 10px #ffffff, 
	0px 0px 20px #ffffff,
	0px 0px 30px #ffffff,
	
	0px 0px 40px #ff00dd,
	0px 0px 50px #ff00dd,
	0px 0px 70px #ff00dd,
	0px 0px 100px #ff00dd;
}

.neonTextTeal {
	text-shadow: 
	0px 0px 10px #ffffff,
	0px 0px 20px #ffffff,
	0px 0px 30px #ffffff,
	
	0px 0px 40px #00ffff,
	0px 0px 50px #00ffff,
	0px 0px 70px #00ffff,
	0px 0px 100px #00ffff;
}

.neonTextPurple {
	text-shadow: 
	0px 0px 10px #ffffff,
	0px 0px 20px #ffffff,
	0px 0px 30px #ffffff,
	
	0px 0px 40px #aa88dd,
	0px 0px 50px #aa88dd,
	0px 0px 70px #aa88dd,
	0px 0px 100px #aa88dd;
}

.neonTextGreen {
	text-shadow: 
	0px 0px 10px #ffffff,
	0px 0px 20px #ffffff,
	0px 0px 30px #ffffff,
	
	0px 0px 40px #00ff22,
	0px 0px 50px #00ff22,
	0px 0px 70px #00ff22,
	0px 0px 100px #00ff22;
}

.neonTextOrange {
	text-shadow: 
	0px 0px 10px #ffffff,
	0px 0px 20px #ffffff,
	0px 0px 30px #ffffff,
	
	0px 0px 40px #ff3300,
	0px 0px 50px #ff3300,
	0px 0px 70px #ff3300,
	0px 0px 100px #ff3300;
}

.neonTextRed {
	text-shadow: 
	0px 0px 10px #ffffff,
	0px 0px 20px #ffffff,
	0px 0px 30px #ffffff,
	
	0px 0px 40px #ff0000,
	0px 0px 50px #ff0000,
	0px 0px 70px #ff0000,
	0px 0px 100px #ff0000;
}

.neonTextOff { /* this must be at the bottom of the group */
	color: #0f0f0f;
	text-shadow: none;
}

/*** Bars ***/

/* These can be stacked and aligned to make long chains,
but should be independent from all other elements on the page.
Each segment is made of an outer div with the .neonbox class and
an inner div with the .neonbar and a .neon[shape] class.

Why make these out of CSS instead of just using images?
So we can smoothly transition between whatever colors we want! */
.neonContainer {
	/* container for the neon bars, so they have a parent other than the page body.
	takes up no space on the page. */
	width: 100%;
	height: 100%;
	border: 0px;
	padding: 0px;
	margin: 0px;
	overflow: visible;
	position: absolute;
}

.neonH2BarParent {
	/*when putting a bar piece next to a neon h2 element, 
	give it's parent one of these so it's the right height.*/
	height: 4em;
	overflow: visible;
}

@media (min-width: 768px) {
    .neonH2BarParent {
        height: 8.15em;
    }
}

.neonBox { 
	/* you can adjust the width and height to make shorter segments
	The actual neon bars go inside these. */
	width: 300px;
	height: 300px;
	overflow: hidden;
	position: absolute;
}

.neonBar {
	/* defines the color and glow effect goes on the inner div */
	border: solid 3px #ffffff;
    border-radius: 3px;
	
	position: relative;
	margin: 0px;
	padding: 0px;
	
	/*the inner boxes base size is 300px, but will be stretched
	to hide any glow from distant edges. */
	height: 300px;
	width: 300px;
	
	transition: border 3s;

    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.neonSpacer {
    /*content: '';*/
    display: block;
    border: solid 3px #ffffff;
    border-radius: 3px;

    position: absolute;
    margin: 0px;
    padding: 0px;

    left: -3px;
    right: -3px;
    top: -3px;
    bottom: -3px;

    transition: opacity 2.5s;
}

/*** Bar Colors ***/

.neonPink {
	box-shadow: 
	0px 0px 10px #ffffff, 0px 0px 10px #ffffff inset,
	0px 0px 20px #ffffff, 0px 0px 20px #ffffff inset,
	0px 0px 30px #ffffff, 0px 0px 30px #ffffff inset,
	
	0px 0px 40px #ff00dd, 0px 0px 40px #ff00dd inset,
	0px 0px 50px #ff00dd, 0px 0px 50px #ff00dd inset,
	0px 0px 70px #ff00dd, 0px 0px 70px #ff00dd inset,
	0px 0px 100px #ff00dd, 0px 0px 100px #ff00dd inset;

    opacity: 1;
}

.neonTeal {
	box-shadow: 
	0px 0px 10px #ffffff, 0px 0px 10px #ffffff inset,
	0px 0px 20px #ffffff, 0px 0px 20px #ffffff inset,
	0px 0px 30px #ffffff, 0px 0px 30px #ffffff inset,
	
	0px 0px 40px #00ffff, 0px 0px 40px #00ffff inset,
	0px 0px 50px #00ffff, 0px 0px 50px #00ffff inset,
	0px 0px 70px #00ffff, 0px 0px 70px #00ffff inset,
	0px 0px 100px #00ffff, 0px 0px 100px #00ffff inset;
    
    opacity: 1;
}

.neonPurple {
	box-shadow: 
	0px 0px 10px #ffffff, 0px 0px 10px #ffffff inset,
	0px 0px 20px #ffffff, 0px 0px 20px #ffffff inset,
	0px 0px 30px #ffffff, 0px 0px 30px #ffffff inset,
	
	0px 0px 40px #aa88dd, 0px 0px 40px #aa88dd inset,
	0px 0px 50px #aa88dd, 0px 0px 50px #aa88dd inset,
	0px 0px 70px #aa88dd, 0px 0px 70px #aa88dd inset,
	0px 0px 100px #aa88dd, 0px 0px 100px #aa88dd inset;
    
    opacity: 1;
}

.neonGreen {
	box-shadow: 
	0px 0px 10px #ffffff, 0px 0px 10px #ffffff inset,
	0px 0px 20px #ffffff, 0px 0px 20px #ffffff inset,
	0px 0px 30px #ffffff, 0px 0px 30px #ffffff inset,
	
	0px 0px 40px #00ff22, 0px 0px 40px #00ff22 inset,
	0px 0px 50px #00ff22, 0px 0px 50px #00ff22 inset,
	0px 0px 70px #00ff22, 0px 0px 70px #00ff22 inset,
	0px 0px 100px #00ff22, 0px 0px 100px #00ff22 inset;
    
    opacity: 1;
}

.neonOrange {
	box-shadow: 
	0px 0px 10px #ffffff, 0px 0px 10px #ffffff inset,
	0px 0px 20px #ffffff, 0px 0px 20px #ffffff inset,
	0px 0px 30px #ffffff, 0px 0px 30px #ffffff inset,
	
	0px 0px 40px #ff3300, 0px 0px 40px #ff3300 inset,
	0px 0px 50px #ff3300, 0px 0px 50px #ff3300 inset,
	0px 0px 70px #ff3300, 0px 0px 70px #ff3300 inset,
	0px 0px 100px #ff3300, 0px 0px 100px #ff3300 inset;
    
    opacity: 1;
}

.neonRed {
	box-shadow: 
	0px 0px 10px #ffffff, 0px 0px 10px #ffffff inset,
	0px 0px 20px #ffffff, 0px 0px 20px #ffffff inset,
	0px 0px 30px #ffffff, 0px 0px 30px #ffffff inset,
	
	0px 0px 40px #ff0000, 0px 0px 40px #ff0000 inset,
	0px 0px 50px #ff0000, 0px 0px 50px #ff0000 inset,
	0px 0px 70px #ff0000, 0px 0px 70px #ff0000 inset,
	0px 0px 100px #ff0000, 0px 0px 100px #ff0000 inset;
    
    opacity: 1;
}

.neonOff {
	border: solid 6px #0f0f0f;
	box-shadow: none;
}

.opacityZero {
    opacity: 0;
}

/*** Bar Segments ***/

.neonVertical {
	/*a vertical strip*/
	left: 50px;
	height: 100%;
    width: 0px;
}

.neonHorizontal {
	/*a horizontal strip*/
	top: 50%;
	width: 100%;
    height: 0px;
}

.neonLeft {
	/*A horizontal terminus that extends out the left edge*/
	/*border-radius: 3px;
	border-width: 3px;*/
	top: 50%;
	right: 10%;
	width: 100%;
	height: 0px;
}

.neonRight {
	/*A horizontal terminus that extends out the right edge*/
	/*border-radius: 3px;
	border-width: 3px;*/
	top: 50%;
	left: 10%;
	width: 100%;
	height: 0px;
}

.neonBottomRight {
	/*A curve that touches the bottom and right edges*/
	border-radius: 100px;
	top: 147px;
	left: 147px;
}

.neonBottomLeft {
	/*A curve that touches the bottom and left edges*/
	border-radius: 100px;
	top: 147px;
	right: 147px;
}

.neonTopRight {
	/*A curve that touches the top and right edges*/
	border-radius: 100px;
	bottom: 147px;
	left: 147px;
}

.neonTopLeft {
	/*A curve that touches the top and left edges*/
	border-radius: 100px;
	bottom: 147px;
	right: 147px;
}

/*** Background Grid Bits ***/
.gridContainer {
    position: absolute;
    height: 200vw;
    width: 200vw;
    bottom: 0px;
    left: -53vw;

    /*hide for now, since there doesn't seem to be a way to optimize this as is*/
    /*visibility: hidden;*/
}

.gridOutline {
    height: 100%;
    width: 100%;
}

.gridSpacer {
    position: absolute;
    left: 0px;
    top:0px;
    bottom:0px;
    right:0px;

    will-change: opacity;
    transition: opacity 2.5s;
}

/** Verticals **/
.gridVerticals {
    height: 100%;
    width: 100%;
    position: absolute;
}

.gridVerticals .neonVertical {
    position: absolute;
    top: 0px;
}   

.gridVerticals .neonVertical:nth-child(1) {
    left: 0%;
}
.gridVerticals .neonVertical:nth-child(2) {
    left: 11.11%;
}
.gridVerticals .neonVertical:nth-child(3) {
    left: 22.22%;
}
.gridVerticals .neonVertical:nth-child(4) {
    left: 33.33%;
}
.gridVerticals .neonVertical:nth-child(5) {
    left: 44.44%;
}
.gridVerticals .neonVertical:nth-child(6) {
    left: 55.56%;
}
.gridVerticals .neonVertical:nth-child(7) {
    left: 66.67%;
}
.gridVerticals .neonVertical:nth-child(8) {
    left: 77.78%;
}
.gridVerticals .neonVertical:nth-child(9) {
    left: 88.89%;
}
.gridVerticals .neonVertical:nth-child(10) {
    left: 100%;
}

/** Horizontals **/
.gridHorizontals {
    height: 100%;
    width: 100%;
    position: absolute;
}

.gridHorizontals .neonHorizontal {
    position: absolute;
    left: 0px;
}

.gridHorizontals .neonHorizontal:nth-child(1) {
    top: 0%;
}
.gridHorizontals .neonHorizontal:nth-child(2) {
    top: 11.11%;
}
.gridHorizontals .neonHorizontal:nth-child(3) {
    top: 22.22%;
}
.gridHorizontals .neonHorizontal:nth-child(4) {
    top: 33.33%;
}
.gridHorizontals .neonHorizontal:nth-child(5) {
    top: 44.44%;
}
.gridHorizontals .neonHorizontal:nth-child(6) {
    top: 55.56%;
}
.gridHorizontals .neonHorizontal:nth-child(7) {
    top: 66.67%;
}
.gridHorizontals .neonHorizontal:nth-child(8) {
    top: 77.78%;
}
.gridHorizontals .neonHorizontal:nth-child(9) {
    top: 88.89%;
}
.gridHorizontals .neonHorizontal:nth-child(10) {
    top: 100%;
}