body {
  --base-delay: 1.2s;
  --delay-mul: 1;
}
body.instant-load {
  --delay-mul: 0;
  --base-delay: 0s;
}
@media (max-width: 900px) {
  body {
    overflow-y: auto !important;
    scroll-behavior: smooth;
  }
  body #mobile-spacer {
    height: 200px;
  }
}
body.no-scroll-modal {
  overflow: hidden !important;
}
@font-face {
  font-family: 'Bungee Outline';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/bungeeoutline/v22/_6_mEDvmVP24UvU2MyiGDslL3TgwaBY.ttf) format('truetype');
}
@font-face {
  font-family: 'Bungee Shade';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/bungeeshade/v15/DtVkJxarWL0t2KdzK3oI_jkc6SjW.ttf) format('truetype');
}
@font-face {
  font-family: 'Nixie One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/nixieone/v16/lW-8wjkKLXjg5y2o2uUYV-t3.ttf) format('truetype');
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/nunito/v26/XRXI3I6Li01BKofiOc5wtlZ2di8HDLshdTQ3ig.ttf) format('truetype');
}
:root {
  --dark-primary: #202020;
  --dark-underlay: #1b1b1b;
  --light-primary: #f3f3f3;
  --light-underlay: #ffffff;
  --dark-center: #1c1c1c;
  --light-center: #eceff1;
  --dark-overlap-text: white;
  --light-overlap-text: var(--dark-primary);
  --dark-shadow: #00000042;
  --light-shadow: #5a5a5a42;
}
@media (prefers-color-scheme: dark) {
  html {
    --primary: var(--dark-primary);
    --underlay: var(--dark-underlay);
    --center: var(--dark-center);
    --overlap-text: var(--dark-overlap-text);
    --shadow: var(--dark-shadow);
  }
}
@media (prefers-color-scheme: light), (prefers-color-scheme: no-preference) {
  html {
    --primary: var(--light-primary);
    --underlay: var(--light-underlay);
    --center: var(--light-center);
    --overlap-text: var(--light-overlap-text);
    --shadow: var(--light-shadow);
  }
}
html,
body {
  margin: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
  background: var(--primary);
}
body {
  will-change: transform;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
@media only screen and (max-width: 980px) {
  body {
    max-width: 100%;
    position: fixed;
  }
}
body::after,
body::before {
  background: dodgerblue;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
body::before {
  background: #1465b6;
  z-index: -2;
}
@media (max-width: 900px) {
  body::after,
  body::before {
    display: none;
  }
}
body.activated::after {
  transform: translateY(100vh);
  transition: 0.3s 0.7s;
}
body.activated::before {
  transform: translateY(100vh);
  transition: 0.3s 0.9s;
}
.perspective-container {
  will-change: transform;
  --translate-x: 0;
  --translate-y: 0;
  --scale: 1;
  transition: transform calc(var(--delay-mul) * 0.3s), width calc(var(--delay-mul) * 0.5s) calc(var(--delay-mul) * 0.5s) cubic-bezier(1, 0, 0, 1), height calc(var(--delay-mul) * 0.5s) calc(var(--delay-mul) * 0.5s) cubic-bezier(1, 0, 0, 1);
}
.perspective-container.open {
  perspective-origin: 50% 50%;
  transform: rotateX(-67deg) rotateZ(45deg);
}
#hover-project:hover ~ .main-box .slider,
.main-box .slider.frozen {
  animation-play-state: paused;
}
.hover-dark {
  width: 100%;
  height: 100%;
  background: black;
  opacity: 0;
  transition: 0.5s;
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 2000;
}
.hover-dark.open {
  opacity: 0.3;
  pointer-events: all;
}
.flat-map.profile img {
  transition: 0.3s;
  width: 100%;
  height: 100%;
  bottom: 0;
  right: 0;
  position: absolute;
  transform: rotate(-90deg);
}
.flat-map.profile img.front {
  opacity: 0;
  z-index: 20;
}
.flat-map.profile img.real {
  opacity: 0;
  z-index: 10;
}
.flat-map.profile .bio {
  bottom: 100px;
  right: 50%;
  height: 500px;
  width: 500px;
  position: absolute;
  transform: rotateZ(-45deg) scaleY(2.4) translateZ(0px);
  z-index: 5;
  opacity: 0;
}
.flat-map.profile .bio > * {
  position: absolute;
}
.flat-map.profile .bio > h1 {
  opacity: 0;
  transition: 0.3s;
  top: 0;
  left: 0;
  background: white;
  margin: 0;
}
.flat-map.profile .bio > p {
  opacity: 0;
  top: 0;
  left: 0;
  transition: 0.3s;
  background: white;
  padding: 10px;
  margin: 0;
}
@media only screen and (max-width: 980px) {
  .flat-map.profile .bio {
    bottom: 600px;
    right: 600px;
    height: 350px;
    width: 350px;
  }
}
@media only screen and (min-width: 981px) {
  .flat-map.profile .bio > p {
    top: 82.5px;
    transition-delay: 0.1s;
  }
}
.flat-map.profile.selected img.front {
  opacity: 0 !important;
}
.flat-map.profile.selected img.real {
  opacity: 1;
}
.flat-map.profile.selected img {
  bottom: 100px;
  right: 50%;
  height: 500px;
  width: 500px;
  transform: rotateZ(-45deg) scaleY(2.4);
}
.flat-map.profile.selected .bio {
  opacity: 1;
}
@media only screen and (min-width: 981px) {
  .flat-map.profile.selected .bio h1 {
    opacity: 1;
    margin: 0;
    top: 0;
    left: calc(100% + 0px);
    width: 100%;
    padding-left: 20px;
    font-size: 24px;
    font-family: "Bungee";
  }
  .flat-map.profile.selected .bio p {
    opacity: 1;
    top: 57.2px;
    left: calc(100% + 0px);
    width: 100%;
    font-size: 18px;
    font-family: "Nunito";
    font-weight: 300;
    min-height: 300px;
    margin: 0;
  }
}
@media only screen and (max-width: 980px) {
  .flat-map.profile.selected .bio h1 {
    top: 100%;
    margin-top: 20px;
  }
  .flat-map.profile.selected .bio p {
    top: calc(100% + 50px);
    margin-top: 20px;
  }
}
@media only screen and (max-width: 980px) {
  .flat-map.profile.selected img {
    bottom: 600px;
    right: 600px;
    height: 350px;
    width: 350px;
    transform: rotateZ(-45deg) scaleY(2.4);
  }
}
.slider {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  height: 100%;
  --slider-easing: cubic-bezier(0.4, 0, 0.2, 1);
  animation: scrolling 20s var(--slider-easing) infinite running;
}
.slider.slider-offset {
  animation: scrolling 20s var(--slider-easing) infinite running -12s;
}
.flat-map.center {
  overflow: hidden;
}
@keyframes scrolling {
  0% {
    margin-top: 0px;
  }
  5% {
    margin-top: -500px;
  }
  20% {
    margin-top: -500px;
  }
  25% {
    margin-top: -1000px;
  }
  40% {
    margin-top: -1000px;
  }
  45% {
    margin-top: -1500px;
  }
  60% {
    margin-top: -1500px;
  }
  65% {
    margin-top: -2000px;
  }
  80% {
    margin-top: -2000px;
  }
  85% {
    margin-top: -2500px;
  }
  100% {
    margin-top: -2500px;
  }
}
@keyframes scrolling-smooth {
  0% {
    margin-top: 0%;
  }
  100% {
    margin-top: -3000px;
  }
}
.hover-title {
  font-family: "Nixie One";
  pointer-events: none;
  position: absolute;
  z-index: 3000;
  margin: 0px;
  height: 0px;
  overflow: hidden;
  transform: translate(18px, -34px) skew(-4.8deg, -21.3deg);
  color: white;
  font-size: 80px;
  width: 500px;
  transition: 0.3s, bottom 0s, left 0s;
  /*&::after {
		content: "Test";
		position: absolute;
		top: 15px;
		left: 25px;
		color: rgba(255,255,255,1);

		transform: skew(-62deg) scale(1, 0.5);
		z-index: 100;
	}*/
}
.hover-title.hover {
  height: 85px;
}
:root {
  --transition-speed: 0.3s;
  --transition-ease: cubic-bezier(0.4, 0, 0.2, 1);
}
#hover-project-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2900;
  overflow: auto;
  pointer-events: none;
  opacity: 0;
  background-color: transparent;
  transition: var(--transition-speed);
}
#hover-project-wrapper.open {
  opacity: 1;
  pointer-events: all;
}
#hover-project-wrapper.scrolled .info-panel {
  top: 100px;
}
.hover-project {
  pointer-events: none;
  --translate-x: 0;
  --translate-y: 0;
  --scale: 1;
  width: 400px;
  height: 400px;
  transform: rotateX(-67deg) rotateZ(45deg) translate(var(--translate-x), var(--translate-y)) scale(var(--scale));
  position: absolute;
  z-index: 3000;
  opacity: 1;
  display: none;
  overflow: hidden;
}
@media (max-width: 900px) {
  .hover-project {
    transform: scale(calc(0.28 * 1.2));
  }
}
.hover-project > *:not(.title) {
  opacity: 1;
}
.hover-project .hover-back {
  width: 100%;
  height: 100%;
  transition: var(--transition-speed) var(--transition-ease);
  transform-origin: 50% 100%;
  top: 0;
  position: absolute;
  display: flex;
  align-items: center;
}
.hover-project .hover-back img {
  width: 100%;
  border-radius: 30px;
}
.hover-project .hover-content {
  top: 0;
  width: 100%;
  height: 100%;
  transition: var(--transition-speed) var(--transition-ease);
  position: absolute;
}
.hover-project.opening {
  display: block;
  opacity: 1;
  transition: transform var(--transition-speed) var(--transition-ease), width var(--transition-speed) var(--transition-ease), height var(--transition-speed) var(--transition-ease), top var(--transition-speed) var(--transition-ease), left var(--transition-speed) var(--transition-ease);
}
.hover-project.opening > *:not(.title) {
  opacity: 1;
}
.hover-project.open {
  pointer-events: all;
  transform: rotateX(0) rotateZ(0) translateY(var(--scroll-height));
  top: 19% !important;
  left: 15% !important;
  width: 200px;
  /*width: 70%;
		height: 70%;
		top: 30% !important;
		left: 15% !important;

		@media @mobile {
			width: 100%;
			left: 0% !important;
			top: 15% !important;
			height: 85%;
		}*/
}
.hover-project.open.scrolling {
  transition: 0.3s width;
}
@media only screen and (max-width: 980px) {
  .hover-project.open {
    width: 200px;
    height: 200px;
    overflow: visible;
    left: calc(50% - 100px) !important;
  }
  .hover-project.open .hover-back {
    transition: 0s;
    transform: translateY(calc(-1.6px * var(--scroll-height)));
    opacity: calc(1 - var(--scroll-height) / 200);
  }
}
.hover-project.open .hover-back img {
  width: 100%;
}
@keyframes pulsate {
  0% {
    transform: scale(0.8) translateY(0px);
  }
  50% {
    transform: scale(0.8) translateY(-5px);
  }
  100% {
    transform: scale(0.8) translateY(0px);
  }
}
#mail-link {
  cursor: pointer;
  text-decoration: underline;
}
#mail-link > img {
  height: 22px;
  vertical-align: top;
}
.profile-modal {
  opacity: 0;
  position: fixed;
  top: var(--from-top);
  left: var(--from-left);
  width: var(--from-width);
  height: var(--from-height);
  overflow: hidden;
  display: flex;
  border-radius: 30px;
  background-color: var(--primary);
  box-shadow: 0px 0px 100px rgba(0, 0, 0, 0.5);
  flex-direction: row;
  color: var(--overlap-text);
  z-index: 1000;
  pointer-events: none;
  perspective-origin: 50% 50%;
  transform: rotateX(-67deg) rotateZ(45deg) rotate(-90deg);
}
@media (max-width: 900px) {
  .profile-modal {
    flex-direction: column;
    transform: unset;
  }
}
.profile-modal.open {
  transition: 0.3s;
  opacity: 1;
  pointer-events: all;
  transform: rotateX(0deg) rotateZ(0deg) rotate(0deg);
  top: 15%;
  left: 15%;
  width: 70%;
  height: 70%;
}
@media (max-width: 900px) {
  .profile-modal.open {
    top: 10%;
    height: 80%;
  }
}
.profile-modal.open .bio {
  transition: opacity 0.4s 0.8s;
  opacity: 1;
}
@media (max-width: 900px) {
  .profile-modal.open {
    position: fixed;
  }
}
.profile-modal .profile-image {
  background-image: url("profile-plain.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  flex: 1;
}
.profile-modal .bio {
  flex: 1;
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.profile-modal p {
  margin: 0;
  max-width: 75%;
  line-height: 1.6em;
  font-family: "Nunito", sans-serif;
}
#hover-project-body {
  pointer-events: all;
  top: 100vh;
  left: 15%;
  width: 70%;
  background: var(--primary);
  color: var(--overlap-text);
  opacity: 0;
  transition: 0.5s cubic-bezier(0.33, 0.64, 0.01, 0.99), opacity 0s, transform 0s;
  position: absolute;
  z-index: 2900;
  pointer-events: none;
  --scroll-height: 0;
  border-radius: 30px;
}
@media only screen and (max-width: 980px) {
  #hover-project-body {
    left: calc(50% - 100px);
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  #hover-project-body .details-panel {
    position: static !important;
    text-align: center;
  }
  #hover-project-body .info-panel {
    position: static !important;
    padding-top: 177px;
    height: auto !important;
  }
}
#hover-project-body #project-title {
  margin: 20px;
  font-family: "Nixie One";
  font-weight: 100;
  font-size: 48px;
}
#hover-project-body #project-tag {
  border-radius: 1000px;
  padding: 5px 10px;
  font-size: 16px;
  font-family: "Nunito", sans-serif;
  border: 1px solid var(--overlap-text);
  color: var(--overlap-text);
  display: inline-block;
  position: absolute;
  right: 20px;
  top: 0px;
  cursor: default;
}
@media (max-width: 900px) {
  #hover-project-body #project-tag {
    top: -286px;
  }
}
#hover-project-body #project-img {
  max-width: 100%;
  border-radius: 0px;
}
#hover-project-body #project-desc {
  margin: 10px;
  margin-top: 0px;
  font-family: "Nunito", sans-serif;
  margin-bottom: 10px;
  min-height: 43px;
}
#hover-project-body #project-title,
#hover-project-body #project-desc {
  margin-left: 340px;
  margin-right: 100px;
  transition: 0.3s;
}
@media (max-width: 900px) {
  #hover-project-body #project-title,
  #hover-project-body #project-desc {
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 50px;
  }
}
#hover-project-body .info-panel {
  transform: translateY(800px);
}
#hover-project-body > * {
  opacity: 0;
  transition: opacity 0.3s;
}
#hover-project-body h5 {
  font-size: 24px;
  margin: 0;
  font-family: "Nixie One";
  margin-top: 30px;
}
#hover-project-body.under {
  opacity: 1;
  pointer-events: all;
}
#hover-project-body.open {
  top: calc(15% + 200px);
  left: calc(15% - 100px);
  width: calc(70% + 200px);
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
}
#hover-project-body.open > * {
  transition-delay: 0.2s;
  opacity: 1;
}
#hover-project-body.open .info-panel {
  transform: translateY(0px);
}
@media only screen and (max-width: 980px) {
  #hover-project-body.open {
    left: 0%;
    width: 100%;
  }
  #hover-project-body.open .details-panel {
    position: absolute;
    left: 0%;
    width: 100%;
    height: 100%;
    top: 500px;
  }
}
#hover-project-body .info-panel {
  transition: 0.3s top, 0.3s transform, 0.3s opacity;
  display: flex;
  flex-direction: row;
  margin: 20px 100px;
}
@media (max-width: 900px) {
  #hover-project-body .info-panel {
    flex-direction: column;
    margin: 20px 40px;
    padding-top: unset;
  }
  #hover-project-body .info-panel #project-tech {
    margin-bottom: 20px;
  }
}
#hover-project-body .info-panel img {
  width: 38px;
  margin: 2px;
  margin-left: 0px;
}
#hover-project-body .info-panel #project-tech {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  background-color: var(--underlay);
  border-radius: 30px;
  margin-right: 5px;
  flex: 1;
}
#hover-project-body .info-panel #project-tech > * {
  margin: 2px;
  animation: pulsate infinite 1s calc(var(--index) * 0.2s);
}
#hover-project-body .info-panel #project-link {
  display: flex;
  height: 57.58px;
  align-items: center;
  justify-content: center;
  background-color: var(--project-color);
  border-radius: 30px;
  transition: 0.2s;
  margin-left: 5px;
  padding: 0px 40px;
  overflow-wrap: break-word;
  color: var(--project-font-color);
  font-family: "Nunito", sans-serif;
  font-size: 18px;
  font-weight: bold;
  text-decoration: none;
}
#hover-project-body .info-panel #project-link:hover {
  opacity: 0.8;
}
.project {
  display: inline-block;
  background: transparent;
  width: 400px;
  height: 400px;
  margin: 50px;
  transition: 0.3s, outline 0.4s, opacity 0s;
  cursor: pointer;
  outline: 0px rgba(255, 255, 255, 0.24) solid;
  border-radius: 30px;
}
@media only screen and (max-width: 980px) {
  .project.open,
  .project:hover,
  .project.remote-hover {
    transform: unset !important;
    box-shadow: unset !important;
  }
}
.project.open,
.project:hover,
.project.remote-hover {
  transform: translate(-40px, -40px);
  box-shadow: 5px 5px 0px hsl(var(--project-color-1), 98%, 80%, 100%), 10px 10px 0px hsl(var(--project-color-1), 94%, 80%, 100%), 15px 15px 0px hsl(var(--project-color-1), 92%, 80%, 100%), 20px 20px 0px hsl(var(--project-color-1), 90%, 80%, 100%), 25px 25px 0px hsl(var(--project-color-1), 98%, 80%, 100%), 30px 30px 0px hsl(var(--project-color-1), 98%, 80%, 100%), 35px 35px 0px hsl(var(--project-color-1), 98%, 80%, 100%), 40px 40px 0px hsl(var(--project-color-1), 98%, 80%, 100%), 40px 40px 10px hsla(var(--project-color-1) 98% 80% / 1), 40px 40px 20px hsla(var(--project-color-1) 98% 80% / 0.75), 40px 40px 30px hsla(var(--project-color-1) 98% 80% / 0.5), 40px 40px 130px hsla(var(--project-color-1) 98% 80% / 0.5);
}
@keyframes box-anim {
  0% {
    box-shadow: 5px 5px 0px hsl(var(--project-color-1), 98%, 20%, 50%), 10px 10px 0px hsl(var(--project-color-1), 98%, 40%, 20%), 15px 15px 0px hsl(var(--project-color-1), 98%, 80%, 100%), 20px 20px 0px hsl(var(--project-color-1), 98%, 80%, 100%), 25px 25px 0px hsl(var(--project-color-1), 98%, 80%, 100%), 30px 30px 0px hsl(var(--project-color-1), 98%, 80%, 100%), 35px 35px 0px hsl(var(--project-color-1), 98%, 80%, 100%), 40px 40px 0px hsl(var(--project-color-1), 98%, 80%, 100%), 40px 40px 10px hsla(var(--project-color-1) 98% 80% / 0.5), 40px 40px 30px hsla(var(--project-color-1) 98% 80% / 0.5), 40px 40px 130px hsla(var(--project-color-1) 98% 80% / 0.5);
  }
  12.5% {
    box-shadow: 5px 5px 0px hsl(var(--project-color-1), 98%, 40%, 20%), 10px 10px 0px hsl(var(--project-color-1), 98%, 20%, 50%), 15px 15px 0px hsl(var(--project-color-1), 98%, 40%, 20%), 20px 20px 0px hsl(var(--project-color-1), 98%, 80%, 100%), 25px 25px 0px hsl(var(--project-color-1), 98%, 80%, 100%), 30px 30px 0px hsl(var(--project-color-1), 98%, 80%, 100%), 35px 35px 0px hsl(var(--project-color-1), 98%, 80%, 100%), 40px 40px 0px hsl(var(--project-color-1), 98%, 80%, 100%), 40px 40px 10px hsla(var(--project-color-1) 98% 80% / 0.5), 40px 40px 30px hsla(var(--project-color-1) 98% 80% / 0.5), 40px 40px 130px hsla(var(--project-color-1) 98% 80% / 0.5);
  }
  25% {
    box-shadow: 5px 5px 0px hsl(var(--project-color-1), 98%, 80%, 100%), 10px 10px 0px hsl(var(--project-color-1), 98%, 40%, 20%), 15px 15px 0px hsl(var(--project-color-1), 98%, 20%, 50%), 20px 20px 0px hsl(var(--project-color-1), 98%, 40%, 20%), 25px 25px 0px hsl(var(--project-color-1), 98%, 80%, 100%), 30px 30px 0px hsl(var(--project-color-1), 98%, 80%, 100%), 35px 35px 0px hsl(var(--project-color-1), 98%, 80%, 100%), 40px 40px 0px hsl(var(--project-color-1), 98%, 80%, 100%), 40px 40px 10px hsla(var(--project-color-1) 98% 80% / 0.5), 40px 40px 30px hsla(var(--project-color-1) 98% 80% / 0.5), 40px 40px 130px hsla(var(--project-color-1) 98% 80% / 0.5);
  }
  37.5% {
    box-shadow: 5px 5px 0px hsl(var(--project-color-1), 98%, 80%, 100%), 10px 10px 0px hsl(var(--project-color-1), 98%, 80%, 100%), 15px 15px 0px hsl(var(--project-color-1), 98%, 40%, 20%), 20px 20px 0px hsl(var(--project-color-1), 98%, 20%, 50%), 25px 25px 0px hsl(var(--project-color-1), 98%, 40%, 20%), 30px 30px 0px hsl(var(--project-color-1), 98%, 80%, 100%), 35px 35px 0px hsl(var(--project-color-1), 98%, 80%, 100%), 40px 40px 0px hsl(var(--project-color-1), 98%, 80%, 100%), 40px 40px 10px hsla(var(--project-color-1) 98% 80% / 0.5), 40px 40px 30px hsla(var(--project-color-1) 98% 80% / 0.5), 40px 40px 130px hsla(var(--project-color-1) 98% 80% / 0.5);
  }
  50% {
    box-shadow: 5px 5px 0px hsl(var(--project-color-1), 98%, 80%, 100%), 10px 10px 0px hsl(var(--project-color-1), 98%, 80%, 100%), 15px 15px 0px hsl(var(--project-color-1), 98%, 80%, 100%), 20px 20px 0px hsl(var(--project-color-1), 98%, 40%, 20%), 25px 25px 0px hsl(var(--project-color-1), 98%, 20%, 50%), 30px 30px 0px hsl(var(--project-color-1), 98%, 40%, 20%), 35px 35px 0px hsl(var(--project-color-1), 98%, 80%, 100%), 40px 40px 0px hsl(var(--project-color-1), 98%, 80%, 100%), 40px 40px 10px hsla(var(--project-color-1) 98% 80% / 0.5), 40px 40px 30px hsla(var(--project-color-1) 98% 80% / 0.5), 40px 40px 130px hsla(var(--project-color-1) 98% 80% / 0.5);
  }
  62.5% {
    box-shadow: 5px 5px 0px hsl(var(--project-color-1), 98%, 80%, 100%), 10px 10px 0px hsl(var(--project-color-1), 98%, 80%, 100%), 15px 15px 0px hsl(var(--project-color-1), 98%, 80%, 100%), 20px 20px 0px hsl(var(--project-color-1), 98%, 80%, 100%), 25px 25px 0px hsl(var(--project-color-1), 98%, 40%, 20%), 30px 30px 0px hsl(var(--project-color-1), 98%, 20%, 50%), 35px 35px 0px hsl(var(--project-color-1), 98%, 40%, 20%), 40px 40px 0px hsl(var(--project-color-1), 98%, 80%, 100%), 40px 40px 10px hsla(var(--project-color-1) 98% 80% / 0.5), 40px 40px 30px hsla(var(--project-color-1) 98% 80% / 0.5), 40px 40px 130px hsla(var(--project-color-1) 98% 80% / 0.5);
  }
  75% {
    box-shadow: 5px 5px 0px hsl(var(--project-color-1), 98%, 80%, 100%), 10px 10px 0px hsl(var(--project-color-1), 98%, 80%, 100%), 15px 15px 0px hsl(var(--project-color-1), 98%, 80%, 100%), 20px 20px 0px hsl(var(--project-color-1), 98%, 80%, 100%), 25px 25px 0px hsl(var(--project-color-1), 98%, 80%, 100%), 30px 30px 0px hsl(var(--project-color-1), 98%, 40%, 20%), 35px 35px 0px hsl(var(--project-color-1), 98%, 20%, 50%), 40px 40px 0px hsl(var(--project-color-1), 98%, 40%, 20%), 40px 40px 10px hsla(var(--project-color-1) 98% 80% / 0.5), 40px 40px 30px hsla(var(--project-color-1) 98% 80% / 0.5), 40px 40px 130px hsla(var(--project-color-1) 98% 80% / 0.5);
  }
  87.5% {
    box-shadow: 5px 5px 0px hsl(var(--project-color-1), 98%, 80%, 100%), 10px 10px 0px hsl(var(--project-color-1), 98%, 80%, 100%), 15px 15px 0px hsl(var(--project-color-1), 98%, 80%, 100%), 20px 20px 0px hsl(var(--project-color-1), 98%, 80%, 100%), 25px 25px 0px hsl(var(--project-color-1), 98%, 80%, 100%), 30px 30px 0px hsl(var(--project-color-1), 98%, 80%, 100%), 35px 35px 0px hsl(var(--project-color-1), 98%, 40%, 20%), 40px 40px 0px hsl(var(--project-color-1), 98%, 20%, 50%), 40px 40px 10px hsla(var(--project-color-1) 98% 80% / 0.5), 40px 40px 30px hsla(var(--project-color-1) 98% 80% / 0.5), 40px 40px 130px hsla(var(--project-color-1) 98% 80% / 0.5);
  }
}
@media (prefers-color-scheme: light) {
  .project.open,
  .project:hover,
  .project.remote-hover {
    box-shadow: 5px 5px 0px hsl(var(--project-color-1) 98% 80% / 100%), 10px 10px 0px hsl(var(--project-color-1) 98% 70% / 100%), 15px 15px 0px hsl(var(--project-color-1) 98% 60% / 90%), 20px 20px 0px hsl(var(--project-color-1) 98% 50% / 60%), 25px 25px 0px hsl(var(--project-color-1) 98% 50% / 40%), 30px 30px 0px hsl(var(--project-color-1) 98% 50% / 30%), 35px 35px 0px hsl(var(--project-color-1) 98% 50% / 20%), 40px 40px 0px hsl(var(--project-color-1) 98% 50% / 10%);
  }
}
.project.open {
  opacity: 1;
  background-color: hsl(var(--project-color-1), 98%, 80%, 100%);
}
.project.open .front img {
  opacity: 0;
}
.project .front {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  overflow: hidden;
  border-radius: 30px;
}
.project .front img {
  max-height: 100%;
  width: 100%;
}
.main-box.pause-animation .center .slider,
.main-box.pause-animation .center-up .slider {
  animation-play-state: paused !important;
}
.center-bottom {
  pointer-events: none;
  transform: translate(1000px, 1000px);
  background: transparent !important;
  display: none;
  z-index: -5;
}
.center-bottom .slider {
  animation-direction: reverse;
  animation-delay: -10s;
}
.center-bottom .slider .project {
  background: repeating-linear-gradient(0deg, #6431da, #6431da 20px, #b058e2 20px, #b058e2 40px);
}
.center-bottom .slider .project img {
  opacity: 0;
}
.center-down {
  pointer-events: none;
  transform: skew(45deg, 0deg) translate(500px, 0px);
  background: transparent !important;
  display: none;
  z-index: -1;
}
.center-down .slider {
  animation-direction: reverse;
  animation-delay: -10s;
}
.center-down .slider .project {
  background: repeating-linear-gradient(0deg, #5725cd, #5725cd 20px, #a642de 20px, #a642de 40px);
}
.center-down .slider .project img {
  opacity: 0;
}
* {
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
}
.center:hover ~ .center-up,
.center.selected ~ .center-up {
  transform: skew(45deg, 0deg) translate(500px, -50px) !important;
}
.center-up {
  will-change: transform;
  pointer-events: none;
  transform: skew(45deg, 0deg) translate(-500px, 1000px);
  background: transparent !important;
}
.center:hover ~ .center-up,
.center.selected ~ .center-up {
  transform: skew(45deg, 0deg) translate(-500px, 950px) !important;
  z-index: 501 !important;
}
.bottom-slide-container-right {
  position: absolute;
  --gradient-flow: 1000%;
  background: #fc6767;
  height: 100%;
  width: 100%;
  --offset-up: 0px;
  left: 500px;
  top: 0px;
  opacity: 0;
  transition: 0.5s;
  transform: skew(45deg, 0deg) !important;
  z-index: -1;
}
.bottom-slide-container-right > h2 {
  font-size: 20em;
  font-family: "Nixie One";
  line-height: 1em;
  margin: 0;
  position: absolute;
  color: #d35a5a;
  bottom: -277px;
  transition: 0.5s 1.4s;
}
@media only screen and (max-width: 980px) {
  .bottom-slide-container-right > h2 {
    font-size: 9em;
  }
}
.bottom-slide-container-left {
  position: absolute;
  --gradient-flow: 1000%;
  background: #e15353;
  height: 100%;
  width: 100%;
  --offset-up: 0px;
  left: 0px;
  top: 500px;
  opacity: 0;
  transition: 0.5s;
  transform: skew(0deg, 45deg) !important;
  z-index: -4;
}
.bottom-slide-container-left > h2 {
  font-size: 20em;
  font-family: "Nixie One";
  line-height: 1em;
  margin: 0;
  position: absolute;
  color: #c35858;
  top: -281px;
  right: 0px;
  transition: 0.5s 1.4s;
}
@media only screen and (max-width: 980px) {
  .bottom-slide-container-left > h2 {
    font-size: 9em;
  }
}
.bottom-flip-container {
  position: absolute;
  --gradient-flow: 1000%;
  background: linear-gradient(0deg, #fd4e4e 0%, transparent var(--gradient-flow));
  height: 100%;
  width: 100%;
  --offset-up: 0px;
  left: var(--offset-up);
  top: var(--offset-up);
  transition: 0s;
  overflow: hidden;
}
.bottom-flip-container > h2 {
  font-size: 11em;
  font-family: "Nixie One";
  line-height: 1em;
  margin: 0;
  position: absolute;
  color: #d34444;
  transform: rotate(-90deg);
  top: 160px;
  left: 882px;
  opacity: 0;
  transition: left 0.5s 0s, opacity 0s 0s;
}
@media only screen and (max-width: 980px) {
  .bottom-flip-container > h2 {
    font-size: 5em;
    top: 78px;
  }
}
@keyframes flip-spin {
  0% {
    left: var(--offset-up);
  }
  100% {
    left: -1500px;
  }
}
@keyframes slide-up-right {
  0% {
    opacity: 0;
  }
  1% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    left: -500px;
    top: -1000px;
  }
}
@keyframes slide-up-left {
  0% {
    opacity: 0;
  }
  1% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    left: -1000px;
    top: -500px;
  }
}
.bottom.selected .bottom-flip-container {
  height: 500px;
  --offset-up: -1000px;
  width: 500px;
  transform: none;
  transition: 0.5s calc(var(--delay-mul) * 0.3s);
}
.bottom.selected .bottom-flip-container > h2 {
  transition: left 0.5s calc(var(--delay-mul) * 2s), opacity 0s calc(var(--delay-mul) * 2s);
  opacity: 1;
  left: 183px;
}
@media only screen and (max-width: 980px) {
  .bottom.selected .bottom-flip-container > h2 {
    left: 356px;
  }
}
.bottom.selected .bottom-slide-container-right {
  animation: slide-up-right 0.5s 0.2s forwards;
}
.bottom.selected .bottom-slide-container-right > h2 {
  bottom: -41px;
}
@media only screen and (max-width: 980px) {
  .bottom.selected .bottom-slide-container-right > h2 {
    bottom: -18px;
  }
}
.bottom.selected .bottom-slide-container-left {
  animation: slide-up-left 0.5s 0.3s forwards;
}
.bottom.selected .bottom-slide-container-left > h2 {
  top: -41px;
}
@media only screen and (max-width: 980px) {
  .bottom.selected .bottom-slide-container-left > h2 {
    top: -19px;
  }
}
@media (max-width: 900px) {
  .perspective-container {
    transform: none !important;
  }
}
.main-box {
  will-change: transform;
  --translate-x: 0px;
  --translate-y: 0px;
  --scale: 1;
  width: 200px;
  height: 200px;
  pointer-events: none;
  border-radius: 30px;
  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.2);
  z-index: 10;
  position: relative;
  transition: transform 0.3s, width 0.5s calc(var(--delay-mul) * 0.5s) cubic-bezier(1, 0, 0, 1), height 0.5s calc(var(--delay-mul) * 0.5s) cubic-bezier(1, 0, 0, 1);
}
.main-box .flat-map {
  border-radius: 30px;
}
@media only screen and (max-width: 980px) {
  .main-box {
    --scale: 0.28;
  }
}
.main-box:not(.open) {
  transition: box-shadow 1s, background-color 1s, width 1s, height 1s;
}
.main-box > * {
  opacity: 0 !important;
}
.main-box.opening {
  box-shadow: 0px 3px 60px rgba(0, 0, 0, 0.2);
  background: dodgerblue;
  transform: rotate(180deg);
}
.main-box .center {
  position: absolute;
  width: 100%;
  height: 100%;
  background: var(--center);
}
.main-box .flat-map.no-input {
  opacity: 0 !important;
}
.main-box.done {
  pointer-events: all;
  box-shadow: none;
}
.main-box.done div.flat-map {
  transition: 0.3s !important;
}
.main-box.done div.flat-map:not(.no-input):hover,
.main-box.done div.flat-map:not(.no-input).selected {
  transform: translate(-50px, -50px) !important;
  z-index: 500 !important;
  box-shadow: 58px 58px 64px var(--shadow);
}
.main-box.done div.flat-map:not(.no-input):hover.bottom,
.main-box.done div.flat-map:not(.no-input).selected.bottom {
  z-index: 1503 !important;
}
@media (max-width: 900px) {
  .main-box.done div.flat-map:not(.no-input):hover,
  .main-box.done div.flat-map:not(.no-input).selected {
    transform: scale(1.2) translate(0px, 0px) !important;
    box-shadow: 0px 0px 64px var(--shadow);
  }
  .main-box.done div.flat-map:not(.no-input):hover.bottom,
  .main-box.done div.flat-map:not(.no-input).selected.bottom {
    transform: rotate(90deg) scale(1.2) translate(0px, 0px) !important;
  }
  .main-box.done div.flat-map:not(.no-input):hover > h2,
  .main-box.done div.flat-map:not(.no-input).selected > h2 {
    opacity: 0 !important;
  }
}
.main-box.done .flat-map.profile img.front {
  opacity: 1;
  border-radius: 30px;
}
.main-box.open {
  background: transparent;
  width: 1000px;
  height: 1000px;
  transform: translate(var(--translate-x), var(--translate-y)) scale(var(--scale));
}
.main-box.open > * {
  opacity: 1 !important;
}
.main-box.open .top,
.main-box.open .left,
.main-box.open .bottom,
.main-box.open .right {
  width: 100%;
  height: 100%;
}
.main-box.open .top {
  transform: scale(1);
  top: -100%;
  margin-top: -100px;
}
.main-box.open .right {
  right: -100%;
  margin-right: -100px;
  transform-style: preserve-3d;
}
.main-box.open .bottom {
  bottom: -100%;
  margin-bottom: -100px;
}
.main-box.open .left {
  left: -100%;
  margin-left: -100px;
}
@media (max-width: 900px) {
  .main-box.open .top {
    transform: rotate(90deg);
  }
  .main-box.open .right {
    transform: rotate(90deg);
    margin-bottom: calc(300px + 50vh) !important;
  }
  .main-box.open .left {
    transform: rotate(90deg);
  }
  .main-box.open .bottom {
    transform: rotate(90deg);
  }
  .main-box.open .top,
  .main-box.open .right,
  .main-box.open .left,
  .main-box.open .bottom,
  .main-box.open .center {
    position: static;
    left: unset;
    top: unset;
    right: unset;
    bottom: unset;
    margin: unset;
    scroll-snap-align: center;
    margin-bottom: 300px;
  }
  .main-box.open .center-up {
    display: none;
  }
}
.main-box .top,
.main-box .left,
.main-box .bottom,
.main-box .right {
  width: 100px;
  height: 100px;
  opacity: 1;
  margin: 0px;
  z-index: 0;
  position: absolute;
}
.main-box .right > h2 {
  position: absolute;
  transition: 0.3s;
  left: -137px;
  bottom: 187px;
  line-height: 1em;
  font-family: "Bungee Shade";
  font-weight: 400;
  font-size: 150px;
  margin: 0;
  padding: 0;
  opacity: 0;
  pointer-events: none;
  color: #0e0e0e;
  background-color: #313131;
  transform: rotate(-90deg);
  z-index: 100;
}
.main-box .right > h2 > span {
  transition: 0.3s calc(var(--delay-mul) * 0.1s);
  text-shadow: 10px 10px 10px rgba(255, 255, 255, 0), 20px 20px 20px rgba(255, 255, 255, 0), 30px 30px 30px rgba(255, 255, 255, 0), 40px 40px 40px rgba(255, 255, 255, 0), 50px 50px 50px rgba(255, 255, 255, 0), 60px 60px 60px rgba(255, 255, 255, 0), 70px 70px 70px rgba(255, 255, 255, 0), 80px 80px 80px rgba(255, 255, 255, 0);
}
@keyframes neon-light {
  0% {
    opacity: 0.2;
  }
  1% {
    opacity: 1;
  }
  2% {
    opacity: 0.1;
  }
  3% {
    opacity: 1;
  }
  8% {
    opacity: 0.4;
  }
  9% {
    opacity: 0.9;
  }
  10% {
    opacity: 1;
  }
  12% {
    opacity: 0.3;
  }
  24% {
    opacity: 1;
  }
  39% {
    opacity: 1;
  }
  40% {
    opacity: 0.2;
  }
  41% {
    opacity: 1;
  }
  42% {
    opacity: 0.1;
  }
  43% {
    opacity: 1;
  }
  45% {
    opacity: 0.1;
  }
  47% {
    opacity: 1;
  }
  48% {
    opacity: 0.4;
  }
  50% {
    opacity: 1;
  }
}
.main-box .bottom > h2 {
  position: absolute;
  transition: 0.3s;
  right: -118px;
  top: 177px;
  font-family: "Bungee Shade";
  font-weight: 400;
  font-size: 150px;
  margin: 0;
  padding: 0;
  opacity: 0;
  pointer-events: none;
  color: #a72323;
  transform: rotate(-90deg);
  line-height: 1em;
}
.main-box .bottom > h2::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background: #fd4e4e;
  z-index: -1;
}
.main-box .top > h2 {
  position: absolute;
  transition: 0.3s;
  bottom: 56px;
  left: -86px;
  transform: rotate(-90deg);
  font-family: "Bungee Shade";
  font-weight: 400;
  font-size: 200px;
  margin: 0;
  padding: 0;
  opacity: 0;
  pointer-events: none;
  color: #0d3d6d;
  z-index: 100;
}
.main-box.done .left > .social-icon {
  opacity: 1;
}
.main-box .left {
  display: flex;
  align-items: center;
  justify-content: center;
}
.main-box .left::before {
  content: "";
  background: inherit;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 501;
  position: absolute;
  border-radius: 30px;
}
.main-box .left > .social-icon {
  animation: floating-icon var(--duration) var(--delay) infinite ease-in-out;
  transition: 0.3s;
  opacity: 0;
  z-index: 502;
}
@media only screen and (max-width: 980px) {
  .main-box .left {
    flex-direction: column;
  }
  .main-box .left > .social-icon:nth-child(2) {
    align-self: flex-start;
    margin-left: 128px;
  }
  .main-box .left > .social-icon:last-child {
    align-self: flex-end;
    margin-right: 128px;
  }
}
.main-box .left > h2 {
  position: absolute;
  transition: 0.3s;
  left: 694px;
  top: 187px;
  white-space: nowrap;
  font-family: "Bungee Shade";
  font-weight: 400;
  font-size: 100px;
  margin: 0;
  padding: 0;
  opacity: 0;
  pointer-events: none;
  color: #792990;
  transform: rotate(-90deg);
  z-index: 1000;
}
.main-box .left > h2 > span {
  text-shadow: calc(var(--mul) * 1px) calc(var(--mul) * 1px) 0px hsl(287, 98%, 60%), calc(var(--mul) * 2px) calc(var(--mul) * 2px) 0px hsl(287, 98%, 50%), calc(var(--mul) * 3px) calc(var(--mul) * 3px) 0px hsl(287, 98%, 40%), calc(var(--mul) * 4px) calc(var(--mul) * 4px) 0px hsl(287, 98%, 30%), calc(var(--mul) * 5px) calc(var(--mul) * 5px) 0px hsl(287, 98%, 20%), calc(var(--mul) * 6px) calc(var(--mul) * 6px) 0px hsl(287, 98%, 15%), calc(var(--mul) * 7px) calc(var(--mul) * 7px) 0px hsl(287, 98%, 10%), calc(var(--mul) * 8px) calc(var(--mul) * 8px) 0px hsl(287, 98%, 5%);
}
@keyframes pivot {
  0% {
    top: 0%;
    height: 0%;
  }
  33% {
    left: 0%;
    top: 0%;
    height: 100%;
    width: 100%;
  }
  66% {
    left: 100%;
    width: 0%;
  }
  66.7% {
    left: 0%;
  }
  100% {
    left: 0%;
    width: 100%;
    top: 0%;
    height: 100%;
  }
}
@media only screen and (max-width: 980px) {
  .main-box.done .top > h2 {
    opacity: 1;
    bottom: 544px;
    left: 716px;
  }
  .main-box.done .top > h2::before {
    content: "me";
    position: absolute;
    font-family: "Bungee";
    left: 23px;
    letter-spacing: 20px;
    color: dodgerblue;
    z-index: -1;
  }
  .main-box.done .left > h2 {
    opacity: 1;
  }
  .main-box.done .right > h2 {
    opacity: 1;
    left: 673px;
    bottom: 643px;
    color: black;
  }
  .main-box.done .bottom > h2 {
    opacity: 1;
  }
}
.main-box.done .top.selected > h2 {
  opacity: 0;
}
.main-box.done .right.selected > h2 {
  opacity: 0;
}
.main-box.done .top:not(.selected):hover > h2 {
  opacity: 1;
}
.main-box.done .left:not(.selected):hover > h2 {
  opacity: 1;
}
.main-box.done .right:not(.selected):hover > h2 {
  opacity: 1;
}
.main-box.done .bottom:not(.selected):hover > h2 {
  opacity: 1;
}
.main-box.done .bottom {
  z-index: 1503;
}
.main-box.done .flat-map.no-input {
  opacity: 1 !important;
}
.main-box .top {
  top: 0%;
  transform: scale(1.05);
}
.main-box .bottom {
  bottom: 0%;
}
.main-box .left {
  left: 0%;
}
.main-box .right {
  right: 0%;
}
.main-box .top {
  background: dodgerblue;
  transition: margin 0.5s calc(var(--base-delay) + 0.1s * 1), top 0.5s calc(var(--base-delay) + 0.1s * 1);
  z-index: 103;
}
.main-box .left {
  background: #d446fd;
  transition: margin 0.5s calc(var(--base-delay) + 0.1s * 4), left 0.5s calc(var(--base-delay) + 0.1s * 4);
  z-index: 100;
}
.main-box .bottom {
  background: #fd4e4e;
  transition: margin 0.5s calc(var(--base-delay) + 0.1s * 3), bottom 0.5s calc(var(--base-delay) + 0.1s * 3);
  z-index: 101;
}
.main-box .right {
  background: #1c1c1c;
  transition: margin 0.5s calc(var(--base-delay) + 0.1s * 2), right 0.5s calc(var(--base-delay) + 0.1s * 2);
  z-index: 102;
}
.main-box.done .flat-map:not(.no-input).bottom.selected {
  transform: rotate(90deg) !important;
}
.main-box .front-code {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0%;
  height: 0%;
  background: #313131;
  transition: 0.3s;
  opacity: 0;
  border-radius: 30px;
}
.main-box.done .flat-map:not(.no-input).right.selected {
  transform: translate(-50px, -50px) perspective(6032px) rotateX(180deg) !important;
}
.main-box.done .front-code {
  opacity: 1;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  transform: rotate(-90deg);
}
.main-box.done .front-code .code-cursor {
  left: 0%;
  top: 0%;
  position: absolute;
  height: 20px;
  width: 1%;
  background: white;
  transition: 0.3s;
  animation: blink 1s infinite;
}
@keyframes blink {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.main-box.done .front-code .code-line {
  display: flex;
  flex-direction: row;
  height: 8px;
  padding: 8px 0px;
}
.main-box.done .front-code .code-line:nth-child(2) {
  padding-top: 38px;
}
.main-box.done .front-code .code-line .code-block {
  transition: 0.3s;
  border-radius: 48px;
}
.main-box.done .front-code .code-line .does-stuff {
  background: dodgerblue;
  margin-right: 2%;
}
.main-box.done .front-code .code-line .open-block {
  background: white;
  width: 2%;
}
.main-box.done .front-code .code-line .indent-block {
  width: 4%;
}
.back-info {
  display: flex;
  flex-wrap: wrap;
  background: #1e1e1e;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 30px;
  backface-visibility: hidden;
  transform: rotateZ(0deg) rotateX(180deg);
  /*display: grid;

	grid-template-columns: repeat(10, 1fr);
	grid-template-rows: repeat(10, 1fr);*/
}
.back-info .physics {
  position: absolute;
}
.back-info img.physics {
  opacity: 0;
  z-index: 40;
  pointer-events: none;
  transition: 0.3s 0s;
}
.back-info:hover img.physics {
  pointer-events: none;
  opacity: 0;
  transition: 1s 3s;
}
.back-info .back-scan .or {
  position: absolute;
  opacity: 0;
  height: 33.333%;
  width: 33.333%;
  top: 0;
  left: 0;
}
.back-info .back-scan .or.r-2 {
  left: 33.333%;
}
.back-info .back-scan .or.r-3 {
  left: 66.666%;
}
.back-info .back-scan .or.r-4 {
  top: 33.333%;
}
.back-info .back-scan .or.r-5 {
  top: 33.333%;
  left: 33.333%;
}
.back-info .back-scan .or.r-6 {
  top: 33.333%;
  left: 66.666%;
}
.back-info .back-scan .or.r-7 {
  top: 66.666%;
}
.back-info .back-scan .or.r-8 {
  top: 66.666%;
  left: 33.333%;
}
.back-info .back-scan .or.r-9 {
  top: 66.666%;
  left: 66.666%;
}
.social-icon {
  display: inline-block;
}
.social-icon > svg {
  transition: 0.2s;
}
.social-icon:hover > svg {
  transform: scale(1.1);
}
@media (max-width: 900px) {
  .social-icon > svg {
    transform: rotate(-90deg);
  }
}
@media (max-width: 900px) {
  .flat-map.selected .social-icon > svg {
    transform: rotate(0deg);
  }
}
@keyframes floating-icon {
  0% {
    transform: translate(-5px, -5px);
    filter: drop-shadow(5px 5px 2px rgba(0, 0, 0, 0.4));
  }
  50% {
    transform: translate(-50px, -50px);
    filter: drop-shadow(50px 50px 50px rgba(0, 0, 0, 0.4));
  }
  100% {
    transform: translate(-5px, -5px);
    filter: drop-shadow(5px 5px 2px rgba(0, 0, 0, 0.4));
  }
}
.bottom-slide-container-right {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.bottom.flat-map {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.tech-stack {
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.tech-stack img {
  max-width: 100px;
  max-height: 100px;
}
.bottom.flat-map.selected .tech-block {
  transition: transform 0.4s calc((5 - var(--priority)) * 0.1s + (5 - var(--row)) * 0.1s), left 0.3s, bottom 0.3s;
  transform: scale(1);
  --default-scale: 0 !important;
}
@keyframes block-float {
  0% {
    transform: translate(0px, 0px);
    filter: drop-shadow(5px 5px 2px rgba(0, 0, 0, 0.4));
  }
  50% {
    transform: translate(-150px, -150px);
    filter: drop-shadow(150px 150px 75px rgba(0, 0, 0, 0.4));
  }
  100% {
    transform: translate(0px, 0px);
    filter: drop-shadow(5px 5px 2px rgba(0, 0, 0, 0.4));
  }
}
.main-box:not(.done) .tech-block {
  animation: none;
  --default-scale: 0;
  opacity: 0;
}
.tech-block {
  --dist: 36px;
  --default-scale: 0;
  transform: scale(var(--default-scale));
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: calc(10 - var(--priority));
  width: 128px;
  height: 128px;
  border-radius: 30px;
  background: white;
  margin: 20px;
  animation: block-float calc(var(--default-scale) * 7s) calc(-2s * (var(--row) * 53 + var(--priority) * 12)) infinite cubic-bezier(0.5, 0, 0.5, 1);
  transition: 0.3s;
  left: 0px;
  bottom: 0px;
  position: relative;
}
.tech-block img {
  opacity: 0.9;
  transform: rotate(-90deg);
}
.tech-block:hover {
  left: -10px;
  bottom: -10px;
}
.slide-rotate {
  transform: rotate(-90deg);
  width: 100%;
  height: 100%;
}
.bottom-slide-container-left,
.bottom-flip-container {
  display: none !important;
}