body {
    background-color: rgb(255, 255, 255);
}

h1{
    color: goldenrod;
}


.dos{
    background-color: black;
    color: aliceblue;
    width:50%;
    transition: 2s;
}

#uno{
    background-color: aqua;
    color: black;
    width: 50%;
}

h1:nth-of-type(4) {
    text-decoration: underline;
}
    /*el transition sirve para que aparezca y aparezca en el periodo de tiempo que tu eligas, como en el ejemplo 2s. */

h1:hover{
    background-color: red;
    transition: 2s; 
}

h1:active{
    background-color: yellow;
}

    /* Debes de poner el active detrás porque si no al ser secuencial no realizará su función.*/

/*p{
    font-family: pacifico;
    font-size: 2vw;
}* para que se ajuste a las pantallas aunque nosotros usaremos el em */

p{
    font-family: pacifico;
    font-size: 2em;
    transition: 2s;
    font-weight: bolder;
    font-style: oblique;
    text-decoration: underline overline 5px dashed blue;
    letter-spacing: 12px;
    text-indent: 3%;
}
p:hover{
    background-color: rgba(255, 0, 0, 0.25);
    transition: 2s; 
    opacity: 100%;
}

p:active{
    background-color: yellow;
}