/*
d8888b. d88888b .d8888. d88888b d888888b .d8888. 
88  `8D 88'     88'  YP 88'     `~~88~~' 88'  YP 
88oobY' 88ooooo `8bo.   88ooooo    88    `8bo.   
88`8b   88~~~~~   `Y8b. 88~~~~~    88      `Y8b. 
88 `88. 88.     db   8D 88.        88    db   8D 
88   YD Y88888P `8888Y' Y88888P    YP    `8888Y' 
*/

*, *::before, *::after {
  box-sizing: border-box; /* Include padding and border in element's total width and height */
}


/*
d888888b  .d8b.   d888b  .d8888. 
`~~88~~' d8' `8b 88' Y8b 88'  YP 
   88    88ooo88 88      `8bo.   
   88    88~~~88 88  ooo   `Y8b. 
   88    88   88 88. ~8~ db   8D 
   YP    YP   YP  Y888P  `8888Y' 
*/

section {
  max-width: 1000px;
  justify-self: center;
  padding: 2rem 1.25rem;

  @media (max-width: 768px) {
    padding: 1.5rem 1rem; /* Reduce padding on smaller screens */
  }
}


img {
  max-width: 100%; /* Responsive width */
  height: auto; /* Maintain aspect ratio */
}


hr {
  width: 100%;
  max-width: 900px;
  height: 1px;
  margin: 2rem auto;

  background: linear-gradient(
    to right,
    transparent,
    rgba(0, 0, 0, 0.3),
    transparent
  );
  border: none;
}


blockquote {
  margin: 0 auto 1.5rem;
  padding: 0.1rem 1rem;

  color: var(--secondary-text-color);

  border-left: 4px solid var(--primary-accent-color);
  border-radius: 4px;

  p {
    font-family: var(--monospace-font);
    text-align: left;
  }

  footer {
    padding: 0;
    border: none;
    justify-self: end;
  }
}


strong {
  font-weight: 600; /* Semi-bold for emphasis */
}


/*
 .o88b. db       .d8b.  .d8888. .d8888. d88888b .d8888. 
d8P  Y8 88      d8' `8b 88'  YP 88'  YP 88'     88'  YP 
8P      88      88ooo88 `8bo.   `8bo.   88ooooo `8bo.   
8b      88      88~~~88   `Y8b.   `Y8b. 88~~~~~   `Y8b. 
Y8b  d8 88booo. 88   88 db   8D db   8D 88.     db   8D 
 `Y88P' Y88888P YP   YP `8888Y' `8888Y' Y88888P `8888Y' 
*/

.container {
  padding: 0 1.25rem;
  margin: 0 auto;
}


.btn-container {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;

  justify-content: center;
  align-items: center;
}


.squishable-text {
  hyphens: auto;         /* aktiviert automatische Silbentrennung */
  -webkit-hyphens: auto; /* für ältere Webkit-Browser */
  -ms-hyphens: auto;     /* für ältere IE/Edge-Versionen */
}


.info-box {
  padding: 20px;

  border-radius: 20px;
  background-color: var(--secondary-bg-color);
  transition: transform 0.5s ease;

  overflow: hidden;

  .info-content {
    width: 100%;
    transition: transform 0.5s ease;
  }
}


.cta {  /* Call to Action button */
  position: relative;
  display: inline-flex;
  margin-top: 2.5rem;
  padding: 0.9em 2.2em;

  font-family: var(--monospace-font);
  font-size: 1.05rem;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: 0.02em;
  color: #ffffff;

  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--primary-accent-color) 50%, var(--primary-text-color)),
    color-mix(in srgb, var(--secondary-accent-color) 20%, var(--primary-text-color))
  );
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border-radius: 999px;
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    background 0.25s ease;

  cursor: pointer;

  align-items: center;
  justify-content: center;

  &::before {
    content: "";
    position: absolute;
    inset: 0;

    border-radius: inherit;
    background: radial-gradient(
      120% 120% at 20% 10%,
      rgba(255, 255, 255, 0.45),
      transparent 60%
    );
    opacity: 0.6;

    pointer-events: none;
  }

  &:hover {
    transform: translateY(-3px);
    box-shadow:
      0 18px 45px rgba(0, 0, 0, 0.25),
      inset 0 1px 0 rgba(255, 255, 255, 0.9);
  }
}


.simple-btn {
  padding: 0.2rem 0.8rem;

  color: var(--primary-text-color);
  font-size: .75rem;
  text-decoration: none;

  border: 1px solid rgba(0, 0, 0, 0.35);
  border-radius: 999px;
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;

  cursor: pointer;

  &:hover {
    background: rgba(0,0,0,0.15);
    transform: translateY(-2px);
  }
}


.glass-btn {
  padding: 0.6rem 1.4rem;

  color: #fff;
  font-weight: 500;
  font-size: .75rem;
  text-decoration: none;

  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.35);
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: all 0.3s ease;

  cursor: pointer;

  &:hover {
    background: rgba(255,255,255,0.25);
    transform: translateY(-2px);
  }
}


.icon-push {
  position: relative;
  display: inline-block;
  width: 1.5rem; /* adjust for icon size */
  height: 1.2rem;
  margin-right: 0.3rem;

  overflow: hidden;

  svg {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;

    transform: translateY(100%);
    transition: transform 0.5s ease, opacity 0.2s ease;

    pointer-events: none;

    &:first-child {
      transform: translateY(0);
    }
  }
}