/* ---------- login ---------- */

#login_open {
    cursor: pointer;
    border-bottom: unset;
}

#login_open:hover {
    border-bottom: unset;
}

#login_exit {
    cursor: pointer;
    position: absolute;
    top: 1rem;
    right: 1rem;
    font-size: calc(var(--rem) * 1.3);
    border-bottom: unset;
    transition: 0.5s;
}

#login_exit:hover {
    color: var(--light-grey);
    border-bottom: unset;
}

/* ---------- hero ---------- */

.hero {
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    overflow: hidden;
    height: 100vh;
    width: 100%;
}

.hero_title {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color: var(--black);
    background: url('../images/hero_background.jpg'), var(--white);
    background-size: cover;
    background-blend-mode: overlay;
    padding: 4rem;
    height: 75%;
    width: 50%;
}

.hero_title form {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 2rem;
    background: var(--black);
    padding: 2rem;
    width: 100%;
}

.hero_image {
    position: absolute;
    right: 0;
    height: 100%;
    width: 70%;
    z-index: -1;
}

.hero_image img {
    object-fit: cover;
    width: 100%;
}

/* ---------- gallery ---------- */

.gallery {
    width: 100%;
}

.gallery_title {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 20vh;
    width: 100%;
}

.gallery_container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 4rem;
    height: inherit;
    width: 100%;
}

.gallery_item {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    background-size: 100%;
    background-position: center;
    background-color: transparent;
    background-blend-mode: normal;
    height: 80vh;
    width: 60vw;
    transition: background-size 1s ease-in-out, background-color 1s ease-in-out, background-blend-mode 1s ease-in-out;
}

.gallery_item:hover {
    background-size: 110%;
    background-color: var(--grey);
    background-blend-mode: overlay; 
}

.gallery_item_text {
    opacity: 0;
    color: var(--white);
    padding: 8rem 12rem;
    height: 80vh;
    width: 60vw;
    transition: 1s;
}

.gallery_item_text:hover {
    opacity: 1;
}

/* ---------- cards ---------- */

.cards {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
}

.cards a  {
    color: var(--white);
}

.cards_title {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 40vh;
    width: 100%;
}

.cards_container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 2rem;
    background: url('../images/hero_background.jpg'), var(--white);
    background-size: cover;
    background-blend-mode: overlay;
    padding: 4rem;
}

.cards_container_item {
    cursor: pointer;
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    gap: 2rem;
    text-align: center;
    background: var(--black);
    padding: 2rem 2rem 0 2rem;
    height: 100vh;
    min-width: 18rem;
    max-width: 25vw;
}

.cards_container_item img {
    width: 100%;
}

#retouched {
    opacity: 1;
    transition: opacity 0.2s ease;
}

#retouched.fading-out {
    opacity: 0;
  }

/* ---------- transition effects ---------- */

.slide_right {
    animation: slide_right 3s ease forwards;
}

.slide_left {
    animation: slide_left 3s ease forwards;
}

/* ---------- keyframes ---------- */

@keyframes slide_right {
    from {
        transform: translateX(-5rem);
    }
    to {
        transform: translateX(0);
    }
}

@keyframes slide_left {
    from {
        transform: translateX(5rem);
    }
    to {
        transform: translateX(0);
    }
}