body {
    margin: 0;
    overflow-x: hidden;
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%; /* Ensure full height for proper scrolling */
    overflow-x: hidden; /* Prevent horizontal scroll */
    overflow-y: auto; /* Ensure vertical scrolling */
    background-color: white; /* Set the background to white */
}

.smoke-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* Cover the entire viewport */
    pointer-events: none;
    overflow: hidden; /* Prevents any smoke from overflowing */
}

.smoke {
    position: absolute;
    width: 100px;
    height: 100px;
    background: radial-gradient(circle, rgba(0, 0, 0, 0.2) 10%, rgba(0, 0, 0, 0) 80%);
    opacity: 0;
    filter: blur(15px);
    animation: rise 10s linear infinite, fade 10s ease-in-out infinite;
    animation-delay: calc(-10s * var(--random-delay)); /* Random delay for a more natural feel */
    transform: scale(var(--random-scale)); /* Vary particle sizes */
}

/* Keyframes for smoke movement */
@keyframes rise {
    from {
        transform: translateY(100vh) scale(var(--random-scale));
    }
    to {
        transform: translateY(-10vh) scale(var(--random-scale));
    }
}

/* Softer opacity transitions */
@keyframes fade {
    0%, 100% {
        opacity: 0;
    }
    40% {
        opacity: 0.5;
    }
    80% {
        opacity: 0.3;
    }
}

header {
    background-color: #222;
    padding: 10px;
    text-align: center;
}

header .logo {
    height: 50px;
}

main {
    text-align: center; /* Keskittää tekstit */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: white;
    padding: 20px;
    border-radius: 10px;
    margin: auto;
    max-width: 70vw; /* Varmistaa, että pääsisältö ei leviä liikaa */
    font-size: 20px; /* Adjust to your preference */
}

main h1 {
    font-family: 'Roboto-Regular';
    font-size: 32px; /* Adjust heading size */
}

main p {
    font-size: 20px; /* Adjust paragraph size */
}

.narrow-main {
    max-width: 1000px;  /* Adjust this value to your liking */
    margin: 0 auto;    /* Centers the content */
    padding: 20px;     /* Optional: add some padding for spacing */
}

h1 {
    font-size: 24px;
}

.no-wrap-text {
    white-space: nowrap;
}

main p:first-of-type {
    margin-bottom: 0;
}

p a {
    display: inline !important;
    white-space: nowrap; /* Prevent wrapping */
}

.input-field {
    width: 250px; /* Voit säätää tätä arvoa tarpeen mukaan */
    padding: 8px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 5px;
    display: block;
    margin-bottom: 10px;
}

.login-form {
    display: grid;
    gap: 10px;
    max-width: 300px; /* Adjust as needed */
    margin: 0 auto; /* Center the form */
}

button {
    background-color: black;
    color: white;
    font-size: 20px;
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'CreatoDisplay-Bold', sans-serif;
}

button:hover {
    background-color: #333;
    transform: scale(1.05);
}

.form-group {
    display: grid;
    grid-template-columns: 120px 1fr; /* Ensure label and input align */
    align-items: center;
}

.lang-switch {
    text-decoration: none;
    color: white; /* Adjust color as needed */
}

.logout-button {
    margin-left: 15px; /* Space between language switch and logout */
}

label {
    text-align: left; /* Keep labels aligned */
}

input {
    width: 100%; /* Make sure inputs align properly */
    padding: 5px;
    box-sizing: border-box; /* Prevent width overflow */
}

label {
    margin-bottom: 5px;
}

.image-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}

.image-container img {
    max-width: 60%;
    height: auto;
}

@media (max-width: 768px) {
    .image-container img {
        max-width: 100%; /* Increase size for smaller screens */
    }
}

/* Pienempi logo vain tällä sivulla */
.small-logo {
    width: 100%; /* Aseta kuvan leveys 100% kontainerista */
    height: auto; /* Säilyttää kuvasuhteen */
    display: block;
    margin: 0 auto; /* Keskittää kuvan */
}

@media (max-width: 768px) {
    .small-logo {
        width: 80%; /* Increase the width to 80% of the container on mobile devices */
        max-width: 80%; /* Ensure it doesn't exceed 80% of the container */
    }

    /* Other mobile-specific styles... */
}

.video-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    max-width: 1200px;
    margin: auto;
    padding: 10px;
}

