<style>
            :root {
                --header-image: url('https://sadhost.neocities.org/images/layouts/wp.jpeg');
                --body-bg-image: url('pix/magical_technic__by_vinoetz_by_cimoetz_dfkpac.jpg');
            }
                
    body {
        font-family: 'Verdana';
        margin: 0;
        background-color: lightblue;
        color: #fceaff;
        background-image: url('pix/magical_technic__by_vinoetz_by_cimoetz_dfkpac.jpg');
        background-repeat: no-repeat;
        background-size: cover;
        overflow: hidden;
}

#container {
    height: 1000px;
    width: 1000px;
    color: #000;
    margin: 0 auto;
}

.box1 {
  height: 500px;
  width: 900px;
  padding:10px;
  background-color: white;
  color: black;
  opacity: 0.75;
  position: fixed;
  top: 200px;
  outline-style: solid;
  outline-color: darkgrey;
  outline-width: 2px;
}

h1 {
  font-family: 'ChistonDisco';
  letter-spacing: 0.25em;
  font-size: 40px;
  color: white;
  position: absolute;
  top: 125px;
  left: 270px;
  text-shadow: 1px 1px 4px darkgrey;
}

.compy {
  position: fixed;
  top: 630px;
  left: 1200px;
  height: 110px;
  width: 110px;
}

.star {
    position: absolute;
    top: -20px;
    color: #fff;
    animation: animate 5s linear forwards;
    /* you can set infinite too */
}

.star::before {
    content: '\f005';
    font-family: FontAwesome;
    text-shadow: 0 0 5px #fff,
        0 0 20px #fff,
        0 0 50px #fff;
}

@keyframes animate {

    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
    }

    80% {
        opacity: 1;
    }

    100% {
        transform: translateY(100vh) rotate(360deg);
        opacity: 0;
    }

}

@media screen and (max-width: 600px) {
    .star {
        font-size: 8px; 
    }
}
</style>