body {
  transition: all 1s;
}

.art-container {
  position: relative;
  max-width: 800px;
}

.art-thread {
  position: absolute;
  width: 100%;
  left: 0;
}

.art-thread svg path {
  transition: all 0.3s;
}

.dark-theme .art-thread svg path {
  stroke: #D8B8FE;
}

.art-label * {
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  font-variation-settings: "wdth" 100;
  text-transform: uppercase;
}

body:not(.dark-theme) .art-label {
  opacity: 0;
}

.art-label {
  margin-top: 20px;
  color: #191919;
  text-shadow: -1px -1px 0 #D8B8FE, 1px -1px 0 #D8B8FE, -1px 1px 0 #D8B8FE, 1px 1px 0 #D8B8FE;
  transition: all 0.3s;
}

.art-label h2 {
  margin-bottom: 0;
  font-size: 20px;
  line-height: 20px;
}

.art-label h3 {
  font-size: 14px;
}

@media (min-width: 768px) {
  .art-label h2 {
    font-size: 28px;
    line-height: 28px;
  }
  .art-label h3 {
    font-size: 18px;
  }
}
.art-img-container {
  width: 100%;
  position: relative;
  margin: auto;
}

.art-img-container img {
  width: 100%;
  transition: all 1s;
}

.art-img-container .art-img-dark {
  opacity: 0;
  left: 0;
  top: 0;
  position: absolute;
}

.dark-theme .art-img-dark {
  opacity: 1;
}

a:hover img {
  transform: scale(1.02);
}

.art-item {
  position: absolute;
}

/*# sourceMappingURL=art.css.map */