/* body {
  background-color: black;
} */

.testing {
  color: #f785cd;
}

#middle {
  margin: 10% 5% 5% 5%;
}

#about {
  float: left;
}

#portfolio {
  float: left;
}

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  /* width: 50%; */
  margin-top: 10%;
}

/* STARS */
.stars {
  margin: 100px 0;
  position: relative;
  display: block;
  color: #f785cd;
  width: 0px;
  height: 0px;
  border-right: 12.5px solid transparent;
  border-bottom: 8.75px solid #f785cd;
  border-left: 12.5px solid transparent;
  transform: rotate(35deg);
}
.stars:before {
  border-bottom: 10px solid #f785cd;
  border-left: 3.75px solid transparent;
  border-right: 3.75px solid transparent;
  position: absolute;
  height: 0;
  width: 0;
  top: -6.25px;
  left: -8.125px;
  display: block;
  content: '';
  transform: rotate(-35deg);
}
.stars:after {
  position: absolute;
  display: block;
  color: #f785cd;
  top: 1px;
  left: -13.125px;
  width: 0px;
  height: 0px;
  border-right: 12.5px solid transparent;
  border-bottom: 8.75px solid #f785cd;
  border-left: 12.5px solid transparent;
  transform: rotate(-70deg);
  content: '';
}

.star-container .stars {
  position: absolute;  
}

.star-container .stars:nth-child(even) {
  position: absolute;
  animation: star-motion 15s linear infinite;
}

/* STAR POSITION */
.star-container .stars:nth-child(1) {
top: -50%;
left: 5%;
animation: star-animation 12s linear 2s infinite;
top: calc(50% - -119px);
left: calc(50% - 43px);
}

.stars:nth-child(1)::before,
.stars:nth-child(1)::after {
  -webkit-animation-delay: 4000ms;
  animation-delay: 4000ms;
}

.star-container .stars:nth-child(2) {
top: -20%;
left: 10%;
}

.stars:nth-child(2)::before,
.stars:nth-child(2)::after {
  -webkit-animation-delay: 5000ms;
  animation-delay: 5000ms;
}

.star-container .stars:nth-child(3) {
top: -50%;
left: 15%;
animation: star-animation 12s linear infinite;
}

.star-container .stars:nth-child(4) {
top: -10%;
left: 20%;
}

.star-container .stars:nth-child(5) {
top: -20%;
left: 25%;
animation: star-animation 12s linear 2s infinite;
}

.star-container .stars:nth-child(6) {
top: -40%;
left: 30%;
}

.star-container .stars:nth-child(7) {
top: -30%;
left: 35%;
animation: star-animation 12s linear infinite;
}

.star-container .stars:nth-child(8) {
top: -20%;
left: 40%;
}

.star-container .stars:nth-child(9) {
top: -50%;
left: 45%;
animation: star-animation 12s linear 2s infinite;
}

.star-container .stars:nth-child(10) {
top: -5%;
left: 50%;
}

.star-container .stars:nth-child(11) {
top: -20%;
left: 60%;
animation: star-animation 12s linear infinite;
}

.star-container .stars:nth-child(12) {
top: -10%;
left: 70%;
}

.star-container .stars:nth-child(13) {
top: -50%;
left: 80%;
animation: star-animation 12s linear 2s infinite;
}

.star-container .stars:nth-child(14) {
top: -20%;
left: 90%;
}

.star-container .stars:nth-child(15) {
top: -50%;
left: 95%;
animation: star-animation 12s linear infinite;
}


/* STAR ANIMATION */

@keyframes star-animation {
0% {
    transform: translate(0);
    opacity: 1;
}

20% {
    transform: translate(4px, 100px);
    opacity: 0.8;
}

40% {
    transform: translate(-7px, 200px);
    opacity: 0.7;
}

60% {
    transform: translate(10px, 400px);
    opacity: 0.5;
}

80% {
    transform: translate(-14px, 700px);
    opacity: 0.2;
}

100% {
    transform: translate(16px, 900px);
    opacity: 0;
}
}


@keyframes star-motion {
0% {
    transform: translate(-2px, 0);
    opacity: 1;
}

20% {
    transform: translate(-9px, 200px);
    opacity: 0.9;
}

40% {
    transform: translate(14px, 300px);
    opacity: 0.7;
}

60% {
    transform: translate(-22px, 400px);
    opacity: 0.6;
}

80% {
    transform: translate(30px, 600px);
    opacity: 0.5;
}

90% {
    transform: translate(-40px 800px);
    opacity: 0.3;
}

100% {
    transform: translate(52px, 1000px);
    opacity: 0;
}
}