/* More content - index.php "scroll for more" label */

#MoreContent {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;

    padding-bottom: 1.5vh;

    z-index: 5;

    height: 20vh;

    pointer-events: none;
    font-size: clamp(22pt, 4vmax, 35pt);

    display: flex;
    justify-content: center;
    align-items: end;

    background: rgb(0,0,0);
    background: -moz-linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 20%, rgba(0,0,0,0) 100%);
    background: -webkit-linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 20%, rgba(0,0,0,0) 100%);
    background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 20%, rgba(0,0,0,0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000",endColorstr="#000000",GradientType=1); 

    font-family: 'Francois One', sans-serif;
    color: white;
    
    /* For Fade out animation */
    animation-iteration-count: 1;
    animation-duration: 700ms;
    animation-fill-mode: forwards;


}

    @keyframes lookAtMe {
0% {
    animation-timing-function: ease-in;
    opacity: 1;
    transform: translateY(-40px);
}

24% {
    opacity: 1;
}

40% {
    animation-timing-function: ease-in;
    transform: translateY(-18px);
}

65% {
    animation-timing-function: ease-in;
    transform: translateY(-8px);
}

82% {
    animation-timing-function: ease-in;
    transform: translateY(-4px);
}

93% {
    animation-timing-function: ease-in;
    transform: translateY(-2px);
}

25%,
55%,
75%,
87% {
    animation-timing-function: ease-out;
    transform: translateY(0px);
}

100% {
    animation-timing-function: ease-out;
    opacity: 1;
    transform: translateY(0px);
}
}

@keyframes fadeOut {
0% {opacity: 100%;}
100% {opacity: 0%;}
}