@keyframes extensionHeader {
    0% {
        opacity: 0;
        margin-top: -32%;
        margin-left: 39.3%;
    }

    100% {
        opacity: 1;
        margin-top: 2px;
        margin-left: 39.3%;
    }
}

@keyframes insertionHeader {
    0% {
        opacity: 1;
        margin-top: 2px;
        margin-left: 39.3%;
    }

    10% {
        margin-top: 22px;
        margin-left: 39.3%;
    }

    100% {
        opacity: 0;
        margin-top: -32%;
        margin-left: 39.3%;
    }
}

@media (min-width: 300px) and (max-width: 500px) {
    @keyframes extensionHeader {
        0% {
            opacity: 0;
            margin-top: -32%;
            margin-left: 5%;
        }
    
        100% {
            opacity: 1;
            margin-top: 2px;
            margin-left: 5%;
        }
    }
    
    @keyframes insertionHeader {
        0% {
            opacity: 1;
            margin-top: 2px;
            margin-left: 5%;
        }
    
        10% {
            margin-top: 22px;
            margin-left: 5%;
        }
    
        100% {
            opacity: 0;
            margin-top: -32%;
            margin-left: 5%;
        }
    }
}

@media (min-width: 500px) and (max-width: 800px) {
    @keyframes extensionHeader {
        0% {
            opacity: 0;
            margin-top: -32%;
            margin-left: 16%;
        }
    
        100% {
            opacity: 1;
            margin-top: 2px;
            margin-left: 16%;
        }
    }
    
    @keyframes insertionHeader {
        0% {
            opacity: 1;
            margin-top: 2px;
            margin-left: 16%;
        }
    
        10% {
            margin-top: 22px;
            margin-left: 16%;
        }
    
        100% {
            opacity: 0;
            margin-top: -32%;
            margin-left: 16%;
        }
    }
}