* {
    margin     : 0;
    padding    : 0;
    font-family: sans-serif;
}

body {
    min-height     : 80vh;  /* 100vh */
    display        : flex;
    justify-content: center;
    align-items    : center;
    flex-direction : column;
    /* text-transform : uppercase; */
    background     : #15334e;
}

h1 {
    color          : #fff;
    animation      : enterAnimation 2s ease-in-out forwards;
    animation-delay: 1s;
    /* initial state */
    opacity        : 0.1;
    letter-spacing : 7px;
    font-size      : 4.5em;
    line-height    : 1.2em;  /* 1.5em */
    text-align     : center;
}

h1 #ppalabra{
    color          : #FF0000;
}

h1 #spalabra{
    color          : #008000;
}

@keyframes enterAnimation {
    50% {
        letter-spacing: 20px;
        font-size     : 4.6em;
    }

    100% {
        letter-spacing: 7px;
        opacity       : 1;
        font-size     : 4.5em;
    }
}

h2 {
    /* color         : #ff6347; */
    color         : #fff;
    letter-spacing: 7px;
    font-size     : 4em;
    height         : 0;
    overflow       : hidden;
    animation      : pillsAnimation 1s forwards;
    animation-delay: 3s;
}

h6 {
    /* color         : #ff6347; */
    color         : #fff;
    letter-spacing: 5px;  /* 7px */
    /* font-size     : 4em; */
    height         : 0;
    overflow       : hidden;
    animation      : pillsAnimation 1s forwards;
    animation-delay: 3s;
}

#btn1 {
    background-color: #f10606;
    color: white;
    padding: 15px 25px;
}

#btn2 {
    background-color: #199319;
    color: white;
    padding: 15px 25px;
}

@keyframes pillsAnimation {
    100% {
        height: 80px;
    }
}