body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    background: url('/images/background.jpg') center/cover no-repeat fixed;
    font-family: 'Oswald', sans-serif; /* Changed font */
    overflow-x: hidden;
    position: relative;
}

/* FOG ANIMATION - completely revised for mobile compatibility */
.fog-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow: hidden;
}

#foglayer_01, #foglayer_02, #foglayer_03 {
    width: 400%; /* Increased from 200% to ensure smoother transition */
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

#foglayer_01 {
    animation: foglayer_01_opacity 10s linear infinite, foglayer_moveme 30s linear infinite; /* Slowed down movement */
}

#foglayer_01 .image01, #foglayer_01 .image02 {
    background: url("/images/fog1.png") repeat-x top left transparent;
    background-size: 50% 100%; /* Adjusted to prevent stretching */
    width: 25%; /* Adjusted to match new total width */
    height: 100%;
    float: left;
    opacity: 0.8; /* Added base opacity */
}

#foglayer_02 {
    animation: foglayer_02_opacity 21s linear infinite, foglayer_moveme 26s linear infinite; /* Adjusted timing */
}

#foglayer_02 .image01, #foglayer_02 .image02 {
    background: url("/images/fog2.png") repeat-x top left transparent;
    background-size: 50% 100%;
    width: 25%;
    height: 100%;
    float: left;
    opacity: 0.8;
}

#foglayer_03 {
    animation: foglayer_03_opacity 21s linear infinite, foglayer_moveme 34s linear infinite; /* Different timing for variety */
}

#foglayer_03 .image01, #foglayer_03 .image02 {
    background: url("/images/fog2.png") repeat-x top left transparent;
    background-size: 50% 100%;
    width: 25%;
    height: 100%;
    float: left;
    opacity: 0.8;
}

@keyframes foglayer_01_opacity {
    0% { opacity: .3; }
    22% { opacity: .5; }
    40% { opacity: .4; }
    58% { opacity: .5; }
    80% { opacity: .3; }
    100% { opacity: .3; }
}

@keyframes foglayer_02_opacity {
    0% { opacity: .2; }
    25% { opacity: .4; }
    50% { opacity: .3; }
    80% { opacity: .4; }
    100% { opacity: .2; }
}

@keyframes foglayer_03_opacity {
    0% { opacity: .4; }
    27% { opacity: .2; }
    52% { opacity: .4; }
    68% { opacity: .3; }
    100% { opacity: .4; }
}

@keyframes foglayer_moveme {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%); /* Adjusted to match new width */
    }
}

/* Content elements with z-index to appear above fog */
.title {
    font-weight: 700;
    text-transform: uppercase;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: rgba(254,86,0,255); /* Changed color from rgba(254,86,0,255) to gold/brown */
    font-size: xxx-large;
    opacity: 0;
    animation: fadeIn 2s ease-in forwards, moveDiagonal 5s ease-in-out 3s forwards;
    z-index: 2;
}

@keyframes fadeIn {
    to { opacity: 0.9; }
}

@keyframes moveDiagonal {
    to {
        transform: translate(-49vw, -49vh);
    }
}

.content {
    position: absolute;
    bottom: 0;
    width: 100%;
    background: rgba(39,19,14,0.6); /* Adjusted to match writer page style */
    color: rgb(157,27,18); /* #f8f1e4Changed from rgb(157,27,18) to light cream */
    display: flex;
    justify-content: center;
    text-align: left;
    font-size: 1.5rem;
    padding: 20px;
    opacity: 0;
    animation: showContent 2s ease-in 5s forwards;
    z-index: 2;
}

@keyframes showContent {
    to { opacity: 1; }
}

.kaland {
    font-weight: 700;
    text-transform: uppercase;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #27130E; /* Changed color */
    background-color: rgba(254, 86, 0, 1); /* Changed from rgba(254, 86, 0, 1) to match writer page */
    padding: 10px 20px;
    font-size: xx-large;
    border: none;
    border-radius: 5px; /* Changed from 12px to match writer page buttons */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    cursor: default;
    opacity: 0;
    pointer-events: none;
    animation: fadeIn2 2s ease-in forwards;
    animation-delay: 8s;
    transition: background-color 0.3s ease, transform 0.2s ease;
    z-index: 2;
}

.kaland.enabled {
    cursor: pointer;
    pointer-events: auto;
}

.kaland:hover {
    background-color: rgba(220, 70, 0, 1);
    transform: translate(-50%, -50%) scale(1.01);
}

@keyframes fadeIn2 {
    to { opacity: 0.7; }
}

/* Mobile-specific adjustments */
@media (max-width: 768px) {
    #foglayer_01 .image01, #foglayer_01 .image02,
    #foglayer_02 .image01, #foglayer_02 .image02,
    #foglayer_03 .image01, #foglayer_03 .image02 {
        background-size: 50% 100%;
        width: 25%;
    }
    
    /* Adjust animation speeds for mobile */
    #foglayer_01 {
        animation: foglayer_01_opacity 10s linear infinite, foglayer_moveme 35s linear infinite;
    }
    
    #foglayer_02 {
        animation: foglayer_02_opacity 21s linear infinite, foglayer_moveme 31s linear infinite;
    }
    
    #foglayer_03 {
        animation: foglayer_03_opacity 21s linear infinite, foglayer_moveme 39s linear infinite;
    }

    /* Mobile-specific title adjustments */
    .title {
        font-size: 2.5rem;
        top: 30%;
        transform: translate(-50%, -30%);
    }

    @keyframes moveDiagonal {
        to {
            transform: translate(-49vw, -30vh);
        }
    }

    /* Mobile-specific content adjustments */
    .content {
        font-size: 1.5rem;
        padding: 15px;
        bottom: 0;
        position: fixed;
        width: 100%;
        height: 50%;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        text-align: left;
        overflow: hidden;
    }

    .content p {
        max-width: 90%;
        margin: 0;
        line-height: 1.4;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    /* Mobile-specific button adjustments */
    .kaland {
        font-size: 1.5rem;
        padding: 8px 16px;
        bottom: 55%;
        top: auto;
    }
}