body {
    font-family: Arial, sans-serif;
    background: radial-gradient(ellipse, #606f74, #000000);
    margin: 0;
    color: #000;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}


#desktop1 {display:block;}
#desktop2 {display:block;}
#desktop3 {display:block;}
#mobile1 {display:none;}
#mobile2 {display:none;}
#mobile3 {display:none;}

@media all and (max-width: 768px) {
    #desktop1 {display:none;}
    #desktop2 {display:none;}
    #desktop3 {display:none;}
    #mobile1 {display:block;}
    #mobile2 {display:block;}
    #mobile3 {display:block;}
}

.slideshow-container {
    position: relative;
    width: 75vw;
    height: 44vw;
    overflow: hidden;
    box-shadow: 0px 0px 3vh lightblue;
    border-radius: 1.5vw;
}

@media (max-width: 768px) {
    .slideshow-container {
        width: 90vw;
        height: 170vw;
        margin: 20px 0;
        align-items: top;
    }

    .clickable-bottom-container {
        position: absolute;
        bottom: 1%;
        left: 50%;
        transform: translatex(-50%);
        display: flex;
        gap: 0.5%;
        width: 100%;
        height: 6%;
        justify-content: center;
        /* background-color: rgba(0, 0, 255, 0.207); */
    }
    
    .clickable-bottom {
        width: 8%;
        height: 100%;
        /* background-color: rgba(248, 1, 1, 0.329); */
        cursor: pointer;
    }
    
    .clickable-top {
        width: 100%;
        height: 35%;
        /* background: rgba(193, 22, 22, 0.36); */
        cursor: pointer;
    }

    .clickable-contact-container {
        position: absolute;
        top: 2%;
        left: 60%;
        display: flex;
        flex-direction: column;
        gap: 15%;
        width: 25%;
        height: 5%;
        justify-content: center;
        /* background-color: rgba(0, 0, 255, 0.207); */
    }
}

.desktop-slide {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 2s ease-in-out;
}

.mobile-slide {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 2s ease-in-out;
}

.desktop-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.mobile-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.active {
    opacity: 1;
}

@media (min-width: 768px) {
    body {
        min-height: 100vh;
        width: 100vw;
    }

    .clickable-bottom-container {
        position: absolute;
        bottom: -2.5%;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        gap: 0.5%;
        width: 100%;
        height: 10%;
        justify-content: center;
    }
    
    .clickable-bottom {
        width: 4%;
        height: 40%;
        background: rgba(0, 0, 0, 0);
        cursor: pointer;
    }
    
    .clickable-contact-container {
        position: absolute;
        top: 4%;
        left: 84%;
        display: flex;
        flex-direction: column;
        gap: 15%;
        width: 100%;
        height: 10%;
        justify-content: center;
    }
    
    .clickable-top {
        width: 15%;
        height: 35%;
        background: rgba(0, 0, 0, 0);
        cursor: pointer;
    }

}

.button {
    display: block;
    height: 100%;
    width: 100%;
    text-decoration: none;
}