*{
    margin: 0;
    color: white;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    box-sizing: border-box;
}

html, body{
    height: 100%;
}

.mainContainer{
    background-color: black;
    display: flex;
    flex-direction: column;
    gap: clamp(0.75rem, 3vw, 1.5rem);
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: clamp(0.75rem, 3vw, 2rem);
}

.imgContainer{
    width: 40%;
    max-width: 240px;
    min-width: 120px;
    text-align: center;
}

.imgContainer img{
    width: 100%;
    height: auto;
    display: block;
}

/* ------------------------------------------------ Line (responsive) */
.line{
    position:relative;
    width: 80%;
    max-width: 500px;
    height: 6px;
    background: red;
    overflow: hidden;
    border-radius: 10px;
}

.cut{
    position:absolute;
    top:0;
    height:100%;
    background:black;
}

/* Fast cut */
.cut1{
    width:60px;
    animation:move1 2s linear infinite;
}

/* Slow cut */
.cut2{
    width:35px;
    animation:move2 4s linear infinite;
}

@keyframes move1{
    from{ left: -80px; }
    to{ left: calc(100% + 40px); }
}

@keyframes move2{
    from{ left: -50px; }
    to{ left: calc(100% + 40px); }
}

.contentContainer h1{
    font-size: clamp(1.5rem, 6vw, 3rem);
    text-align: center;
    letter-spacing: 1.5px;
}

/* Tweaks for small screens */
@media (max-width: 480px){
    .imgContainer{ width: 48%; max-width: 180px; }
    .line{ height: 8px; }
    .cut1{ width:48px; }
    .cut2{ width:28px; }
    .contentContainer h1{ font-size: clamp(1.25rem, 7vw, 2rem); }
}

@media (min-width: 481px) and (max-width: 900px){
    .imgContainer{ width: 35%; max-width: 220px; }
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce){
    .cut1, .cut2{ animation: none; }
}