/*#SVGRepo_iconCarrier:hover,*/
.logotype:hover svg rect,
.logotype:hover span,
.logotype:hover {
    fill: #ea3943;
    color: #ea3943;
}

.hero {
    background: url(../img/background.svg);
    background-size: cover;
}

:root {
    --font-header: 'Nova Mono', monospace;
    --font-text: 'Open Sans', sans-serif;
    --color-theme: #F1EEDB;
    --color-bg: #282B24 !important;

    --animation-sentence: 'You know you\'re supposed to leave, right?';
    --animation-duration: 40s;
}

.container {
    text-align: center;
    margin: 1rem 0.5rem 0;
}

.container h1 {
    font-family: var(--font-header);
    font-size: calc(4rem + 2vw);
    text-transform: uppercase;
}

.container p {
    text-transform: uppercase;
    letter-spacing: 0.2rem;
    font-size: 2rem;
    margin: 1.5rem 0 3rem;
}

.ghost {
    position: absolute;
    bottom: 5px;
    left: calc(50% - 10.5px);
    /*- 100px);*/
    width: 200px;
    height: 200px;
    /* have the ghost move to the right and to the left of the screen, turning to its central position and repeating the animation twice */
    animation: hoverGhost calc(var(--animation-duration) / 2) ease-in-out 2;

}

@media only screen and (max-width: 768px) {
    .ghost {
        left: calc(50% - 75px);
    }
}

.ghost:before {
    content: var(--animation-sentence);
    color: var(--color-theme);
    border-radius: 50%;
    position: absolute;
    bottom: 100%;
    text-align: center;
    line-height: 2;
    padding: 1rem;
    visibility: hidden;
    opacity: 0;
    animation: showText calc(var(--animation-duration) / 8) calc(var(--animation-duration) * 3 / 16) ease-out forwards,
    showNewText calc(var(--animation-duration) / 8) calc(var(--animation-duration) * 27 / 40) ease-out forwards,
    showFinalText calc(var(--animation-duration) / 8) var(--animation-duration) ease-out forwards;

}

@keyframes hoverGhost {
    25% {
        transform: translateX(20vw);
    }
    75% {
        transform: translateX(-20vw);
    }
}

@keyframes showKey {
    to {
        opacity: 1;
        visibility: visible;
    }
}

/* alter the text changing the value of the custom property, weary of changing its value when the pseudo element is hidden and changing its value in the last keyframe (as the animation gives this value as per the "forwards" value of the fill-mode property)  */
@keyframes showText {
    2% {
        opacity: 1;
        visibility: visible;
    }
    98% {

        opacity: 1;
        visibility: visible;
    }
    99% {
        --animation-sentence: 'You know you\'re supposed to leave, right?';
        opacity: 0;
        visibility: hidden;
    }
    100% {
        --animation-sentence: 'So much to do, so little time...';
    }
}

@keyframes showNewText {
    2% {
        --animation-sentence: 'So much to do, so little time...';
        opacity: 1;
        visibility: visible;
    }
    98% {

        opacity: 1;
        visibility: visible;
    }
    99% {
        --animation-sentence: 'So much to do, so little time...';
        opacity: 0;
        visibility: hidden;
    }
    100% {
        --animation-sentence: 'Okay, you seem to care about this. So, let\'s care it together :)';
    }
}

@keyframes showFinalText {
    2% {
        opacity: 1;
        visibility: visible;
    }
    98% {
        opacity: 1;
        visibility: visible;
    }
    100% {
        opacity: 0;
        visibility: hidden;
    }
}