@charset "UTF-8";
.text-loop-bottom {
  background-color: var(--element1-color);
  transform: skew(2deg, -2deg); }

.text-loop-top {
  background-color: var(--secondary-bg);
  transform: skew(-2deg, 2deg); }
  .text-loop-top p {
    color: var(--secondary-text); }

.text-loop {
  width: 110vw;
  /* Ustalamy szerokość na 100% szerokości okna przeglądarki */
  margin-left: -5px;
  position: relative;
  /* Umożliwia animację wewnętrznych elementów */
  z-index: 4;
  transition: 0.3s;
  -webkit-transition: 0.3s; }
  .text-loop .only-text-wrapper {
    display: flex;
    /* Ustawienie elastycznego kontenera */
    width: 100%; }
  .text-loop .only-text, .text-loop .container, .text-loop .text-inner {
    width: 100%;
    max-width: 100%;
    padding: 0; }
  .text-loop .text {
    display: flex;
    /* Flex, aby elementy były ustawione w poziomie */
    width: auto;
    /* Szerokość automatyczna w zależności od długości tekstu */
    white-space: nowrap;
    /* Zapobiega zawijaniu tekstu */
    animation: scroll-text 15s linear infinite;
    /* Animacja przewijania tekstu */ }
    .text-loop .text p {
      font-weight: 800;
      margin: 0;
      /* Usuwamy marginesy */
      display: inline-block;
      /* Tekst jest w jednym wierszu */
      width: auto;
      /* Ustalamy szerokość na auto */
      font-size: 21rem;
      text-transform: uppercase;
      padding: 27px 0; }

.only-text .buttons {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  flex-wrap: wrap; }
  .only-text .buttons a {
    margin: 5px; }

@keyframes scroll-text {
  0% {
    transform: translateX(0);
    /* Na początku tekst jest widoczny w całości */ }
  100% {
    transform: translateX(-100%);
    /* Tekst przesuwa się na lewą stronę */ } }
@media (max-width: 575.5px) {
  .text-loop .text p {
    padding: 10px 0;
    font-size: 17rem; } }
@media (min-width: 576px) and (max-width: 767.5px) {
  .text-loop .text p {
    padding: 18px 0;
    font-size: 18rem; } }
@media (min-width: 768px) and (max-width: 991.5px) {
  .text-loop .text p {
    padding: 23px 0;
    font-size: 18rem; } }
@media (min-width: 992px) and (max-width: 1199.5px) {
  .text-loop .text p {
    padding: 23px 0;
    font-size: 18rem; } }

/*# sourceMappingURL=only_text.css.map */
