footer {
    background-color: var(--bigeye-bg-color);
    height: 100vh;
    position: relative;
    color: var(--bigeye-color);
}

.footer-backgound-video-container {
    position: absolute;
    left: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    pointer-events: none;
}

.footer-background-video {
    padding: 100px 50px;
    height: 100%;
    width: 100%;
    object-fit: cover;
    z-index: 4;
    mix-blend-mode:exclusion;
}

.footer-row {
    height: 100vh;
    z-index: 3;
}



.footer-container {}

.footer-title-container {
    display: flex;
    align-items: center;
    flex-direction: column;
}

.footer-title.first {
    font-family: 'Arges', 'sans-serif';
    font-size: calc(var(--backMonth-fontSize) / 1.3);
    font-variation-settings:
        'wght' 900,
        'wdth' var(--backMonth-width),
        'slnt' var(--backMonth-slant);
    text-transform: uppercase;
    transform: translateY(45%) translateX(-50%);
}

.footer-title.last {
    font-family: 'Arges', 'sans-serif';
    font-size: var(--backMonth-fontSize);
    color: var(--bigeye-color);
    text-transform: uppercase;
    font-variation-settings:
        'wght' var(--backMonth-weight),
        'wdth' var(--backMonth-width),
        'slnt' var(--backMonth-slant);
    z-index: 1 !important;
}

.fly-text {
    font-family: 'DmMono', 'mono-space';
    font-size: var(--text-info-fontSize);
    text-decoration: none;
    text-transform: uppercase;
    transition: font-size 0.2s;
    position: absolute;
    transform: translate(-50%, -50%);
    mix-blend-mode: difference;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
}

.fly-text.first {
    margin-left: -120px;
    margin-top: -50px;
}

.fly-text.last {
    margin-top: 50px;
    margin-left: 100px;
}

.footer-link-container {
    margin-left: 30%;
    position: relative;
    z-index: 12;

}

.footer-link-container a {
    font-family: 'DmMono', 'mono-space';
    font-size: calc(var(--text-info-fontSize) * 1.2);
    text-decoration: none;
    text-transform: uppercase;
    transition: font-size 0.2s;
    color: var(--bigeye-color);
    margin-top: -20px;
    mix-blend-mode: exclusion;

}

/* pc */
@media only screen and (min-width:960px) {

    .footer-background-video {
        padding: 100px 150px;
    }
    .footer-title.first {
        font-size: calc(var(--backMonth-fontSize) / 1.3 * 1.5);

    }

    .footer-title.last {
        font-size: calc(var(--backMonth-fontSize) * 1.5);

    }

    .fly-text.first {
        margin-left: calc(-160px * 1.5);
        margin-top: calc(-50px * 1.5);
    }

    .fly-text.last {
        margin-top: calc(50px * 1.5);
        margin-left: calc(200px * 1.5);
    }

}