@keyframes pulse {
            0% {
                transform: scale(1);
            }

            50% {
                transform: scale(1.01);
            }

            100% {
                transform: scale(1);
            }
        }

        .pulse {
            width: 100px;
            height: 100px;
            border-radius: 100%;
            animation: pulse 12s infinite;
        }


.frame {
  display: block;
  position: absolute;
  width: 1000px;
  left: 23%;
  top: 20px;
  -webkit-perspective: 1000;
  z-index: 0;
}

#typewriter{
	position:absolute;
	right: 19%;
	bottom: 30px;
	text-align:right;
	margin: 0;
	font-size: 12px;
	/* font-weight: bold; */
	/* font-family: "Yomogi"; */
	font-style: italic;
	color: white;

		&:after{
			content: "][";
			animation: blink 500ms linear infinite alternate;
		}
}

@-webkit-keyframes blink{
	0%{opacity: 0;}
	100%{opacity: 1;}
}

@-moz-keyframes blink{
	0%{opacity: 0;}
	100%{opacity: 1;}
}

@keyframes blink{
	0%{opacity: 0;}
	100%{opacity: 1;}
}

#head {
  height: 800px;
  width: 1000px;
  -webkit-transform-style: preserve-3d;
}

#head > div {
  position: absolute;
  top: 4%;
  left: 30%;
  width: 55vw;
  /* height: 100%; */
  margin-left: -290px;
}

#head > div#two > path {
  -webkit-transform: translate3D(-10%,-10%,0);
}
#head > div#thr > path {
  -webkit-transform: translate3D(-20%,-20%,0);
}
#head > div#fou > path {
  -webkit-transform: translate3D(-30%,-30%,0);
}

#head > div#fou3 > path {
  -webkit-transform: translate3D(-40%,-40%,0);
}

#head > div#ten2 > path {
  -webkit-transform: translate3D(-50%,-50%,0);
}


body {
  margin: 0;
  padding: 0;
	overflow-x:hidden;
	background-color:#000000;
}

#bg {
  position: absolute;
  width: 100%;
  height: 100%;
}

.cls-1,.cls-3,.cls-4,.cls-5{fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;}
        
        .cls-1{stroke-width:8px;}
        
        .cls-2{fill:#fcc;}
        
        .cls-3{stroke-width:5px;}
        
        .cls-4{stroke-width:11px;}
        
        .cls-5{stroke-width:9px;}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.parallax {
  position: relative;
  width: 100%;
  height: 100vw;
  list-style-type: none;
background: #000000;
background: -webkit-linear-gradient(0deg, rgba(0, 0, 0, 1) 55%, rgba(255, 178, 171, 1) 66%, rgba(238, 171, 255, 1) 80%, rgba(56, 156, 255, 1) 100%);
background: -moz-linear-gradient(0deg, rgba(0, 0, 0, 1) 55%, rgba(255, 178, 171, 1) 66%, rgba(238, 171, 255, 1) 80%, rgba(56, 156, 255, 1) 100%);
background: linear-gradient(0deg, rgba(0, 0, 0, 1) 55%, rgba(255, 178, 171, 1) 66%, rgba(238, 171, 255, 1) 80%, rgba(56, 156, 255, 1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000", endColorstr="#389CFF", GradientType=0);
	z-index:-1;

  & header {
    width: inherit;
    position: absolute;
    display: flex;
    justify-content: end;
    align-items: center;
    padding: 1.5rem;

    & .menu {
      list-style-type: none;
      display: flex;
      gap: 1.25rem;

      &:hover a:not(:hover) { border: none; }

      & li:first-of-type a { border-bottom: 2px solid var(--link); }

      & a {
        text-decoration: none;
        font: 900 0.75rem futura,sans-serif;
        color: var(--link);
        text-transform: uppercase;
        padding-bottom: 0.5rem;

        &:hover { border-bottom: 2px solid var(--link); }
      }
    }

    & .hamburger {
      font-size: 2rem;
      color: var(--link);
      cursor: pointer;
      display: none;
    }

    @media (width < 700px) {
      & .menu       { display: none; }
      & .hamburger  { display: block; }
    }
  }

  & .layer {
    position: absolute;
    width: inherit;
    height: inherit;
    /*background-position: center 0%;*/
    background-size: contain;
	background-repeat: no-repeat;
    z-index: -1;
    transition: transform 0.5 ease-out;
    &:nth-of-type(1) { background-image: url('../inspireist/img/tiny/underwater.png'); }
    &:nth-of-type(2) { background-image: url('../inspireist/img/tiny/overwater.png'); }
    &:nth-of-type(3) { background-image: url('../inspireist/img/tiny/barashi.png'); }
    &:nth-of-type(4) { background-image: url('../inspireist/img/tiny/kolye.png'); }
    &:nth-of-type(5) { background-image: url('../inspireist/img/tiny/dockbg.png'); }
    &:nth-of-type(6) { background-image: url('../inspireist/img/tiny/dock.png'); }
  }
}

@media (height < 600px) {
  .parallax {
    height: 100vw;
  }
}

.content {
  background: url('../inspireist/img/tiny/bg.png');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: top; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Resize the background image to cover the entire container */
  background-color:black;
  display: grid;
  place-items: center;

  & .info {
    width: min(220vw,650px);
    font: 0.85rem/1.8 futura,sans-serif;
    color: rgba(0,0,0,1);
    display: flex;
    /*flex-direction: column;*/
    align-items: center;
	z-index: 3;


    & h1 {
      font-size: 1.25rem;
      color: rgb(256, 256, 256);
    }

    & img { width: 40vmin; }
  }

  & footer {
    /*display: flex;*/
	/*padding-top: 3rem;*/
    /*padding-bottom: 3rem;*/


    & fa-icon {
      cursor: pointer;
      color: rgb(256, 256, 256);
      font-size: 1.1rem;

      &:hover { color: rgb(121, 149, 121); }
    }
  }
}