.deco {
  position: absolute;
  height: auto;
  z-index: -1;
}

.deco img {
  width: 100%;
  height: auto;
}

/* code blobcs, header */
.code-blob {
  width: 400px;
  height: auto;
  position: absolute;
}

.code-blob.config {
  top: 40%;
  left: 5%;
}
.code-blob.hello-world {
  bottom: 23%;
  right: 10%;
}
.code-blob.let-data {
  top: 15%;
  left: 20%;
}
.code-blob.let-func {
  top: 50%;
  right: 3%;
}
.code-blob.response-200-ok {
  bottom: 5%;
  left: 30%;
}
.code-blob.return-true {
  top: 35%;
  right: 20%;
}

/* about.html */
.code-blob.let-data-1 {
  top: 45%;
  left: 5%;
}
.code-blob.let-func-1 {
  bottom: 35%;
  right: 10%;
}
.code-blob.response-200-ok-1 {
  top: 20%;
  left: 17%;
}
.code-blob.return-true-1 {
  top: 45%;
  right: 8%;
}


/* about.html (about) */

/* header */
.star-1 {
  top: 5%;
  right: 3%;
  width: 250px;
  aspect-ratio: 1;
}

.star-2 {
  bottom: 2%;
  left: 10%;
  width: 230px;
  aspect-ratio: 1;
}

.star-trail-1 {
  bottom: 30%;
  left: 5%;
  width: 80px;
}

.star-trail-2 {
  bottom: 5%;
  right: 20%;
  width: 125px;
}

/* vision */
.star-3 {
  bottom: 1%;
  right: 15%;
  width: 100px;
}

.star-trail-3 {
  bottom: 5%;
  left: 15%;
  width: 150px;
}

.js-ready .star-trail-3 {
  transform: translateY(28px) scaleX(-1);
}

.js-ready .star-trail-3.revealed {
  transform: translateY(0) scaleX(-1);
}

/* our team */
.star-4 {
  top: 10%;
  left: 10%;
  width: 180px;
}

.swirl {
  bottom: 0%;
  right: 0%;
  width: 800px;
  z-index: 2;
}



/* programme.html (programme) */

/* header */
.star-5 {
  top: 5%;
  right: 3%;
  width: 250px;
}

.star-6 {
  bottom: 2%;
  left: 10%;
  width: 230px;
}

.star-trail-4 {
  bottom: 30%;
  left: 5%;
  width: 80px;
}

.star-trail-5 {
  bottom: 5%;
  right: 20%;
  width: 125px;
}


/* timeline, info part */
.star-7 {
  bottom: 1%;
  right: 10%;
  width: 200px;
}

.star-trail-6 {
  bottom: 5%;
  left: 10%;
  width: 200px;
}

.js-ready .star-trail-6 {
  transform: translateY(28px) scaleX(-1);
}

.js-ready .star-trail-6.revealed {
  transform: translateY(0) scaleX(-1);
}

.star-8 {
  bottom: 0%;
  right: 10%;
  width: 100px;
}


/* contact.html */

.star-9 {
  top: 15%;
  right: 3%;
  width: 240px;
}

.star-10 {
  bottom: 2%;
  left: 2%;
  width: 230px;
}

.star-trail-5 {
  bottom: 2%;
  right: 7%;
  width: 230px;
}


/* responsiveness! */
@media (max-width: 1024px) {
  .code-blob { width: 260px; }
 
  .star-1, .star-5, .star-9  { width: 180px; }
  .star-2, .star-6, .star-10 { width: 150px; }
  .star-3 { width: 100px; top:90% }
  .star-4{ width: 170px; }
  .star-trail-1, .star-trail-4 { width: 55px;  }
  .star-trail-2, .star-trail-5 { width: 90px;  }
  .star-trail-3, .star-trail-6 { width: 110px; }
  .swirl { width: 500px; }
  .star-7  { width: 100px; top: 80%}
  .star-8 {top: 70%; width: 120px;}
}
 
@media (max-width: 680px) {
  /* hidden */
  .code-blob { display: none; }
 
  .star-trail-1, .star-trail-2, .star-trail-3,
  .star-trail-4, .star-trail-5, .star-trail-6 { display: none; }
 
  /* one per section */
  .star-1  { width: 110px; top: 10%; right: 2%; }
  .star-2  { width: 100px; bottom: 1%; left: 3%; }
  .star-3  { display: none;}
  .star-4  { display: none;}
  .star-5  { width: 110px; top:15%}
  .star-6  { display: none; }
  .star-7  { width: 100px; top:85%}
  .star-8  { display: none;}
  .star-9  { width: 110px; display: none;}
  .star-10 { width: 100px; top:85%}
  .swirl   { width: 280px; }
}