@import url('global.css');
@import url('navbar.css');
@import url('animations.css');

.section h3 {
    font-weight: bolder;
    margin-bottom: 3%;
    color: var(--other);
}

.slideshow-container {
    width: 45%;
    height: 90%;
    position: relative;
    overflow: hidden;
}
.slideshow-container img, .slideshow-container img {
    width: 100%;
    height: 100%;
    position: absolute;
}

.description {
    background: linear-gradient(to bottom right, var(--light-beige), var(--dark-beige));
}
#start-section .description {
    font-size: 1.3lvw;
}
#main-section .description {
    font-size: 1.3lvw;
}
#contact-section .description {
    font-size: 2lvw;
}

@media all and (max-aspect-ratio: 1.75) {
    #start-section .description {
        font-size: 1.45lvw;
    }
    #main-section .description {
        font-size: 1.45lvw;
    }
    #contact-section .description {
        font-size: 2.1lvw;
    }
}
@media all and (max-aspect-ratio: 1.5) {
    #start-section .description {
        font-size: 1.6lvw;
    }
    #main-section .description {
        font-size: 1.6lvw;
    }
    #contact-section .description {
        font-size: 2.8lvw;
    }
}
@media all and (max-aspect-ratio: 1.25) {
    #start-section .description {
        font-size: 1.8lvw;
    }
    #main-section .description {
        font-size: 1.8lvw;
    }
    #contact-section .description {
        font-size: 3.2lvw;
    }
}
@media all and (max-aspect-ratio: 1.1) {
    #start-section .description {
        font-size: 1.4lvh;
    }
    #main-section .description {
        font-size: 1.4lvh;
    }
    #contact-section .description {
        font-size: 2.5lvh;
    }

    #start-section .main, #contact-section .main {
        flex-direction: column-reverse;
    }
    #main-section .main {
        flex-direction: column;
    }
    .description {
        margin: 2%;
        width: 90%;
        height: 50%;
    }
    .slideshow-container {
        width: 90%;
        height: 45%;
    }
    .map {
        width: 90%;
        height: 45%;
    }
}