@import url(//fonts.googleapis.com/css?family=Cabin);
:root {
    --size: 1.2vw;
    --color: rgb(28, 22, 46);
}
*
{
    margin: 0;
    padding: 0;
}

body {
    font-family: Cabin, sans-serif;
    background: rgb(247, 245, 245);
}

.hidden {
    width: 0;
    overflow: hidden;
    white-space: nowrap;
    max-width: max-content;
    margin: 0; 
    padding: 0 0 .5mm 0;
    border-right: 5px solid white;
    transition: all 1s;
}
.show 
{
    animation: typewriter 1.5s steps(40, end) 2s both 1, cursor .5s step-end .5s infinite;
}


.spans
{
    opacity: 0;
    transition: all 1s;
}
.showspan
{
    opacity: 1;
}

#pack p 
{
    animation: climb .3s steps(20, end) 2s both 1;
}

@keyframes cursor {
    from, to {
        border-color:rgba(255, 255, 255, 0.036) ;
    }
    50% {
        border-color: rgba(255, 255, 255, 0.836);
    }
}

@keyframes typewriter {
    0% {width: 0;}
    100% {width: 100%}
}


@keyframes fall {
    from {
        margin-left: -50%;
        opacity: 0;
    }
    to {
        opacity: 1;
        margin-left: 0%;
    }
}


@keyframes climb {
    from {
        padding-top: 5%;
        opacity: 0;
    }
    to {
        opacity: 1;
        padding-top: 2%;
    }
}