body {
    margin: 0px;
    font-family: Arial, sans-serif;
    background: #1b1214;
}

.pink_color {
    color: #FF98A7;
}



/* Dividers */
.divider {
    display: flex;
    justify-content: center;
    align-items: center;

    padding-top: 25px;
    padding-bottom: 25px;
    width: 100%;
}

.divider img {
    width: 80vw;
}

/* Header */
header {
    width: 100%;

    z-index: 100;

    background-color: black;
    background-image: url(resources/banners/chalkboard_black_1920-560.jpg);
}

.header_content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    height: 4rem;
}

.header_left {
    display: flex;
    justify-content: center;
    align-items: center;

    width: 100%;
}

.header_left a {
    text-decoration: none;
    color: #858585;
    transition: 0.5s all;

    padding-left: 2%;
    padding-right: 2%;

    z-index: 11;
}

.header_left a:hover {
    color: white;
}

/* Footer */
footer {
    display: grid;
}

.footer_background_details {
    display: flex;
    padding: 0px;
    grid-column: 1;
    grid-row: 1;

    margin-top: 5vh;
    height: 50vh;
    min-height: 400px;
    width: 100%;
}

.footer_background {
    grid-column: 1;
    grid-row: 1;

    height: inherit;
    width: 100%;

    background-image: url(resources/banners/chalkboard_black_1920-560.jpg);
    background-size: cover;
    mask-image: linear-gradient(to top, black 50%, transparent 100%);
    background-position: center;

    z-index: -1;
}


.footer_background-left {
    width: 35%;


    /* Top left blossom */

    /* mask-image: linear-gradient(to top, black 0%, transparent 100%);
    background-image: url(resources/banners/cherry-blossom_top-left_600-400.png);
    background-position: top;
    background-repeat: no-repeat;
    background-size: 100%; */
}

.footer_background-right {
    width: 35%;

    mask-image: linear-gradient(to top, black 50%, transparent 100%);
    background-image: url(resources/banners/cherry-blossom_bottom-right_600-400.png);
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: 100%;

    filter: brightness(60%);
}

.footer_background-middle {
    width: 30%;

    color: rgb(204, 204, 204);
    /* Muted white */
}

.footer_background-middle p {
    text-align: center;
    padding-top: 1%;
    padding-left: 2%;
    padding-right: 2%;
}

.footer_background-middle form {
    display: flex;
    flex-direction: column;
}

.footer_background-middle form label {
    margin-bottom: 0.5rem;
}

.footer_background-middle form input {
    height: 2.5rem;
    border-radius: 0px;

    margin-bottom: 0.5rem;

    background-color: rgb(31, 30, 30);
    color: white;
    border: .1rem solid white;
}

.footer_background-middle form input:hover {
    height: 2.1rem;
    border-radius: 0px;

    margin-bottom: 0.5rem;

    background-color: rgb(31, 30, 30);
    color: white;
    border: .25rem solid white;
}

.footer_background-middle form input:focus {
    outline: none;
}

.footer_background-middle form button {
    height: 2.5rem;
    border-radius: 0px;
    outline: none;
    border: none;
}

.footer_background-middle form button:hover {
    background-color: rgb(185, 185, 185);
}


.footer_bottom {
    display: flex;
    align-items: center;
    flex-direction: column;
}

.footer_bottom span {
    margin-bottom: 1rem;
}

.footer_bottom a {
    text-decoration: none;
}

.copyright {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
    font-size: small;
}


/* Index */

.index_hero_background {
    display: flex;
    height: 100vh;
    width: 100%;

    background-image: url(resources/banners/hero-page_gore_1903_749.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
    background-position: top center;

    filter: grayscale(100%) brightness(70%);
    overflow: hidden;
}

.index_hero_background video {
    position: relative;
    left: -25%;
    z-index: 0;
}

.index_hero {
    position: absolute;
    top: 0;
    left: 0;

    height: 100vh;
    width: 100%;
}

.index_hero_logo {
    display: flex;
    align-items: flex-end;
    justify-content: center;

    width: 100%;
    height: 100%;
}

.index_hero_logo img {
    width: 60vw;
    height: max-content;
    margin-bottom: 2%;
}


/* Releases */

.index_releases_background {
    height: 150vh;
    width: 100%;

    background-image: url(resources/banners/cherry-petals_background_1903-1240.png);
    background-repeat: no-repeat;
    background-size: cover;

    mask: linear-gradient(to top, rgb(0, 0, 0) 50%, transparent 100%)top,
        linear-gradient(to bottom, rgb(0, 0, 0) 50%, transparent 100%)bottom;

    mask-size: 100% 51%;
    mask-repeat: no-repeat;

    background-position-x: left;
    background-position-y: bottom;
}

.index_releases {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;


    position: absolute;
    top: 100vh;
    left: 0;

    height: 150vh;
    width: 100%;
    background-image: none;
}

.index_releases_video {
    height: 60vh;
    width: 50vw;
}

.index_releases_video iframe {
    height: 100%;
    width: 100%;
    transition: .5s all;

    border-radius: 1rem;
}

.index_releases_video iframe:hover {
    scale: 110%;
}






/* Contact */

.contact_title {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color: white;
    background-image: url(resources/banners/chalkboard_black_1920-560.jpg);
    mask: linear-gradient(to bottom, rgb(0, 0, 0) 50%, transparent 100%);
}

.contact_title h2 {
    margin-bottom: 0px;
    margin-top: 2%;
    font-size: xx-large;
}

.contact_information {
    display: flex;
    justify-content: space-evenly;
    text-align: center;

    height: 60vh;
    width: 100%;

    z-index: 11;
    color: white;

    position: absolute;
    top: 30vh;
}

.contact_information a {
    color: white;
    text-decoration: none;
}

.contact_information_tab div {
    margin: 5%;
}

.contact_information_background {
    mask: linear-gradient(to top, rgb(0, 0, 0) 50%, transparent 100%)top,
        linear-gradient(to bottom, rgb(0, 0, 0) 50%, transparent 100%)bottom;

    mask-size: 100% 51%;
    mask-repeat: no-repeat;

    height: 60vh;
    background-image: url(resources/banners/cherry-petals_background_1903-1240.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position-x: left;
    background-position-y: bottom;
    z-index: 1;
}

@media only screen and (orientation: portrait)
/* Mobile */
{
    /* Main page */
    .index_hero {
        height: 70vh;
    }

    .index_hero_background video {
        width: 0;
    }

    .index_hero_background {
        height: 40vh;
        background-position-x: 51%;
    }

    .index_hero_logo {
        height: 60%;
    }

    .index_releases {
        top: 40vh;
        height: 55vh;
    }

    .index_releases_background {
        height: 50vh;
    }

    .index_releases_video {
        height: 20vh;
        width: 80vw;
    }

    /* footer */
    .footer_background-middle {
        width: 70%;
    }

    .footer_background-left {
        width: 15%;
    }

    .footer_background-right {
        width: 15%;
    }

    /* contact page */
    .contact_information {
        flex-direction: column;
        height: 80vh;
        top: 20vh;
    }

    .contact_information_background {
        height: 80vh;
    }
}