html {
	font-size: 10px;
	height: 100%;
}

body {
	margin: 0;
	height: 100%;
	background: #eeeef1;
}

.animations-paused *,
.animations-paused *:before,
.animations-paused *:after {
	animation-play-state: paused !important;
}

@font-face {
	font-family: 'Aldrich';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: local('Aldrich Regular'), local('Aldrich-Regular'), url(/fonts/MCoTzAn-1s3IGyJMVacY3w.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.flex-h-center {
	display: flex;
	justify-content: center;
}

.flex-hv-center {
	display: flex;
	justify-content: center;
	align-items: center;
}

.flex-hv-center-col {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

#navbar {
	height: 60px;
	background-color: #111111;
	position: fixed;
	width: 100%;
	top: 0;
	left: 0;
	z-index: 9999;
}

#nav-list {
	margin: 0;
	padding: 0;
	height: 100%;
	display: flex;
	flex-direction: row;
}

.nav-item {
	height: 100%;
	width: 60px;
	list-style: none;
	box-sizing: border-box;
	border-right: solid 1px #323232;
}

#nav-list .nav-item:first-of-type {
	border-left: solid 1px #323232;
}

.nav-link {
	color: white;
	cursor: pointer;
	font-size: 2rem;
	width: 100%;
	height: 100%;
}

body.hasHover .nav-link:hover {
	background-color: #303030;
}

.nav-link.active {
	background-color: #4d79ff !important;
}

#welcome-section {
	padding-top: 60px;
	height: calc(100% - 60px);
	background: white;
	/*min-height: 300px;*/
}

.scaling-img {
	image-rendering: -webkit-optimize-contrast;
	max-height: 100%;
	max-width: 100%;
}

#screen {
	position: absolute;
	visibility: hidden;
}

.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 */
}

.scaling-svg-container-wrapper {
	width: 25%;
}

.scaling-svg-container {
	position: relative;
	height: 0;
	padding: 0;
	padding-bottom: 100%;
	/* override this inline for aspect ratio other than square */
}

.scaling-svg {
	position: absolute;
	height: 100%;
	width: 100%;
	left: 0;
	top: 0;
}

/* "Programming_" text animation */

@keyframes fadeInOut {
	50% {
		opacity: 0;
	}
}

@keyframes move_ {
	100% {
		transform: translateX(6px);
	}
}

@keyframes move_1 {
	100% {
		transform: translateX(13px);
	}
}

@keyframes move_2 {
	100% {
		transform: translateX(21px);
	}
}

@keyframes move_3 {
	100% {
		transform: translateX(27px);
	}
}

@keyframes move_4 {
	100% {
		transform: translateX(35px);
	}
}

@keyframes move_5 {
	100% {
		transform: translateX(46px);
	}
}

@keyframes move_6 {
	100% {
		transform: translateX(57px);
	}
}

@keyframes move_7 {
	100% {
		transform: translateX(60px);
	}
}

@keyframes move_8 {
	100% {
		transform: translateX(68px);
	}
}

@keyframes move_9 {
	100% {
		transform: translateX(76px);
	}
}

#underscore {
	animation: fadeInOut 1s infinite,
	move_ 0s .075s forwards,
	move_1 0s .15s forwards,
	move_2 0s .225s forwards,
	move_3 0s .3s forwards,
	move_4 0s .375s forwards,
	move_5 0s .45s forwards,
	move_6 0s .525s forwards,
	move_7 0s .6s forwards,
	move_8 0s .675s forwards,
	move_9 0s .75s forwards;
}

#programming-text > text:not(:first-child):not(:last-child) {
	opacity: 0;
}

@keyframes reveal {
	100% {
		opacity: 1;
	}
}

#r {
	animation: reveal 0s .075s forwards;
}

#o {
	animation: reveal 0s .15s forwards;
}

#g {
	animation: reveal 0s .225s forwards;
}

#r1 {
	animation: reveal 0s .3s forwards;
}

#a {
	animation: reveal 0s .375s forwards;
}

#m {
	animation: reveal 0s .45s forwards;
}

#m1 {
	animation: reveal 0s .525s forwards;
}

#i {
	animation: reveal 0s .6s forwards;
}

#n {
	animation: reveal 0s .675s forwards;
}

#g1 {
	animation: reveal 0s .75s forwards;
}

/* Coding Animation */

#mask > path {
	stroke: white;
	stroke-width: 22;
}

@keyframes brush {
	0% { stroke-dashoffset: 280; }
	100% { stroke-dashoffset: 0; }
}

