.navbarHolder{
    display: flex;
    position: fixed;
    top: 0;
    width: 100%;
    height: 50px;
    z-index: 99;
    animation: 5s navbarToTop ease-in-out;
    -webkit-animation: 5s navbarToTop ease-in-out;
}
.fadeInOverlay{
    display: none;
    position: fixed;
    pointer-events: none;
    left: 0;
    top:0;
    height: 100%;
    width: 100%;
    background: var(--1color60);
    opacity: 0;
    z-index: 980;
    animation: 2s fadeOut;
    -webkit-animation: 2s fadeOut;
}
.titleHolder{
display: flex;
position: fixed;
flex-direction: column;
width: 100%;
height: 50px;
justify-content: center;
align-items: normal;
align-content: normal;
animation:5s titleToNav ease-in-out;
-webkit-animation:5s titleToNav ease-in-out;
overflow: hidden;
background-color: black;
z-index: 89;
}
.titleImagePlacement{
display: block;
transform: translateY(calc(50% - 25px));
animation: 5s translateCorrection ease-in-out;
-webkit-animation: 5s translateCorrection ease-in-out;
}
.titleImageClip{
width: 100%;
height: 100px;
margin-top: -50px;
margin-bottom: -50px;
background-color: black;
z-index: 5;
animation:5s introClipping ease-in-out;
-webkit-animation:5s introClipping ease-in-out;
}




@keyframes introClipping{
from{
transform: scaleY(0);
}
50%{
transform: scaleY(1);
}
65%{
transform: scaleY(1);
}
100%{
transform: scaleY(0);
}
}

@-webkit-@keyframes introClipping{
    from{
    transform: scaleY(0);
    }
    50%{
    transform: scaleY(1);
    }
    65%{
    transform: scaleY(1);
    }
    100%{
    transform: scaleY(0);
    }
    }

@keyframes titleToNav{
from{
height: 100%;
}
65%{
height: 100%;
}
to{
height: 50px;
}
}

@-webkit-@keyframes titleToNav{
    from{
    height: 100%;
    }
    65%{
    height: 100%;
    }
    to{
    height: 50px;
    }
    }

@keyframes translateCorrection{
from{
transform: translateY(0)
}
65%{
transform: translateY(0)
}
100%{
transform: translateY(calc(50% - 25px))
}
}

@-webkit-@keyframes translateCorrection{
    from{
    transform: translateY(0)
    }
    65%{
    transform: translateY(0)
    }
    100%{
    transform: translateY(calc(50% - 25px))
    }
    }

@keyframes fadeOut{
from{
opacity: 1;
}
to{
    opacity: 0;
}
}

@-webkit-@keyframes fadeOut{
    from{
    opacity: 1;
    }
    to{
        opacity: 0;
    }
    }

@keyframes navbarToTop{
from{
top: calc(50% - 25px)
}
65%{
top: calc(50% - 25px);
}
100%{
top: 0;
}
} 

@-webkit-@keyframes navbarToTop{
    from{
    top: calc(50% - 25px)
    }
    65%{
    top: calc(50% - 25px);
    }
    100%{
    top: 0;
    }
    }