.video-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.video-item iframe {
    width: 100%;
    height: 100%;
    border: none;
    aspect-ratio: 16 / 9; /* Asettaa oikean kuvasuhteen */
}

/* Responsiivisuus: yksi video per rivi pienillä näytöillä */
@media (max-width: 768px) {
    .video-container {
        grid-template-columns: 1fr;
    }

    .video-item iframe {
        height: auto; /* Pienemmällä näytöllä video on vähän lyhyempi */
    }
}

.centered-video {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-top: 30px;
}

.centered-video iframe {
    width: 267%; /* Säädä leveys tarpeen mukaan */
    max-width: 900px; /* Kahden vierekkäisen videon leveys */
    height: 400px;
}

@media (max-width: 768px) {
    .centered-video iframe {
        width: 100%;
        height: 315px;
    }
}

@font-face {
    font-family: 'Roboto-Regular';
    src: url('fonts/Roboto-Regular.woff2') format('woff2'),
         url('fonts/Roboto-Regular.woff') format('woff'),
         url('fonts/Roboto-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'CreatoDisplay-Bold';
    src: url('fonts/CreatoDisplay-Bold.woff2') format('woff2'),
         url('fonts/CreatoDisplay-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

main {
    font-family: 'Roboto-Thin', sans-serif;
}

/* Hotbarin perusasettelu */
.hotbar {
    font-family: 'CreatoDisplay-Bold', sans-serif;
    background-color: #222;
    padding: 5px 0;
    width: 100%; /* Ensures full width */
}

.hotbar-links {
    flex: 2; /* Gives more space for centering */
    display: flex;
    justify-content: center; /* Ensures true center alignment */
    gap: 20px;
}
.hotbar-logo {
    flex: 1; /* Takes up available space */
    text-align: left; /* Ensures it stays on the left */
    margin-right: 8px;
}
.hotbar-right {
    flex-shrink: 0; /* Prevents shrinking */
    white-space: nowrap; /* Ensures text doesn't wrap */
    display: flex;
    align-items: center;
    gap: 5px; /* Space between elements */
}

.hotbar-right {
    flex: 1; /* Matches the left section size */
    display: flex;
    justify-content: flex-end; /* Ensures it stays on the right */
    gap: 2px;
}

.hotbar-container {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Keeps left and right items aligned */
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
    position: relative;
}

/* Linkkien tyyli */
.hotbar a {
    color: white;
    text-decoration: none;
    padding: 10px 15px;
    font-size: 18px;
}

.hotbar-links {
    display: flex;
    gap: 5px;
}

/* Linkkien tyyli */
.hotbar a {
    color: white;
    text-decoration: none;
    padding: 8px 15px; /* Reduced padding */
    font-size: 18px; /* Reduced font size */
}

.active-lang {
    font-weight: bold;
}

@media (max-width: 768px) {
    .hotbar .hotbar-links a {
        padding: 6px 10px;
    }
}

/* Responsiivisuus mobiililaitteille */
@media (max-width: 768px) {
    .hotbar-container {
        flex-direction: column;
        text-align: center;
    }

    .hotbar-links {
        flex-direction: column;
        gap: 10px;
        margin-top: 10px;
    }

    .hotbar a {
        display: block;
        padding: 8px;
    }

    .hotbar-right {
        margin-top: 10px;
    }
}

.parent-container {
    width: 100vw; /* Ensures full width */
    max-width: 100vw;
}

.lang-switch img {
    vertical-align: middle;
    margin-right: 5px;
}

.hotbar, 
.hotbar a, 
.hotbar-links, 
.hotbar-right {
    font-family: 'CreatoDisplay-Bold', sans-serif !important;
}



/* body {
    background-color: white;
    background-image: url('kukka.jpg'), url('kukka.jpg');
    background-repeat: repeat-y;
    background-position: left top, right top;
    background-size: auto 200%;
}

@media (max-width: 768px) {
    body {
        background-size: 20vw 100%;
        background-size: contain;
        background-size: min(25vw, 150px) auto;
    }

    main {
        max-width: 80vw;
    }
}

@media (max-width: 480px) {
    body {
        background-size: 25vw 100%;
        background-size: contain;
        background-size: min(25vw, 150px) auto;
    }

    main {
        max-width: 90vw;
    }
}

.dashboard, .page2, .index {
    background-image: none !important;
}
*/

.map-container {
    position: relative;
    width: 90%; /* Skaalautuu ruudun leveyden mukaan */
    max-width: 800px; /* Ei veny liian leveäksi PC:llä */
    height: 0;
    padding-bottom: 56.25%; /* 16:9 kuvasuhde */
    margin: 0 auto; /* Keskittää kartan */
    overflow: hidden; /* Varmistaa, ettei ylimääräinen sisältö leviä ulos */
}

.map-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.image-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); /* Creates responsive columns */
    gap: 20px; /* Adds space between items */
    margin: 20px auto; /* Centers the grid and adds top/bottom margin */
    max-width: 1200px; /* Maximum width for the grid */
    padding: 0 10px;
}

/* Style for each image item */
.image-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border-radius: 10px;
    overflow: hidden; /* Ensures no overflow */
    background-color: #f5f5f5; /* Light background for each image */
    padding: 10px;
}