#mask > path:nth-child(1) {
	stroke-dasharray: 280;
	stroke-dashoffset: 280;
	animation: brush .5s linear forwards;
}

@keyframes brush1 {
	0% { stroke-dashoffset: 188; }
	100% { stroke-dashoffset: 0; }
}

#mask > path:nth-child(2) {
	stroke-dasharray: 188;
	stroke-dashoffset: 188;
	animation: brush1 .2s .5s linear forwards;
}

@keyframes brush2 {
	0% { stroke-dashoffset: 292; }
	100% { stroke-dashoffset: 0; }
}

#mask > path:nth-child(3) {
	stroke-dasharray: 292;
	stroke-dashoffset: 292;
	animation: brush2 .2s .7s linear forwards;
}

@keyframes brush3 {
	0% { stroke-dashoffset: 227; }
	100% { stroke-dashoffset: 0; }
}

#mask > path:nth-child(4) {
	stroke-dasharray: 227;
	stroke-dashoffset: 227;
	animation: brush3 .1s .9s linear forwards;
}

@keyframes brush4 {
	0% { stroke-dashoffset: 43; }
	100% { stroke-dashoffset: 0; }
}

#mask > path:nth-child(5) {
	stroke-dasharray: 43;
	stroke-dashoffset: 43;
	animation: brush4 .1s 1s linear forwards;
}

@keyframes brush5 {
	0% { stroke-dashoffset: 42; }
	100% { stroke-dashoffset: 0; }
}

#mask > path:nth-child(6) {
	stroke-dasharray: 42;
	stroke-dashoffset: 42;
	animation: brush5 .1s 1.1s linear forwards;
}

#group1 {
	animation: scroll 1.2s linear;
	animation-delay: 1.2s;
}

@keyframes scroll {
	0% { transform: translateY(initial); }
	100% { transform: translateY(-165px); }
}

#group2 {
	opacity: 0;
	animation: scroll2 1.2s linear;
	animation-delay: 1.2s;
}

@keyframes scroll2 {
	0% { transform: translateY(165px); }
	100% { transform: translateY(0px); }
}

/* Fades */

@keyframes fadeOut {
	100% {
		opacity: 0;
	}
}

.fadeOut {
	animation: fadeOut .4s .2s linear forwards;
}

.fadeOut1 {
	animation: fadeOut .4s 3s linear forwards;
}

@keyframes fadeIn {
	100% {
		opacity: 1;
	}
}

.fadeIn {
	animation: fadeIn .6s linear forwards;
}

/* Cogs */

@keyframes rotateIn {
	0% {
		transform: rotate3d(-1, 1, 0, -180deg);
	}
}

@keyframes rotateIn1 {
	0% {
		transform: rotate3d(0, 1, 0, 180deg);
	}
}

@keyframes rotateIn2 {
	0% {
		transform: rotate3d(0, 1, 0, 180deg);
	}
}

@keyframes rotateIn3 {
	0% {
		transform: rotate3d(1, -1, 0, 100deg);
	}
}

@keyframes rotateIn4 {
	0% {
		transform: rotate3d(1, 1, 0, 180deg);
	}
}

@keyframes rotateIn5 {
	0% {
		transform: rotate3d(-1, 1, 0, 70deg);
	}

	100% {
		opacity: 1;
	}
}

#cog1 {
	animation: rotateIn .7s linear forwards;
}

#cog2 {
	animation: rotateIn1 .7s linear forwards;
}

#cog3 {
	animation: rotateIn2 .9s linear forwards;
}

#cog4 {
	animation: rotateIn3 .9s linear forwards;
}

#cog5 {
	animation: rotateIn4 .9s linear forwards;
}

#cog6 {
	animation: rotateIn5 .9s linear forwards;
}

#seamless-svg {
	opacity: 0;
}

/* Button SVG */

#lid {
  animation: blink 3.4s infinite;
}
#eye {
  animation: squeeze 3.4s infinite;
}

@keyframes blink {
  90% {
    transform: none;
    animation-timing-function: ease-in;
  }
  93% {
    transform: translateY(15px) scaleY(0)
  }
  100% {
    animation-timing-function: ease-out;
  }
}

@keyframes squeeze {
  90% {
    transform: none;
    animation-timing-function: ease-in;
  }
  93% {
    transform: translateY(3px) scaleY(0.8)
  }
  100% {
    animation-timing-function: ease-out;
  }
}

.cursor-pointer {
	cursor: pointer;
}

#view-svg {
	opacity: 0;
}

#view-svg:focus {
	outline: dotted grey 1px;
}