body{

    font-size: 4vw;
    padding: 1vw;
    background: #000;
    color: #fff;

    transition: background 1s, color 1s;
}

body:hover{

    background: lightgrey;
    color: #000;
}

div{
    
    display: inline-block;

}

h1{

    font-size: 3vw;
    margin-bottom: 4vw;
}

.button:hover{

    cursor: pointer;
}

#button-yellow{
    
    background: yellow;
}

#button-magenta{
    
    background: magenta;
}


#button-lime{
    
    background: lime;
}

.yellow,
.magenta,
.lime{

    color: transparent;
}

.yellow{

    background: yellow;
}

.magenta{

    background: magenta;
}

.lime{

    background: lime;
}

#button-yellow:hover ~ p .yellow,
#button-magenta:hover ~ p .magenta,
#button-lime:hover ~ p .lime{
    
    color: black;

    transition:  color 1s;

}