html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section{display:block;}
body{line-height:1;}
ol, ul{list-style:none;}
blockquote, q{quotes:none;}
blockquote:before, blockquote:after,
q:before, q:after{content:'';content:none;}
table{border-collapse:collapse;border-spacing:0;}
img{width:100%;max-width:inherit;}
h1{margin-bottom:0.5em;font-size:3.5em;font-weight:700;}
h2{margin-bottom:0.5em;font-size:2em;font-weight:600;font-family:"Libre Franklin", Helvetica, "Franklin Gothic", sans-serif;}
h3{margin-bottom:0.5em;font-size:2em;font-family:"Libre Franklin", Helvetica, "Franklin Gothic", sans-serif;}
h4{font-size:1.5em;font-family:"Lora", Baskerville, serif;margin-bottom:1em;}
article{font-size:1em;font-family:"Lora", Baskerville, serif;}
p{margin-bottom:0.75em;font-family:"Lora", Baskerville, serif;font-size:1em;}
button, input[type='submit']{overflow:hidden;display:inline-block;position:relative;background:linear-gradient(90deg, #d16666, #00ade0);border-radius:0;border:none;font-style:italic;font-size:1.4em;font-weight:400;padding:0.4em 0.9em;color:#efefef;}
nav{height:auto;width:100%;display:flex;justify-content:space-between;align-items:center;}
nav ul{width:auto;list-style:none;margin-right:1.25em;}
nav ul li{display:inline-block;margin:0 0.75em;}
nav ul li a{position:relative;font-size:1.25em;color:#efefef;text-decoration:none;}
nav ul li a:before{content:'';background:#efefef;position:absolute;bottom:-0.1em;left:0;width:100%;height:2px;visibility:hidden;transition:all 0.4s cubic-bezier(0.5475, 0.0085, 0.7678, 0.9508);transform:scaleX(0);}
nav ul li a:hover:before{visibility:visible;transform:scaleX(1);}
nav ul li a:hover{cursor:pointer;color:#efefef;text-decoration:none;}
nav .logo-container{background-image:url("../images/logo.svg");background-position:center center;background-size:contain;background-repeat:no-repeat;width:auto;height:auto;margin-top:0.5em;margin-left:2em;}
nav .logo-container img{opacity:0;}
#mobile-nav-bar{transition:background-color 0.1s linear 0.3s;padding-top:0.5em;display:none;justify-content:flex-start;align-items:baseline;width:100%;height:auto;}
#mobile-nav-bar .logo-container{margin:0;position:absolute;top:0.5em;width:120px;right:calc(50% - 60px);}
#mobile-nav-bar .mobile-menu{transition:max-height 0.3s cubic-bezier(0.4, 0, 1, 1);margin:1em auto;max-height:0px;overflow:hidden;}
#mobile-nav-bar .mobile-menu ul{transition:all 0.5s cubic-bezier(0.5475, 0.0085, 0.7678, 0.9508);width:100%;width:auto;list-style:none;margin:0 auto;}
#mobile-nav-bar .mobile-menu ul li{display:block;text-align:center;margin:0.25em auto;}
#mobile-nav-bar .mobile-menu ul li a{position:relative;font-size:1.5em;color:#202130;text-decoration:none;}
#mobile-nav-bar .mobile-menu ul li a:before{background:#202130;}
#mobile-nav-bar #menu-holder{margin-left:1em;}
#mobile-nav-bar #menu-holder .bar1, #mobile-nav-bar #menu-holder .bar2, #mobile-nav-bar #menu-holder .bar3, #mobile-nav-bar #menu-holder .bar4, #mobile-nav-bar #menu-holder .bar5{position:relative;margin:0 auto;height:4px;width:80%;background-color:#efefef;}
#mobile-nav-bar #menu-holder .bar1{top:calc(30% - 4px);transform:scaleX(1);transform-origin:left center;transition:transform 0.15s cubic-bezier(0.5475, 0.0085, 0.7678, 0.9508) 0.55s, background-color 0.2s cubic-bezier(0.5475, 0.0085, 0.7678, 0.9508);}
#mobile-nav-bar #menu-holder .bar2{top:calc(50% - 8px);transform:scaleX(1);transform-origin:left center;transition:transform 0.15s cubic-bezier(0.5475, 0.0085, 0.7678, 0.9508) 0.4s, background-color 0.2s cubic-bezier(0.5475, 0.0085, 0.7678, 0.9508);}
#mobile-nav-bar #menu-holder .bar3{top:calc(70% - 12px);width:50%;left:-15%;transform:scaleX(1);transform-origin:left center;transition:transform 0.15s cubic-bezier(0.5475, 0.0085, 0.7678, 0.9508) 0.3s, background-color 0.2s cubic-bezier(0.5475, 0.0085, 0.7678, 0.9508);}
#mobile-nav-bar #menu-holder .bar4{transform-origin:center center;top:calc(50% - 16px);transition:transform 0.2s cubic-bezier(0.5475, 0.0085, 0.7678, 0.9508), background-color 0.2s cubic-bezier(0.5475, 0.0085, 0.7678, 0.9508);transform:rotate(45deg) scaleX(0);}
#mobile-nav-bar #menu-holder .bar5{transform-origin:center center;top:calc(50% - 20px);transition:transform 0.2s cubic-bezier(0.5475, 0.0085, 0.7678, 0.9508) 0.1s, background-color 0.2s cubic-bezier(0.5475, 0.0085, 0.7678, 0.9508);transform:rotate(-45deg) scaleX(0);}
#mobile-nav-bar.is-open{background-color:#efefef;transition:background-color 0.15s linear;}
#mobile-nav-bar.is-open .mobile-menu{max-height:135px;}
#mobile-nav-bar.is-open #menu-holder .bar1, #mobile-nav-bar.is-open #menu-holder .bar2, #mobile-nav-bar.is-open #menu-holder .bar3, #mobile-nav-bar.is-open #menu-holder .bar4, #mobile-nav-bar.is-open #menu-holder .bar5{background-color:#202130;}
#mobile-nav-bar.is-open #menu-holder .bar1{transform:scaleX(0);transition:transform 0.15s cubic-bezier(0.5475, 0.0085, 0.7678, 0.9508), background-color 0.2s cubic-bezier(0.5475, 0.0085, 0.7678, 0.9508);}
#mobile-nav-bar.is-open #menu-holder .bar2{transform:scaleX(0);transition:transform 0.15s cubic-bezier(0.5475, 0.0085, 0.7678, 0.9508) 0.1s, background-color 0.2s cubic-bezier(0.5475, 0.0085, 0.7678, 0.9508);}
#mobile-nav-bar.is-open #menu-holder .bar3{transform:scaleX(0);transition:transform 0.15s cubic-bezier(0.5475, 0.0085, 0.7678, 0.9508) 0.25s, background-color 0.2s cubic-bezier(0.5475, 0.0085, 0.7678, 0.9508);}
#mobile-nav-bar.is-open #menu-holder .bar4{transform:rotate(45deg) scaleX(1);transition:transform 0.2s cubic-bezier(0.5475, 0.0085, 0.7678, 0.9508) 0.5s, background-color 0.2s cubic-bezier(0.5475, 0.0085, 0.7678, 0.9508);}
#mobile-nav-bar.is-open #menu-holder .bar5{transform:rotate(-45deg) scaleX(1);transition:transform 0.2s cubic-bezier(0.5475, 0.0085, 0.7678, 0.9508) 0.4s, background-color 0.2s cubic-bezier(0.5475, 0.0085, 0.7678, 0.9508);}
#mobile-nav-bar #menu-holder{width:60px;height:60px;background-color:transparent;position:relative;}
#mobile-nav-bar .mobile-social-media{display:flex;flex-direction:row;justify-content:space-around;align-items:center;margin-top:5px;}
#mobile-nav-bar .mobile-social-media .social-media-img{width:35px;margin:0 5px;}
@media (max-width:680px){#nav-bar, #social-media-container{display:none !important;}
#mobile-nav-bar{display:flex;}
}
#landing-screen{z-index:5;display:none;width:100%;height:100vh;}
#title-text{margin-left:20%;float:left;padding-left:2em;position:relative;top:30%;}
#title-text h4{margin-bottom:1.75em;}
#social-media-container{top:30%;float:right;margin-right:2em;position:relative;z-index:2;display:flex;flex-direction:column;justify-content:space-between;}
#social-media-container .social-media-img{width:30px;margin:10px 0;}
.hover::before{animation:0.5s cubic-bezier(0.5475, 0.0085, 0.7678, 0.9508) 0s button;}
div.button{display:inline-block;overflow:hidden;position:relative;height:auto;}
div.button::before{z-index:1;transform-origin:left;transform:scaleX(0);background-color:#00ade0;content:'';position:absolute;top:0;left:0;width:100%;height:100%;}
@media (max-width:850px) and (min-width:651px){#title-text{font-size:0.91em;margin-left:5%;}
}
@media (max-width:650px){#title-text{font-size:0.85em;margin-left:1%;}
}
#svg-container img{z-index:-10;width:auto;}
#g-svg{position:absolute;top:63%;left:55%;}
#o-svg{position:absolute;top:60%;left:10%;}
#s-svg{position:absolute;top:18%;left:7%;}
#w-svg{position:absolute;top:18%;left:61%;}
#v-svg{position:absolute;top:71%;left:90%;}
#square-blue{position:absolute;top:83%;left:69%;}
#square-green{position:absolute;top:20%;left:31%;}
#star-purple{position:absolute;top:82%;left:11%;}
#star-red{position:absolute;top:53%;left:76%;}
#triangle-svg{position:absolute;top:19%;left:81%;}
#svg-container{position:absolute;width:100%;height:100vh;overflow-x:hidden;z-index:-1;}
#contact-form-container{z-index:10;position:absolute;top:0;left:0;background-color:transparent;width:100%;height:100vh;display:none;transition:background-color 1s cubic-bezier(0.5475, 0.0085, 0.7678, 0.9508);align-items:center;justify-content:center;flex-direction:row;}
#contact-form-container h3{margin-bottom:0.6em;}
#about-me, #contact-form{overflow:hidden;z-index:1;transition:left 1s cubic-bezier(0.5475, 0.0085, 0.7678, 0.9508), right 1s cubic-bezier(0.5475, 0.0085, 0.7678, 0.9508);position:relative;width:44%;height:70vh;padding:5% 5%;max-width:425px;display:flex;flex-direction:column;justify-content:center;}
#about-me::after, #contact-form::after{z-index:-1;top:5%;content:'';background-image:url(../images/logo.svg);background-repeat:no-repeat;background-size:75%;filter:opacity(0.25);position:absolute;height:95%;width:100%;}
.contact-title{margin-bottom:1em;}
#about-me{left:-1000px;background-color:#efefef;color:black;}
#about-me::after{background-position-x:250%;right:0;}
#contact-form{right:-1000px;background-color:#252525;color:white;}
#contact-form h3{margin-bottom:0.2em;}
#contact-form::after{background-position-x:-150%;left:0;}
#close-form{position:absolute;right:2.5%;top:3%;color:#efefef;transition:all 0.4s ease-in-out;transform-origin:center center;}
#close-form:hover{color:#d62828;transform:rotate(360deg);cursor:pointer;}
.special-phrase{transition:color .2s linear;color:#00ade0;}
.special-phrase:hover, .special-phrase:focus{color:#d16666;}
.skill-image{margin-top:5%;max-width:80px;background-size:contain;background-repeat:no-repeat;background-position:center center;width:20%;transition:all 0.5s ease-out;}
.skill-image::after{display:block;position:relative;text-align:center;transition:all 0.5s ease-out;}
.skill-image:nth-child(1){background-image:url("../images/about-me/react-bw.svg");}
.skill-image:nth-child(1)::after{content:'React';opacity:0;}
.skill-image:nth-child(1):hover, .skill-image:nth-child(1):focus{background-image:url("../images/about-me/react.svg");}
.skill-image:nth-child(1):hover::after, .skill-image:nth-child(1):focus::after{opacity:1;transform:translateY(24px);}
.skill-image:nth-child(2){background-image:url("../images/about-me/node-bw.svg");}
.skill-image:nth-child(2)::after{content:'Node';opacity:0;}
.skill-image:nth-child(2):hover, .skill-image:nth-child(2):focus{background-image:url("../images/about-me/node.svg");}
.skill-image:nth-child(2):hover::after, .skill-image:nth-child(2):focus::after{opacity:1;transform:translateY(29px);}
.skill-image:nth-child(3){background-image:url("../images/about-me/sass-bw.svg");}
.skill-image:nth-child(3)::after{content:'Sass';opacity:0;}
.skill-image:nth-child(3):hover, .skill-image:nth-child(3):focus{background-image:url("../images/about-me/sass.svg");}
.skill-image:nth-child(3):hover::after, .skill-image:nth-child(3):focus::after{opacity:1;transform:translateY(19px);}
.skill-image:nth-child(4){background-image:url("../images/about-me/css-bw.svg");}
.skill-image:nth-child(4)::after{content:'CSS3';opacity:0;}
.skill-image:nth-child(4):hover, .skill-image:nth-child(4):focus{background-image:url("../images/about-me/css.svg");}
.skill-image:nth-child(4):hover::after, .skill-image:nth-child(4):focus::after{opacity:1;transform:translateY(15px);}
.skill-image img{opacity:0;}
label, textarea, input{display:block;}
label{margin-bottom:0.2em;font-family:"Libre Franklin", Helvetica, "Franklin Gothic", sans-serif;font-size:1.1em;}
input[type='text'], input[type='email'], textarea{outline:none;font-size:12pt;color:#efefef;border:none;border-bottom:2px solid #efefef;background:transparent;width:100%;margin-bottom:0.75em;font-family:"Lora", Baskerville, serif;}
input[type='text']:focus, input[type='email']:focus, textarea:focus{border-color:#d16666;}
div.focus-border{position:relative;}
div.focus-border span::before, div.focus-border span::after{content:'';position:absolute;bottom:0;left:0;width:100%;height:2px;transition:all 0.3s cubic-bezier(0.5475, 0.0085, 0.7678, 0.9508);transform:scaleX(0);}
div.focus-border span::before{transition-delay:0s;z-index:2;background-color:#d16666;transform-origin:left;}
div.focus-border span::after{transition-delay:0.2s;background-color:#00ade0;transform-origin:right;}
div.focus-border span:hover::before, div.focus-border span:hover::after{transform:scaleX(1);}
div.focus-border span:hover::before{transition-delay:0.2s;z-index:2;}
div.focus-border span:hover::after{transition-delay:0s;}
#contact-form form:hover ~ span.focus-border::before{transform:scaleX(1);}
@media (min-width:801px) and (max-width:1050px){#about-me, #contact-form{padding:4% 2.5%;height:75vh;}
#about-me::after, #contact-form::after{top:15%;background-size:85%;}
#about-me::after{background-position-x:382%;}
#contact-form::after{background-position-x:-281%;}
#contact-form-container h3{font-size:2em;}
#contact-form-container p{font-size:1em;}
}
@media (max-width:800px), (min-device-pixel-ratio:2){#contact-form-container{flex-direction:column-reverse;height:auto;}
#contact-form-container h3{font-size:2em;}
#contact-form-container p{font-size:1em;}
#about-me, #contact-form{padding:30px 20px;height:initial;width:95%;max-width:none;}
#about-me::after, #contact-form::after{background-size:75%;height:initial;position:absolute;width:100%;}
#about-me::after{background-position-x:50%;background-position-y:-297px;top:0;height:100%;}
#contact-form::after{top:0;background-position-x:50%;background-position-y:198px;bottom:0;}
.skill-image{max-width:60px;margin-top:2%;}
input[type='text'], input[type='email'], textarea{font-size:11pt;width:100%;margin-bottom:0.65em;}
}
@keyframes button{0%{transform-origin:left;transform:scaleX(0);}
50%{transform:scaleX(1);transform-origin:left;}
51%{transform-origin:right;}
100%{transform:scaleX(0);transform-origin:right;}
}
#projects{display:flex;flex-direction:column;width:100%;background:#efefef;z-index:3;padding:100px 0;overflow:hidden;}
#projects > h1{margin-bottom:1.5em;color:#202130;text-align:left;margin-left:8.5%;}
.flex-row{width:100%;display:flex;flex-direction:row;justify-content:space-around;}
.project{margin:35px 0;overflow:hidden;display:block;opacity:0;box-shadow:2px 0px 4px rgba(0, 0, 0, 0.5), -2px 0px 4px rgba(0, 0, 0, 0.5), 0px -2px 4px rgba(0, 0, 0, 0.5), 0px 2px 4px rgba(0, 0, 0, 0.5);width:55%;max-width:600px;position:relative;}
.project h3{padding-top:0.1em;padding-left:0.2em;margin-bottom:0.1em;}
.project p{padding-left:0.4em;}
.project .project-info{width:100%;position:absolute;top:0;height:100%;color:white;}
.project .project-info .project-title{transition:all 0.4s cubic-bezier(0.32, 0.2, 0.1, 0.97);width:100%;font-size:2.2em;}
.project .project-info .project-desc{transform:translateX(100%);transition:all 0.4s cubic-bezier(0.32, 0.2, 0.1, 0.97);flex:1 1 auto;padding-top:0.3em;background-color:rgba(0, 0, 0, 0.65);width:100%;font-size:1.6em;}
.project::after{clear:both;content:'';display:block;}
.project:hover .project-info .project-title, .project:hover .project-info .project-desc, .project:focus .project-info .project-title, .project:focus .project-info .project-desc{transform:translateX(0);}
.project:nth-of-type(2n+1){transform:translateX(-50vw);align-self:flex-start;left:8.5%;}
.project:nth-of-type(2n+1) .project-title{background-color:rgba(209, 102, 102, 0.6);transform:translateX(-100%);}
.project:nth-of-type(2n+1) .project-desc{transform:translateX(100%);}
.project:nth-of-type(2n){transform:translateX(50vw);align-self:flex-end;right:8.5%;}
.project:nth-of-type(2n) .project-title{transform:translateX(100%);background-color:rgba(0, 173, 224, 0.6);}
.project:nth-of-type(2n) .project-desc{transform:translateX(-100%);}
.flex-col{display:flex;flex-direction:column;justify-content:center;}
.appear{transform:translateX(0) !important;opacity:1 !important;}
.scroll{transition:all 0.5s ease-out;}
@media screen and (max-width:900px) and (min-width:701px){.project .project-info .project-title{font-size:1.8em;}
.project .project-info .project-desc{font-size:1.1em;}
}
@media (max-width:700px), (min-device-pixel-ratio:2){.project:nth-of-type(2n){left:0;margin:60px auto;}
.project:nth-of-type(2n+1){left:0;margin:60px auto;}
#projects > h1{margin-bottom:0.25em;}
.project{width:65%;}
.project .project-info .project-title{font-size:1.3em;}
.project .project-info .project-desc{font-size:1em;}
}
@media (min-device-pixel-ratio:2.1){.project{width:90% !important;}
}
#experiments > h1{margin-bottom:0.6em;color:#efefef;text-align:left;margin-left:10%;}
#experiments{width:100%;z-index:1;background-color:#2c4251;padding:100px 0;overflow:hidden;}
.exp-row{flex-wrap:wrap;justify-content:space-around;height:auto;}
.exp-container{width:80%;margin:0 auto;padding:0;}
.clips{position:absolute;top:0;left:0;width:0;height:0;opacity:0;z-index:-100;}
.cubeHolder{margin-top:50px;perspective:5000px;position:relative;width:288px;height:288px;}
.cubeHolder a.links{transform-origin:144px 144px -144px;display:block;position:absolute;z-index:1;transform:translateZ(72px);width:100%;height:100%;}
.cubeHolder a.links:nth-child(1){top:0;left:0;height:50%;clip-path:polygon(50% 100%, 0 0, 100% 0);}
.cubeHolder a.links:nth-child(1):hover ~ .cube, .cubeHolder a.links:nth-child(1):focus ~ .cube{transform:rotateX(-0.5turn);}
.cubeHolder a.links:nth-child(1):hover ~ .cube div:nth-child(6), .cubeHolder a.links:nth-child(1):focus ~ .cube div:nth-child(6){transform:rotateY(180deg) rotateZ(180deg) translateZ(288px);}
.cubeHolder a.links:nth-child(2){top:0;right:0;width:50%;clip-path:polygon(100% 100%, 0 50%, 100% 0);}
.cubeHolder a.links:nth-child(2):hover ~ .cube, .cubeHolder a.links:nth-child(2):focus ~ .cube{transform:rotateY(-0.5turn);}
.cubeHolder a.links:nth-child(3){bottom:0;right:0;height:50%;clip-path:polygon(0 100%, 50% 0, 100% 100%);}
.cubeHolder a.links:nth-child(3):hover ~ .cube, .cubeHolder a.links:nth-child(3):focus ~ .cube{transform:rotateX(0.5turn);}
.cubeHolder a.links:nth-child(3):hover ~ .cube div:nth-child(6), .cubeHolder a.links:nth-child(3):focus ~ .cube div:nth-child(6){transform:rotateY(180deg) rotateZ(180deg) translateZ(288px);}
.cubeHolder a.links:nth-child(4){bottom:0;left:0;width:50%;clip-path:polygon(0 100%, 0 0, 100% 50%);}
.cubeHolder a.links:nth-child(4):hover ~ .cube, .cubeHolder a.links:nth-child(4):focus ~ .cube{transform:rotateY(0.5turn);}
.cubeHolder a.links:nth-child(1):hover, .cubeHolder a.links:nth-child(1):focus, .cubeHolder a.links:nth-child(2):hover, .cubeHolder a.links:nth-child(2):focus, .cubeHolder a.links:nth-child(3):hover, .cubeHolder a.links:nth-child(3):focus, .cubeHolder a.links:nth-child(4):hover, .cubeHolder a.links:nth-child(4):focus{z-index:2;transform:translateZ(108px);width:100% !important;height:100% !important;clip-path:none !important;transition:all 100ms ease 500ms;}
.cube{transform-style:preserve-3d;transition:all 300ms ease-out;transform-origin:144px 144px -144px;position:relative;z-index:0;display:block;width:100%;height:100%;}
.cube div.cubes{text-align:center;background-position:center center;background-repeat:no-repeat;background-size:contain;color:#efefef;display:flex;align-items:center;align-content:center;justify-content:center;position:absolute;top:0;left:0;width:100%;height:100%;}
.cube div.cubes:nth-child(1){transform-origin:center top;transform:rotateX(90deg) translateY(-288px);}
.cube div.cubes:nth-child(2){transform-origin:center bottom;transform:rotateX(-90deg) translateY(288px);}
.cube div.cubes:nth-child(3){transform-origin:left center;transform:rotateY(-90deg) translateX(-288px);}
.cube div.cubes:nth-child(4){transform-origin:right center;transform:rotateY(90deg) translateX(288px);}
.cube div.cubes:nth-child(5){transform-origin:center center;transform:rotateX(0);}
.cube div.cubes:nth-child(6){transform-origin:center center;transform:rotateY(180deg) translateZ(288px);}
.cube.conway .cubes:nth-child(5){background-image:url("../images/experiments/gameoflife.png");}
.cube.simon .cubes:nth-child(5){background-image:url("../images/experiments/simonsays.png");}
.cube.harmonic .cubes:nth-child(5){background-image:url("../images/experiments/harmonic.png");}
.cube.calc .cubes:nth-child(5){background-image:url("../images/experiments/calc.png");}
.cube.circles .cubes:nth-child(5){background-image:url("../images/experiments/circles.jpg");}
.cube.perlin .cubes:nth-child(5){background-image:url("../images/experiments/perlin.jpg");}
.cube.pixel_sort .cubes:nth-child(5){background-image:url("../images/experiments/pixel_sort.png");}
.cube.metamorphthis .cubes:nth-child(5){background-image:url("../images/experiments/metamorphthis.png");}
.cubeHolder:nth-child(2n+1) .cubes:nth-child(-n+4){background:#d16666;}
.cubeHolder:nth-child(2n+1) .cubes:nth-child(6){background:#dd8d8d;}
.cubeHolder:nth-child(2n) .cubes:nth-child(-n+4){background:#00ade0;}
.cubeHolder:nth-child(2n) .cubes:nth-child(6){background:#14c9ff;}
.rotate{transform:rotateY(1turn);}
@media screen and (min-width:1501px){.cubeHolder{width:400px;height:400px;}
.cubeHolder a.links{transform-origin:200px 200px -200px;transform:translateZ(100px);}
.cubeHolder a.links:nth-child(1):hover ~ .cube div:nth-child(6), .cubeHolder a.links:nth-child(1):focus ~ .cube div:nth-child(6){transform:rotateY(180deg) rotateZ(180deg) translateZ(400px);}
.cubeHolder a.links:nth-child(3):hover ~ .cube div:nth-child(6), .cubeHolder a.links:nth-child(3):focus ~ .cube div:nth-child(6){transform:rotateY(180deg) rotateZ(180deg) translateZ(400px);}
.cubeHolder a.links:nth-child(1):hover, .cubeHolder a.links:nth-child(1):focus, .cubeHolder a.links:nth-child(2):hover, .cubeHolder a.links:nth-child(2):focus, .cubeHolder a.links:nth-child(3):hover, .cubeHolder a.links:nth-child(3):focus, .cubeHolder a.links:nth-child(4):hover, .cubeHolder a.links:nth-child(4):focus{transform:translateZ(150px);}
.cube{transform-origin:200px 200px -200px;}
.cube div.cubes:nth-child(1){transform:rotateX(90deg) translateY(-400px);}
.cube div.cubes:nth-child(2){transform:rotateX(-90deg) translateY(400px);}
.cube div.cubes:nth-child(3){transform:rotateY(-90deg) translateX(-400px);}
.cube div.cubes:nth-child(4){transform:rotateY(90deg) translateX(400px);}
.cube div.cubes:nth-child(6){transform:rotateY(180deg) translateZ(400px);}
}
@media screen and (min-width:1201px) and (max-width:1500px){.cubeHolder{width:288px;height:288px;}
.cubeHolder a.links{transform-origin:144px 144px -144px;transform:translateZ(72px);}
.cubeHolder a.links:nth-child(1):hover ~ .cube div:nth-child(6), .cubeHolder a.links:nth-child(1):focus ~ .cube div:nth-child(6){transform:rotateY(180deg) rotateZ(180deg) translateZ(288px);}
.cubeHolder a.links:nth-child(3):hover ~ .cube div:nth-child(6), .cubeHolder a.links:nth-child(3):focus ~ .cube div:nth-child(6){transform:rotateY(180deg) rotateZ(180deg) translateZ(288px);}
.cubeHolder a.links:nth-child(1):hover, .cubeHolder a.links:nth-child(1):focus, .cubeHolder a.links:nth-child(2):hover, .cubeHolder a.links:nth-child(2):focus, .cubeHolder a.links:nth-child(3):hover, .cubeHolder a.links:nth-child(3):focus, .cubeHolder a.links:nth-child(4):hover, .cubeHolder a.links:nth-child(4):focus{transform:translateZ(108px);}
.cube{transform-origin:144px 144px -144px;}
.cube div.cubes:nth-child(1){transform:rotateX(90deg) translateY(-288px);}
.cube div.cubes:nth-child(2){transform:rotateX(-90deg) translateY(288px);}
.cube div.cubes:nth-child(3){transform:rotateY(-90deg) translateX(-288px);}
.cube div.cubes:nth-child(4){transform:rotateY(90deg) translateX(288px);}
.cube div.cubes:nth-child(6){transform:rotateY(180deg) translateZ(288px);}
}
@media screen and (min-width:901px) and (max-width:1200px){.cubeHolder{width:240px;height:240px;}
.cubeHolder a.links{transform-origin:120px 120px -120px;transform:translateZ(60px);}
.cubeHolder a.links:nth-child(1):hover ~ .cube div:nth-child(6), .cubeHolder a.links:nth-child(1):focus ~ .cube div:nth-child(6){transform:rotateY(180deg) rotateZ(180deg) translateZ(240px);}
.cubeHolder a.links:nth-child(3):hover ~ .cube div:nth-child(6), .cubeHolder a.links:nth-child(3):focus ~ .cube div:nth-child(6){transform:rotateY(180deg) rotateZ(180deg) translateZ(240px);}
.cubeHolder a.links:nth-child(1):hover, .cubeHolder a.links:nth-child(1):focus, .cubeHolder a.links:nth-child(2):hover, .cubeHolder a.links:nth-child(2):focus, .cubeHolder a.links:nth-child(3):hover, .cubeHolder a.links:nth-child(3):focus, .cubeHolder a.links:nth-child(4):hover, .cubeHolder a.links:nth-child(4):focus{transform:translateZ(90px);}
.cube{transform-origin:120px 120px -120px;}
.cube div.cubes:nth-child(1){transform:rotateX(90deg) translateY(-240px);}
.cube div.cubes:nth-child(2){transform:rotateX(-90deg) translateY(240px);}
.cube div.cubes:nth-child(3){transform:rotateY(-90deg) translateX(-240px);}
.cube div.cubes:nth-child(4){transform:rotateY(90deg) translateX(240px);}
.cube div.cubes:nth-child(6){transform:rotateY(180deg) translateZ(240px);}
}
@media screen and (min-width:701px) and (max-width:900px){.cubeHolder{width:192px;height:192px;}
.cubeHolder a.links{transform-origin:96px 96px -96px;transform:translateZ(48px);}
.cubeHolder a.links:nth-child(1):hover ~ .cube div:nth-child(6), .cubeHolder a.links:nth-child(1):focus ~ .cube div:nth-child(6){transform:rotateY(180deg) rotateZ(180deg) translateZ(192px);}
.cubeHolder a.links:nth-child(3):hover ~ .cube div:nth-child(6), .cubeHolder a.links:nth-child(3):focus ~ .cube div:nth-child(6){transform:rotateY(180deg) rotateZ(180deg) translateZ(192px);}
.cubeHolder a.links:nth-child(1):hover, .cubeHolder a.links:nth-child(1):focus, .cubeHolder a.links:nth-child(2):hover, .cubeHolder a.links:nth-child(2):focus, .cubeHolder a.links:nth-child(3):hover, .cubeHolder a.links:nth-child(3):focus, .cubeHolder a.links:nth-child(4):hover, .cubeHolder a.links:nth-child(4):focus{transform:translateZ(72px);}
.cube{transform-origin:96px 96px -96px;}
.cube div.cubes:nth-child(1){transform:rotateX(90deg) translateY(-192px);}
.cube div.cubes:nth-child(2){transform:rotateX(-90deg) translateY(192px);}
.cube div.cubes:nth-child(3){transform:rotateY(-90deg) translateX(-192px);}
.cube div.cubes:nth-child(4){transform:rotateY(90deg) translateX(192px);}
.cube div.cubes:nth-child(6){transform:rotateY(180deg) translateZ(192px);}
}
@media screen and (max-width:700px), (min-device-pixel-ratio:2){.cubeHolder{width:288px;height:288px;}
.cubeHolder a.links{transform-origin:144px 144px -144px;transform:translateZ(72px);}
.cubeHolder a.links:nth-child(1):hover ~ .cube div:nth-child(6), .cubeHolder a.links:nth-child(1):focus ~ .cube div:nth-child(6){transform:rotateY(180deg) rotateZ(180deg) translateZ(288px);}
.cubeHolder a.links:nth-child(3):hover ~ .cube div:nth-child(6), .cubeHolder a.links:nth-child(3):focus ~ .cube div:nth-child(6){transform:rotateY(180deg) rotateZ(180deg) translateZ(288px);}
.cubeHolder a.links:nth-child(1):hover, .cubeHolder a.links:nth-child(1):focus, .cubeHolder a.links:nth-child(2):hover, .cubeHolder a.links:nth-child(2):focus, .cubeHolder a.links:nth-child(3):hover, .cubeHolder a.links:nth-child(3):focus, .cubeHolder a.links:nth-child(4):hover, .cubeHolder a.links:nth-child(4):focus{transform:translateZ(108px);}
.cube{transform-origin:144px 144px -144px;}
.cube div.cubes:nth-child(1){transform:rotateX(90deg) translateY(-288px);}
.cube div.cubes:nth-child(2){transform:rotateX(-90deg) translateY(288px);}
.cube div.cubes:nth-child(3){transform:rotateY(-90deg) translateX(-288px);}
.cube div.cubes:nth-child(4){transform:rotateY(90deg) translateX(288px);}
.cube div.cubes:nth-child(6){transform:rotateY(180deg) translateZ(288px);}
#experiments > h1{margin-bottom:0;}
.exp-row{flex-direction:column;justify-content:space-around;align-items:center;}
.exp-row .cubeHolder{margin-top:75px;}
.exp-row .cubeHolder:first-of-type{margin-top:100px;}
}
footer{background-color:#202130;width:100%;margin:3em auto;max-width:1000px;display:flex;flex-direction:column;align-items:center;}
footer .links{width:100%;display:flex;flex-direction:row;justify-content:space-around;align-items:center;}
footer .links a{position:relative;font-size:1.25em;color:#efefef;text-decoration:none;}
footer .links a:before{content:'';background:#efefef;position:absolute;bottom:-0.1em;left:0;width:100%;height:2px;visibility:hidden;transition:all 0.4s cubic-bezier(0.5475, 0.0085, 0.7678, 0.9508);transform:scaleX(0);}
footer .links a:hover:before{visibility:visible;transform:scaleX(1);}
footer .links a:hover{cursor:pointer;color:#efefef;text-decoration:none;}
footer p{margin-top:2em;}
@media screen and (max-width:500px){footer{font-size:0.8em;}
}