@import url('https://fonts.googleapis.com/css2?family=Lora:wght@700&display=swap');
/*
background      hsl: -128, 100%, 13%
back element      hsl: -47, 100%, 40%
near and head      hsl: 35, 98%, 62%
top and copy      hsl: 110, 88%, 80%
call to action      hsl: 61, 90%, 65%
cta text      hsl: 168, 30%, 80%
*/

:root {
  --background: #000944;//"hsl(-128,100%,13%)";
  --back: #cf00a2;//"hsl(-47,100%,40%)";
  --front: #fdb142;//"hsl(35,98%,62%)";
  --top: #aff9a1;//"hsl(110,88%,80%)";
  --cta: #04cd02ff;"hsl(61,90%,65%)";
  --ctaText: #000944;//"hsl(168,30%,80%)";
}
body{
  margin: 0;
  background: white;
    font-family: Roboto, Helvetica, Arial, sans-serif;
}
header{
  background: #222;
}
h1{
  font-family: Gilroy, Roboto, Helvetica, Arial, sans-serif;
  font-weight: 300;
  padding-left: 50px;
}
p{
  font-family: Roboto, Helvetica, Arial, sans-serif;
  font-weight: 300;
  padding-left: 50px;
}
#wdmark{
  vertical-align: middle;
  height: 24px;
  padding: 10px;
  opacity: 50%;
  padding-left: 70px;
}
#wdlogo{
  vertical-align: middle;
  height: 18px;
  opacity: 50%;
  padding-left: 10px;
}
.controls{
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  grid-template-columns: repeat(2, 1fr);
  width: 600px;
  justify-content: center;
  align-items: center;
  text-align: center;
  grid-gap: 2px;
  margin: 5px;
  padding-left: 50px;
}
.button{
  padding: 5px;
  background: lightgray;
}
.button:hover{
  background: #eee;
}

.selected{
  background: #666;
  color: #def;
}
.selected:hover{
  background: #666;
}