html {
    background-color: black;
}

body {
    margin: 0;
}

section {
    width: 100vw;
    height: 100vh;
    position: relative;
}


.NYKRA_Logo {
    height: 65vh;
    max-width: 80vw;

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);

    opacity: .77;

    transition: 400ms;
}

.nlr {
    animation: logoPicR 200ms linear forwards;
}

.NYKRA_Logo-hover {
    animation: logoPic 200ms linear forwards;
}

@keyframes logoPic {
    from {
        height: 65vh;
        max-width: 80vw;
        opacity: .77;
    }
    to {
        height: 70vh;
        max-width: 80vw;
        opacity: 1;
    }
}
@keyframes logoPicR {
    from {
        height: 70vh;
        max-width: 80vw;
        opacity: 1;
    }
    to {
        height: 65vh;
        max-width: 80vw;
        opacity: .77;
    }
}

@keyframes logoPic-m {
    from {
        height: 45vh;
        max-width: 85vw;
        opacity: .77;
    }
    to {
        height: 55vh;
        max-width: 95vw;
        opacity: 1;
    }
}
@keyframes logoPicR-m {
    from {
        height: 55vh;
        max-width: 95vw;
        opacity: 1;
    }
    to {
        height: 45vh;
        max-width: 85vw;
        opacity: .77;
    }
}

.NYKRA_Logo-select {
    filter: blur(77px);
}

.NYKRA_Logo-o {
    height: 65vh;
    max-width: 80vw;

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);

    transition: 200ms;
}

.NYKRA_Logo-o-hover {
    height: 70vh;
    max-width: 80vw;
}


.NYKRA_Logo-op {
    stroke: black;
    stroke-width: 2px;
    opacity: 0;
    cursor: pointer;
}

.NYKRA_TextLogo {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    max-width: 85vw;
    pointer-events: none;
    opacity: 1;
    transition: 400ms;
}

.ntlr {
    animation: logoTxtR 200ms linear forwards;
}

.NYKRA_TextLogo-hover {
    animation: logoTxt 200ms linear forwards;
}

@keyframes logoTxt {
    from { max-width: 85vw; }
    to { max-width: 95vw; }
}
@keyframes logoTxtR {
    from { max-width: 95vw; }
    to { max-width: 85vw; }
}

.NYKRA_TextLogo-select {
    filter: blur(77px);
}

.video-container {
    position: absolute;
    width: 100vw;
    height: 100vh;

    display: none;

    z-index: 1;

}

#video-container-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #000000;
}

.video-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    max-height: 95vh;
}

.player {
    max-height: 95vh;
    pointer-events: none;
}

.PlayButton {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 30%;
    max-height: 30%;

}

.pb-c {
    fill: #ff004077;
    cursor: pointer;
    transition: 150ms;
}

.pb-c:hover {
    fill: #ff0040;
}

.socials-container {
    display: flex;
    flex-flow: row nowrap;

    position: absolute;
    bottom: 1vh;
    left: 1vw;

    transition: 400ms;
}
.socials-container-select {
    filter: blur(7px);
}

.social-link {
    margin-right: 1em;
}

.social-link:hover  .social-icon-p {
    fill: #ff0040
}
.social-link:active  .social-icon {
    transform: scale(.77);
}

.social-link-end {
    margin: 0;
}
.social-icon {
    width: 2vw;

    transition: 77ms;
}


.social-icon-p {
    fill: white;
}


@media only screen and (max-width: 1080px) {
    .socials-container {
        display: flex;
        flex-flow: row nowrap;
    
        position: absolute;
        bottom: 3vh;
        left: 50%;
        transform: translateX(-50%);
    }
    .social-link {
        margin-right: 2em;
    }
    .social-link-end {
        margin: 0;
    }
    .social-icon {
        width: 12vw;
    }

    .NYKRA_Logo {
        height: 45vh;
        max-width: 85vw;
    
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
    }
    
    .NYKRA_Logo-o {
        height: 45vh;
        max-width: 85vw;
    
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
    }

    .NYKRA_Logo-o-hover {
        height: 55vh;
        max-width: 95vw;
    }
    
    .nlr {
        animation: logoPicR-m 200ms linear forwards;
    }

    .NYKRA_Logo-hover {
        animation: logoPic-m 200ms linear forwards;
    }
    
    .video-wrapper {
        width: 100%;
        height: 100%;
    }

    .player {
        width: 100%;
        pointer-events: none;
    }
}

@media only screen and (max-width: 1080px) and (max-height: 777px) and (orientation: landscape) {
    .NYKRA_Logo {
        top: 30%;
    }
    .NYKRA_Logo-o {
        top: 30%;
    }
    .NYKRA_TextLogo {
        top: 30%;
    }
}

.-visible {
    display: block;
}

.-hidden {
    display: none;
}