$/*$ These are CSS Variables. If you want to change the color scheme, try a different hue between $0$ and $270.$ The colors in the CSS will automatically update. $*/$

:root $\{$

$--$hue: $20$;

$--$choice$-$hue: $80$;

$\}$

body $\{$

color: hsl$($var$(--$hue$),85\%,10\%)$;

display: flex;

flex$-$direction: column;

align$-$items: center;

font$-$family: Georgia, serif;

$\}$

h$1,$

h$2\{$

color: hsl$($var$(--$hue$),85\%,40\%)$;

font$-$family: Futura, Helvetica, sans$-$serif;

margin$-$top: $4$rem;

text$-$transform: uppercase;

$\}$

button $\{$

background$-$color: hsl$($var$(--$hue$),80\%,50\%)$;

border: none;

box$-$shadow: $03$px $6$px rgba$(0,0,0,0\mathrm{.}15),02$px $4$px rgba$(0,0,0,0\mathrm{.}12)$;

color: white;

cursor: pointer;

display: inline$-$block;

font$-$family: Futura, Helvetica, sans$-$serif;

font$-$size: $1$em;

font$-$weight: $700$;

padding: $20$px;

text$-$transform: uppercase;

$\}$

button:hover $\{$

background$-$color: hsl$($var$(--$hue$),80\%,53\%)$;

$\}$

ul $\{$

margin$-$top: $0$;

padding: $0$;

$\}$

ul li $\{$

background$-$color: hsl$($var$(--$hue$),80\%,90\%)$;

list$-$style: none;

margin: $8$px;

padding: $12$px $20$px;

text$-$align: center;

$\}$

$.$choice $\{$

background$-$color: hsl$($var$(--$choice$-$hue$),80\%,90\%)$;

color: hsl$($var$(--$choice$-$hue$),80\%,20\%)$;

position: relative;

$\}$

$.$choice:before $\{$

content: $""$;

position: absolute;

left: $-17$px;

top: $3$px;

font$-$size: $32$px;

$\}$

a $\{$

color: hsl$($var$(--$hue$),80\%,48\%)$;

border$-$bottom: $1$px solid var$(--$pink$-10)$;

box$-$shadow: hsl$($var$(--$hue$),80\%,90\%)0-2$px $00$ inset;

text$-$decoration: none;

$\}$

a:hover $\{$

background$-$color: hsl$($var$(--$hue$),80\%,92\%)$;

color: hsl$($var$(--$hue$),80\%,50\%)$;

text$-$decoration: none;

$\}$

$.$highlighted$\{$

background$-$color: hsl$($var$(--$hue $,),80\%,53\%)$;

color: hsl$($var$(--$hue $,),80\%,53\%)$;

text$-$decoration: none;

$\}$