/* Ensure that images are of uniform size */
.image-item img {
    width: 100%;
    max-width: 100%;  /* Allow images to shrink down */
    height: 200px;
    object-fit: cover;
    border-radius: 10px; /* Optional: Rounds the corners of the images */
}

/* Optional: Add a little space between text and the image */
.image-item p {
    margin-top: 10px;
    font-weight: bold;
    font-size: 16px;
}

/* Increase image size for larger screens */
@media (min-width: 1024px) {
    .image-item img {
        max-width: 80%;  /* 80% of the container's width */
    }
}

/* Responsive layout for smaller screens (tablets) */
@media (max-width: 1100px) {
    .image-grid {
        grid-template-columns: repeat(2, 1fr); /* Two images per row */
    }

    .image-item img {
        max-width: 80%;  /* Slightly smaller on tablets */
    }
}

@media (max-width: 900px) {
    .image-grid {
        grid-template-columns: repeat(2, 1fr); /* Ensure two columns remain */
    }

    .image-item img {
        max-width: 90%;
        height: auto;
    }
}

/* Responsive layout for mobile (small screens) */
@media (max-width: 600px) {
    .image-grid {
        grid-template-columns: 1fr; /* One image per row on small screens */
    }

    .image-item img {
        max-width: 95%;  /* Further reduce the size on mobile */
    }
}

.image-item p {
    margin-bottom: 10px;
    font-size: 18px;
    font-weight: bold;
}

/* Specific image styles for the Kuvia page */
.images-page .image-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); /* Creates responsive columns */
    gap: 20px;
    margin: 20px auto;
    max-width: 1200px;
    padding: 0 10px;
}

.images-page .image-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border-radius: 10px;
    overflow: hidden;
    background-color: #f5f5f5;
    padding: 10px;
}

.images-page .image-item img {
    width: 100%; /* Makes the image fill the container */
    height: 300px; /* Fixed height for uniformity */
    object-fit: cover; /* Ensures the image maintains aspect ratio and fills the area */
    border-radius: 10px;
}

/* Only increase image size for larger screens on the Kuvia page */
@media (min-width: 1024px) {
    .images-page .image-item img {
        max-width: 100%;
    }
}

/* Optional: For tablets */
@media (max-width: 768px) {
    .images-page .image-grid {
        grid-template-columns: repeat(2, 1fr); /* Two images per row */
    }

    .images-page .image-item img {
        max-width: 90%;  /* Slightly smaller on tablets */
        height: auto;
    }
}

/* For mobile screens */
@media (max-width: 480px) {
    .images-page .image-grid {
        grid-template-columns: 1fr; /* One image per row on small screens */
    }

    .images-page .image-item img {
        max-width: 95%;  /* Further reduce the size on mobile */
    }
}

/* Modal Styles */
.modal {
    display: none; /* Hidden by default */
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8); /* Dark overlay */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Ensure modal content is visible only inside the modal */
.modal img {
    max-width: 80%;
    max-height: 80%;
    border-radius: 10px;
}

.modal-content {
    max-width: 80%;
    max-height: 80%;
    border-radius: 10px;
}

.close {
    position: absolute;
    top: 15px;
    right: 25px;
    color: white;
    font-size: 30px;
    font-weight: bold;
    cursor: pointer;
}

.countdown-container {
    text-align: center;
    font-size: 2em;
    color: black !important; /* Force black text */
    margin-top: 10px;
}

.schedule {
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 18px;
    margin-top: 20px;
}

.schedule-row {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 20px;
    align-items: center;
    text-align: left;
}

.schedule-row .time {
    font-weight: bold;
}

.schedule-row .artist {
    font-family: 'Roboto-Regular', sans-serif;
}