#index-main {
    position: absolute;
    width: 100%;
    height: calc(100% - 70px);
}

#p1 {
    background-color: blue;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    text-align: center;
    color: white;
    font-size: 70px;
}

#p1-4 {
    color: yellow;
    font-weight: bold;
}

@media screen and (min-width: 650px) {
    #p1-typing {
        color: white;
        white-space: nowrap;
        overflow: hidden;
        font-size: 70px;
        border-right: .1em solid white;
        animation: typing 1.8s steps(9, end) forwards, blink-caret 0.8s step-end 5 forwards;
    }
}

@media screen and (max-width: 650px) {
    #p1-1, #p1-3, #p1-4 {
        display: block;
        transform: translateY(100vh);
    }

    #p1-1 {
        animation: float-up 1s forwards;
    }

    #p1-3 {
        animation: float-up 1s 1s forwards;
    }

    #p1-4 {
        animation: float-up 1s 2s forwards, fontsize-increase .5s 2.5s forwards;
    }

    #p1-2, #p1-5 {
        display: none;
    }
}

@keyframes typing {
    from { width: 0; }
    to { width: 630px }
}

@keyframes blink-caret {
    from, to { border-color: transparent; }
    50% { border-color: white; }
}

@keyframes float-up {
    0% { transform: translateY(100vh); }
    100% { transform: translateY(0px); }
}

@keyframes fontsize-increase {
    0% { font-size: 70px; }
    100% { font-size: 100px; }
}