#hero {
  height: 600px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 150px;
}

.heroLogosTop,
.heroLogosBottom {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

.heroText{
  height: 120px;
  width: 100%;
  font-size: 1.5rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}

.heroTextWrapper {
  position: relative;
  overflow: hidden;
  height: 100px;
  width: auto;
  /* Set the height to expand to */
  display: flex;
  justify-content: center;
  align-items: center;
}

.heroTextWrapper::before,
.heroTextWrapper::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 50%;
  background: url('../assets/pure-black-background.jpg');
  background-size: 1000px auto;
  /* Width, Height */
  background-repeat: no-repeat;
  background-position: center;
  transition: transform 2s ease;
  z-index: 1;
}

.heroTextWrapper::before {
  top: 0;
  border-bottom: 2px solid white;
  /* White bottom border */
  transform: translateY(0);
}

.heroTextWrapper::after {
  bottom: 0;
  border-top: 2px solid white;
  /* White top border */
  transform: translateY(0);
}

.heroTextWrapper.reveal .heroText {
  opacity: 1;
  transform: translateY(0);
}

.heroTextWrapper.reveal::before {
  transform: translateY(-100%);
}

.heroTextWrapper.reveal::after {
  transform: translateY(100%);
}

.heroTextWrapper>div>div a {
  margin: 20px;
  font-size: 2.5rem;
}


/* Little logos */
/* Initial state for the logos */
.heroLogosTop div,
.heroLogosBottom div {
  opacity: 0;
  transition: opacity 3s ease, transform 2s ease;
}

/* Animation state for the logos */
.heroLogosTop div.animate,
.heroLogosBottom div.animate {
  opacity: .6;
}

/* Specific animations for each logo */

/* Top */
.heroLogosTop .js.animate {
  transform: translate(158%, -170%);
}

.heroLogosTop .css.animate {
  transform: translate(218%, -170%);
}

.heroLogosTop .python.animate {
  transform: translate(-120%, -30%);
}

.heroLogosTop .c.animate {
  transform: translate(-60%, -30%);
}

.heroLogosTop .html.animate {
  transform: translate(0%, -30%);
}

.heroLogosTop .jquery.animate {
  transform: translate(65%, -30%);
}

.heroLogosTop .docker.animate {
  transform: translate(-115%, -170%);
}

/* Bottom */

.heroLogosBottom .next.animate {
  transform: translate(160%, 200%);
}

.heroLogosBottom .react.animate {
  transform: translate(-20%, 60%);
}

.heroLogosBottom .firebase.animate {
  transform: translate(40%, 60%);
}

.heroLogosBottom .flask.animate {
  transform: translate(100%, 60%);
}

.heroLogosBottom .github.animate {
  transform: translate(160%, 60%);
}

.heroLogosBottom .mysql.animate {
  transform: translate(-180%, 200%);
}

.heroLogosBottom .bootstrap.animate {
  transform: translate(-118%, 200%);
}


#js,
#css,
#python,
#c,
#html,
#jquery,
#docker,
#bootstrap,
#next,
#react,
#firebase,
#flask,
#github,
#mysql {
  width: 40px;
}

.js,
.css,
.python,
.c,
.html,
.jquery,
.docker,
.bootstrap,
.next,
.react,
.firebase,
.flask,
.github,
.mysql {
  width: 60px;
  height: 60px;
  position: relative;
    /* animation: float 3s ease-in-out infinite; */
}

.js::before,
.css::before,
.python::before,
.c::before,
.html::before,
.jquery::before,
.docker::before,
.bootstrap::before,
.next::before,
.react::before,
.firebase::before,
.flask::before,
.github::before,
.mysql::before {
  content: '';
  position: absolute;
  top: -27%;
  left: -27%;
  right: 0;
  bottom: 0;
  width: 110%;
  height: 110%;
  border-radius: 50%;
  z-index: -1;
  filter: blur(2px);
}

.js::before {
  background: conic-gradient(transparent, transparent, var(--yellow));
  animation: spin 3s linear infinite;
}
.css::before {
  background: conic-gradient(transparent, transparent, var(--blue));
  animation: spin 5.5s linear infinite;
}
.python::before {
  background: conic-gradient(transparent, transparent, var(--yellow), var(--blue)80%);
  animation: spin 6s linear infinite;
}
.c::before {
  background: conic-gradient(transparent, transparent, var(--blue));
  animation: spin 4s linear infinite;
}
.html::before {
  background: conic-gradient(transparent, transparent, red);
  animation: spin 7s linear infinite;
}
.jquery::before {
  background: conic-gradient(transparent, transparent, var(--blue));
  animation: spin 6.5s linear infinite;
}
.docker::before {
  background: conic-gradient(transparent, transparent, var(--blue));
  animation: spin 7.5s linear infinite;
}
.bootstrap::before {
  background: conic-gradient(transparent, transparent, rgb(155, 0, 227));
  animation: spin 4.5s linear infinite;
}
.next::before {
  background: conic-gradient(transparent, transparent, white);
  animation: spin 6.5s linear infinite;
}
.react::before {
  background: conic-gradient(transparent, transparent, rgb(54, 195, 255));
  animation: spin 4.5s linear infinite;
}
.firebase::before {
  background: conic-gradient(transparent, var(--yellow), red 80%);
  animation: spin 7s linear infinite;
}
.flask::before {
  background: conic-gradient(transparent, transparent, white);
  animation: spin 5s linear infinite;
}
.github::before {
  background: conic-gradient(transparent, transparent, white);
  animation: spin 6s linear infinite;
}
.mysql::before {
  background: conic-gradient(transparent, orange, rgb(54, 125, 196) 80%);
  animation: spin 3.5s linear infinite;
}

.js::after,
.css::after,
.python::after,
.c::after,
.html::after,
.jquery::after,
.docker::after,
.bootstrap::after,
.next::after,
.react::after,
.firebase::after,
.flask::after,
.github::after,
.mysql::after {
  content: '';
  position: absolute;
  top: -27%;
  left: -27%;
  right: 0;
  bottom: 0;
  width: calc(120% - 1px);
  height: calc(120% - 1px);
  border-radius: 50%;
  background: url('../assets/pure-black-background.jpg');
  background-size: 1300px auto;
  z-index: -1;
}

@keyframes spin {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }

  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

.heroText{
  font-size: 1.5rem;
}

/* Tablet (min-width: 768px) */
@media only screen and (min-width: 768px) {
  .heroText {
    font-size: 2rem;
  }
}

/* Small screens (min-width: 1024px) */
@media only screen and (min-width: 1024px) {
  .heroTextWrapper::before,
  .heroTextWrapper::after {
    background-size: 1600px auto;
  }
}

/* Large+ screens (min-width: 1200px) */
/* @media only screen and (min-width: 1200px) {} */