/* ------- Main styles for home ------- */

/* Space from the main picture to the top edge */
main.home{
    font-size: 1.6vw;
}

/* Underline width */
.borderWidth{
    width: 80%;
}

/* Center the underline in the items */
.itemBorderCenter{
    width: 50%;
    margin-left: 25%;
}

/* Space from the text to the page edges */
.center{
    padding-left: 15%;
    padding-right: 15%;
    color: white;
}

.distanceTop{
    padding-top: 80vh;
}

.distancebottom{
    padding-bottom: 80vh;
}

.spacer, .spacer2 {
    height: 92vh;
}

/* Space between the sections */
section.center {
    margin-bottom: 45px;
}

/* Design home parents container */
.parentsHome {
    display: grid;
    position: relative;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
    margin: 20px 15px;
}

/* Design home items container */
.itemHome{
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    margin: auto;
    width: 100%;
    height: 100%;
}

.cardImage{
    width: 100%;
}

/* Design home items text */
.itemTextHome{
    padding: 10px;
    height: 30%;
    margin: auto;
    text-align: center;
    color: white;
}

/* Background images */
.home {
    position: relative;
}

.home .background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    opacity: var(--background-opacity, 1);
    transition: opacity 1s ease;
}

.home .background1 {
    background-image: url('../images/DSCF8391.JPG');
}

.home .background2 {
    background-image: url('../images/DSCF8399.JPG');
    opacity: 0;
    pointer-events: none;
}

.home .background3 {
    background-image: url('../images/DSCF8372.JPG');
    opacity: 0;
    pointer-events: none;
}

.home.scrolled .background1 {
    opacity: 0;
    pointer-events: none;
}

.home.scrolled-a .background2 {
    opacity: 1;
    pointer-events: auto;
}

.home.scrolled .background3 {
    opacity: 1;
    pointer-events: auto;
}

.center {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 2s, transform 3s;
}

.center-visible {
    opacity: 1;
    transform: translateY(0);
}

.parentsHome {
    opacity: 0;
    transition: opacity 2s ease;
}

.parentsHome.center-visible {
    opacity: 1;
}