/* Starfield background animation */
@keyframes animStar {
  from {
    transform: translateY(0px);
  }
  to {
    transform: translateY(-2000px);
  }
}

.stars-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;
}

/* Using box-shadow to create multiple stars in one element */
#stars {
  width: 1px;
  height: 1px;
  background: transparent;
  box-shadow: 636px 1654px #FFF, 1262px 1419px #FFF, 1226px 1834px #FFF, 582px 144px #FFF, 1182px 694px #FFF, 1030px 1749px #FFF, 506px 1238px #FFF, 166px 1838px #FFF, 546px 1224px #FFF, 1344px 1952px #FFF, 1928px 1253px #FFF, 1284px 348px #FFF, 1904px 1056px #FFF, 1323px 1421px #FFF, 1404px 1970px #FFF, 1405px 163px #FFF, 1464px 843px #FFF, 1159px 1295px #FFF, 1469px 1445px #FFF, 1290px 1863px #FFF;
  animation: animStar 50s linear infinite;
}

#stars2 {
  width: 2px;
  height: 2px;
  background: transparent;
  box-shadow: 1599px 804px #FFF, 110px 1591px #FFF, 1693px 1993px #FFF, 1555px 1059px #FFF, 1492px 1782px #FFF, 1152px 1900px #FFF, 750px 1530px #FFF, 72px 1586px #FFF, 1647px 1851px #FFF, 1033px 905px #FFF, 143px 1835px #FFF, 1033px 1198px #FFF, 946px 1413px #FFF, 1538px 1781px #FFF, 1338px 1188px #FFF;
  animation: animStar 100s linear infinite;
}

#stars3 {
  width: 3px;
  height: 3px;
  background: transparent;
  box-shadow: 1018px 103px #FFF, 154px 1827px #FFF, 1435px 1528px #FFF, 804px 1934px #FFF, 833px 1139px #FFF, 188px 1313px #FFF, 58px 1494px #FFF, 1582px 1133px #FFF;
  animation: animStar 150s linear infinite;
}


body {
    background-color: #000;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    overflow: hidden;
}

.container {
    text-align: center;
    z-index: 1;
    padding: 20px;
}

.logo {
    width: 200px;
    height: auto;
    margin-bottom: 40px;
    animation: fadeIn 2s ease-in-out, float 6s ease-in-out infinite;
}

.typing-container {
    font-size: 2.5em;
    font-weight: bold;
    color: #00aaff;
    display: inline-block;
    text-shadow: 0 0 10px #00aaff, 0 0 20px #00aaff;
}

.typed-text {
    border-right: .15em solid #00aaff;
    white-space: nowrap;
    overflow: hidden;
    margin: 0 auto 10px;
    letter-spacing: .15em;
    animation:
        typing 2s steps(22, end) 1s 1 normal both,
        blink-caret .75s step-end infinite;
}

#line1 {
    width: 13ch;
    animation: typing 2s steps(13, end) 1s 1 normal both, blink-caret .75s step-end infinite;
}

#line2 {
    width: 9ch;
    animation: typing 2s steps(9, end) 3s 1 normal both, blink-caret .75s step-end infinite;
}

#line3 {
    width: 10ch;
    animation: typing 2s steps(10, end) 5s 1 normal both, blink-caret .75s step-end infinite;
}

#line4 {
    width: 18ch;
    animation: typing 2s steps(18, end) 7s 1 normal both, blink-caret .75s step-end infinite;
}


footer {
    position: absolute;
    bottom: 20px;
    width: 100%;
    text-align: center;
    color: #555;
    font-size: 0.8em;
    z-index: 1;
}


@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: #00aaff; }
}


@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes float {
	0% {
		transform: translatey(0px);
	}
	50% {
		transform: translatey(-20px);
	}
	100% {
		transform: translatey(0px);
	}
}

/* Media Queries for Mobile Friendliness */
@media (max-width: 768px) {
    .logo {
        width: 150px;
        margin-bottom: 30px;
    }

    .typing-container {
        font-size: 1.8em;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 10px;
    }

    .logo {
        width: 120px;
        margin-bottom: 20px;
    }

    .typing-container {
        font-size: 1.2em;
    }

    footer {
        font-size: 0.7em;
    }
}