.icon {
    background-size: contain;
}

.icon-down {
    background-image: url('../img/arrow-down.svg');
}

.icon-up-right {
    background-image: url('../img/up-right.svg');
}

.photo {
    background-image: url('../img/photo.jpg');
    mix-blend-mode: luminosity;
    cursor: crosshair;
}

.photo:hover {
    mix-blend-mode: normal;
}

.hero {
    min-height: 620px;
    max-height: 1920px;
}

.work-item {
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.25));
    transition: background-size .25s ease;
    background-size: 0%;
    background-repeat: no-repeat;
    background-position: bottom right;
}

.work-item:hover,
.work-item:focus {
    background-size: 100%;
}

.hover-o {
    transition: opacity .15s;
}

.hover-o:hover {
    /* animation: opacity .95s; */
    opacity: 0.75;
}

.leading-13 {
    line-height: 1.3;
}

.hamburger {
    width: 24px;
    height: 8px;
    position: relative;
}

.hamburger span {
    display: block;
    position: absolute;
    height: 1px;
    width: 100%;
    opacity: 1;
    left: 0;
    transform: rotate(0deg);
    transition: .25s ease-in-out;
    transform-origin: left center;
}

.hamburger span:nth-child(1) {
    top: 0px;
}

.hamburger span:nth-child(2) {
    top: 8px;
}

.menu-open .hamburger span:nth-child(1) {
    transform: rotate(45deg);
    top: -1px;
    left: 4px;
    width: 16px;
}

.menu-open .hamburger span:nth-child(2) {
    transform: rotate(-45deg);
    top: 10px;
    left: 4px;
    width: 16px;
}

.max-width {
    max-width: 1440px;
    margin: auto;
}

@media (max-width: 640px) {

    body.menu-open {
        /* overflow: hidden */
    }

    #main-content {
        transition: all .25s ease;
    }

    .menu-open #main-content {
        opacity: 0;
        visibility: hidden;
    }

    .menu-list {
        opacity: 0;
        transition: opacity .25s;
        transition-delay: .25s;
    }

    .menu-open .menu-list {
        visibility: visible;
        opacity: 1;
    }

}

@media (min-height: 800px) {

    .leading-hero {
        line-height: calc(1.5em + 1vh);
    }

}

#gradient-canvas {
    width: 100vw;
    height: 100vh;
    position: fixed;
    --gradient-color-1: #1a1a2e;
    --gradient-color-2: #16213e;
    --gradient-color-3: #0f3460;
    --gradient-color-4: #e94560;
}