.svg-wrapper {
  height: 60px;
	margin: 0 auto;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  width: 320px;
}

.shape {
  fill: transparent;
  stroke-dasharray: 140 540;
  stroke-dashoffset: -474;
  stroke-width: 8px;
  stroke: #19f6e8;
}

.text {
  color: #fff;
  font-family: 'Roboto Condensed';
  font-size: 22px;
  letter-spacing: 8px;
  line-height: 32px;
  position: relative;
  top: -48px;
}

@keyframes draw {
  0% {
    stroke-dasharray: 140 540;
    stroke-dashoffset: -474;
    stroke-width: 8px;
  }
  100% {
    stroke-dasharray: 760;
    stroke-dashoffset: 0;
    stroke-width: 2px;
  }
}

.svg-wrapper:hover .shape {
  -webkit-animation: 0.5s draw linear forwards;
  animation: 0.5s draw linear forwards;
}

html, body {
  height: 80%;
  min-height: 100%;
  margin: 0;
}
/*
body {
  display: flex;
  align-items: center;
  justify-content: center;
   background-size: cover;
}*/

.table #pic .thumbs {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  width: 80%;
  height:10%;
  max-width: 100%;
}
.thumbs > a {
  max-width: 250px;
  height: 200px;
  margin: 10px;
  overflow: hidden;
  border-radius: 5px;
  box-shadow: 0 0 0 3px white, 0 5px 8px 3px rgba(0, 0, 0, 0.6);
}
.thumbs > a img {
  transform: scale(1);
  transition: transform 0.1s ease-in-out;
  filter:blue(50%);
  min-width: 100%;
  min-height: 100%;
  max-width: 100%;
  max-height: 100%;
}
.thumbs > a:hover img {
  transform: scale(1.1);
  filter: grayscale(0%);
}

.lightbox {
  position: fixed;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  height: 80%;
  width: 60%;
  left: 30%;
  top: 30%;
  transform: translateY(-100%);
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}
.lightbox:has(div:target) {
  transform: translateY(0%);
  opacity: 1;
}
.lightbox a.nav {
  text-decoration: none;
  color: white;
  font-size: 40px;
  text-shadow: 0 2px 2px rgba(0, 0, 0, 0.8);
  opacity: 0.5;
  font-weight: 200;
}
.lightbox a.nav:hover {
  opacity: 1;
}
.lightbox .target {
  position: absolute;
  height: 100%;
  width: 100%;
  display: flex;
  transform: scale(0);
  align-items: center;
  justify-content: space-between;
}
.lightbox .target *:first-child, .lightbox .target *:last-child {
  flex: 0 0 100px;
  text-align: center;
}
@media all and (max-width: 600px) {
  .lightbox .target *:first-child, .lightbox .target *:last-child {
    flex: 0 0 50px;
  }
}
.lightbox .target .content {
  transform: scale(0.9);
  opacity: 0;
  flex: 1 1 auto;
  align-self: center;
  max-height: 100%;
  min-height: 0;
  min-width: 0;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0 0 0 3px white, 0 5px 8px 3px rgba(0, 0, 0, 0.6);
  transition: transform 0.25s ease-in-out, opacity 0.25s ease-in-out;
}
.lightbox .target .content img {
  min-width: 100%;
  min-height: 100%;
  max-width: 100%;
  max-height: calc(100vh - 40px);
  display: block;
  margin: 0;
}
.lightbox .target:target {
  transform: scale(1);
}
.lightbox .target:target .content {
  transform: scale(1);
  opacity: 1;
}
.lightbox .close {
  position: absolute;
  right: 10px;
  top: 10px;
}
/* Стилове за контейнера */
.scroll-container1 {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: 10px;
  padding: 10px 0;
  scroll-snap-type: x mandatory;
}

/* Стилове за изображенията */
.scroll-container1 img {
  max-width: 100%;
  height: auto;
  flex-shrink: 0;
  scroll-snap-align: center;
}

/* Стилове за контейнера на всички елементи */
.container1 {
  width: 100%;
  max-width: 1200px;
  display: flex;
  justify-content: center;
  margin: 0 auto;
}

/* Стилове за скролбар (опционално, за да изглежда по-добре) */
.scroll-container1::-webkit-scrollbar {
  height: 8px;
}

.scroll-container1::-webkit-scrollbar-thumb {
  background: #888;
}

.scroll-container1::-webkit-scrollbar-thumb:hover {
  background: #555;
}
@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/firasans/v17/va9E4kDNxMZdWfMOD5Vvk4jLeTY.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}