:root {
font-family: monospace;
font-size: 11px;
box-sizing: border-box;

/* colours */
--white: #eee;
--black: #000;
--black-alt: #111;

--bg: #111;
--color: #eee;
}

*:focus {
outline: none;
}

html, body {
padding: 0;
margin: 0;
background: var(--bg);
color: var(--color);
box-sizing: border-box;
}

main {
display: grid;
height: 100vh;
width: 100vw;
align-items: center;
justify-content: center;
}

section {
padding: 3rem;
margin: 0 auto;
box-sizing: border-box;
text-align: center;
position: relative;
padding: 1px;
background-color: #999;
background-image: linear-gradient(45deg,
  #000, #000 70px, #eee 30%, transparent 60%);
background-size: 400%;
background-position: 100%;
transition: background-position 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

section > a {
border: none;
text-decoration: none;
color: var(--color);
background-color: rgba(17,17,17,1);
display: grid;
align-items: center;
justify-content: center;
width: 225px;
height: 79px;
transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

section:hover, section:focus-within {
background-position: 0;
}

section:hover > a, section:focus-within > a {
background-color: rgba(17,17,17,0.75);
}