:root { --blue: #5b2bf3; --green: #a6c776; --red: rgb(199, 26, 26); } a { color: var(--green); font-variant: all-small-caps; transition: color 1s; } a:hover { color: color(var(--green) shade(20%)); } ::placeholder { opacity: 0.4; transition: opacity 1s; } :focus::placeholder { opacity: 0.2; } .background-pulser { height: 200px; width: 200px; animation-duration: 12s; animation-name: backround-pulsate; background-color: var(--blue); } @keyframes backround-pulsate { from { background-color: var(--red); } to { background-color: var(--blue); } }