:root {
    --marquee-animation: 12s linear infinite;
}

aside {
    background-image: url(../assets/stars.jpg);
}

.marquee {
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
  display: flex;
}

/* The marquee has two duplicated tracks to run properly.
They use different animations to properly space items.
Thank you Olavi Haapala https://olavihaapala.fi/2021/02/23/modern-marquee.html
*/
.marquee .track:first-child {
    animation: first-marquee var(--marquee-animation);
}

.marquee .track:last-child {
  animation: second-marquee var(--marquee-animation);
  position: absolute;
}

.marquee img {
    height: 24px;
    padding-left: var(--small-padding);
}

.about {
    display: flex;
}

.about div {
    margin: var(--small-padding);
}

@keyframes first-marquee {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(-100%);
  }
}

@keyframes second-marquee {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0%);
  }
}


.profile-container {
    border: 2px solid var(--blue);
    min-width: 300px;
    max-width: 300px;
    border-radius: 100%;
    height: 350px;
    background: #D3869B;
    background: radial-gradient(circle, var(--blue) 0%, rgba(211, 134, 155, 0) 70%);
    transform: scale(0.9);
}

img.profile-image {
    max-width: 100%;
    height: auto;

    border-radius: 0% 0% 45% 45%;
    position: relative;
    top: -52px;
    border-bottom: 3px solid var(--blue);
    transform: none;
    /* opacity: 20%; */
    
}