/*@import url('fontawesome/css/all.min.css');*/
html {
  font-size: 14px;
}

/* Responsiv design */
@media (max-width: 768px) {
    .slideshow-text {
        font-size: 14px;
    }

    .slideshow-container {
        height: auto; /* Anpassa höjden automatiskt */
    }
}

@media (max-width: 480px) {
    .slideshow-text {
        font-size: 12px;
    }

    .centered-image {
        max-width: 300px; /* Begränsa bildstorlek på små skärmar */
    }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.index-background {
    height: calc(100vh - 156px); /* Anpassning för navigationens höjd */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background: linear-gradient(to bottom, midnightblue, black);
    padding: 10px; /* Lägg till padding för att undvika att innehåll går utanför */
}
.index-background-white {
    //height: calc(100vh - 156px); /* Anpassning för navigationens höjd */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background: linear-gradient(to bottom, white, grey);
    padding: 10px; /* Lägg till padding för att undvika att innehåll går utanför */
}

.centered-image {
    width: 90%; /* Anpassa till skärmbredd */
    max-width: 484px;
    height: auto; /* Bevara proportioner */
}

.slideshow-container {
    position: relative;
    width: 90%; /* Anpassa till skärmbredd */
    max-width: 643px;
    aspect-ratio: 21 / 14; /* Förhållande för 4:3 */
    margin-top: 20px;
    overflow: hidden;
    border: 2px solid #fff;
    border-radius: 10px;
    background: #000; /* Reservbakgrund om bilder inte laddas */
}

    .slideshow-container img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: initial; /* Bevarar bildens proportioner utan beskärning */
        opacity: 0;
        transition: opacity 1s ease-in-out;
    }

        .slideshow-container img.active {
            opacity: 1;
        }

.slideshow-text {
    font-size: 16px;
    color: white;
    margin-bottom: 10px;
    text-align: center;
}