/* bewops - settings.css */
:root {
    --primary-bg-color: rgba(25, 25, 25, 1);
    --secondary-bg-color: rgba(60, 60, 60, 1);
    --primary-text-color: rgb(255, 255, 255, 1);
    --secondary-text-color: #ff5f0f;
}

/* Skip-Link für Barrierefreiheit */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #000;
  color: white;
  padding: 8px;
  z-index: 100;
  transition: top 0.3s;
}
.skip-link:focus {
  top: 0;
}
* {
    margin: 0;
    padding: 0;
}
body {
    min-height: 100vh;
    font-family: 'Orbitron';
    background-color: var(--primary-bg-color);
    color: var(--primary-text-color);
}
/* Verwenden Sie clamp() für flüssige und zugängliche Typografie */
h1 {
    /* min, bevorzugt, max */
    font-size: clamp(1.7rem, 3.8vw + 1rem, 4.2rem); 
}
h2 {
    font-size: clamp(1.2rem, 1.5vw + 0.3rem, 1.8rem);
}
h3 {
    font-size: clamp(1.4rem, 2vw + 0.4rem, 2.8rem);
}
h4{
    font-family: 'Kodchasan';
    font-size: clamp(1rem, 1vw + 0.5rem, 1.5rem);
}
h5{
    font-family: 'Kodchasan';
    font-size: clamp(0.8rem, 0.7vw + 0.5rem, 1.1rem);
}
p{
    font-family: 'Kodchasan';
    font-size: clamp(1rem, 1.2vw + 0.2rem, 1.4rem);
    hyphens: auto;
}
.slide-in-left {
    transform: translateX(-10%);
    opacity: 0;
}
.slide-in-amin {
    transition: 0.5s ease-in;
    transform: translateX(0%);
    opacity: 1;
}
.horizontallinie {
    width: 100%;
    height: 1px;
    background-color: var(--primary-text-color);
    opacity: 0;
    scale: 0 1;
    /* opacity: 1;
    scale: 1 1; */
}
.horizontallinie-anim {
    transition: 0.8s ease-in;
    scale: 1 1;
    opacity: 0.3;
}
.about_me_section_container {
    transform: translateY(-50%) scale(0);
    opacity: 0;
    box-shadow: none;
}
.about-me-anim {
    transition: 0.4s ease-in;
    transform: translateY(0%) scale(1);
    opacity: 1;
    box-shadow:
        inset 0px 2px 5px whitesmoke;
}