* {
   box-sizing: border-box;
}

body {
   margin: 0;
   /* font-family: 'Crimson Text', serif; */
   font-family: 'Sunflower', sans-serif;
   --color-black: #080A0C;
   --color-beige: #d8c99b;
   --color-green: #68a691;
   --color-green-light: #a5cabe;
   --color-pink: #ca6680;
   --color-pink-light: #db95a7;
   background-color: var(--color-black);
   /* Background from SVGBackgrounds.com */
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2000 1500'%3E%3Cdefs%3E%3Crect stroke='%23080A0C' stroke-width='0.5' width='1' height='1' id='s'/%3E%3Cpattern id='a' width='3' height='3' patternUnits='userSpaceOnUse' patternTransform='scale(18.25) translate(-945.21 -708.9)'%3E%3Cuse fill='%23252526' href='%23s' y='2'/%3E%3Cuse fill='%23252526' href='%23s' x='1' y='2'/%3E%3Cuse fill='%23343434' href='%23s' x='2' y='2'/%3E%3Cuse fill='%23343434' href='%23s'/%3E%3Cuse fill='%233f3f40' href='%23s' x='2'/%3E%3Cuse fill='%233f3f40' href='%23s' x='1' y='1'/%3E%3C/pattern%3E%3Cpattern id='b' width='7' height='11' patternUnits='userSpaceOnUse' patternTransform='scale(18.25) translate(-945.21 -708.9)'%3E%3Cg fill='%23494949'%3E%3Cuse href='%23s'/%3E%3Cuse href='%23s' y='5' /%3E%3Cuse href='%23s' x='1' y='10'/%3E%3Cuse href='%23s' x='2' y='1'/%3E%3Cuse href='%23s' x='2' y='4'/%3E%3Cuse href='%23s' x='3' y='8'/%3E%3Cuse href='%23s' x='4' y='3'/%3E%3Cuse href='%23s' x='4' y='7'/%3E%3Cuse href='%23s' x='5' y='2'/%3E%3Cuse href='%23s' x='5' y='6'/%3E%3Cuse href='%23s' x='6' y='9'/%3E%3C/g%3E%3C/pattern%3E%3Cpattern id='h' width='5' height='13' patternUnits='userSpaceOnUse' patternTransform='scale(18.25) translate(-945.21 -708.9)'%3E%3Cg fill='%23494949'%3E%3Cuse href='%23s' y='5'/%3E%3Cuse href='%23s' y='8'/%3E%3Cuse href='%23s' x='1' y='1'/%3E%3Cuse href='%23s' x='1' y='9'/%3E%3Cuse href='%23s' x='1' y='12'/%3E%3Cuse href='%23s' x='2'/%3E%3Cuse href='%23s' x='2' y='4'/%3E%3Cuse href='%23s' x='3' y='2'/%3E%3Cuse href='%23s' x='3' y='6'/%3E%3Cuse href='%23s' x='3' y='11'/%3E%3Cuse href='%23s' x='4' y='3'/%3E%3Cuse href='%23s' x='4' y='7'/%3E%3Cuse href='%23s' x='4' y='10'/%3E%3C/g%3E%3C/pattern%3E%3Cpattern id='c' width='17' height='13' patternUnits='userSpaceOnUse' patternTransform='scale(18.25) translate(-945.21 -708.9)'%3E%3Cg fill='%23515151'%3E%3Cuse href='%23s' y='11'/%3E%3Cuse href='%23s' x='2' y='9'/%3E%3Cuse href='%23s' x='5' y='12'/%3E%3Cuse href='%23s' x='9' y='4'/%3E%3Cuse href='%23s' x='12' y='1'/%3E%3Cuse href='%23s' x='16' y='6'/%3E%3C/g%3E%3C/pattern%3E%3Cpattern id='d' width='19' height='17' patternUnits='userSpaceOnUse' patternTransform='scale(18.25) translate(-945.21 -708.9)'%3E%3Cg fill='%23080A0C'%3E%3Cuse href='%23s' y='9'/%3E%3Cuse href='%23s' x='16' y='5'/%3E%3Cuse href='%23s' x='14' y='2'/%3E%3Cuse href='%23s' x='11' y='11'/%3E%3Cuse href='%23s' x='6' y='14'/%3E%3C/g%3E%3Cg fill='%23595959'%3E%3Cuse href='%23s' x='3' y='13'/%3E%3Cuse href='%23s' x='9' y='7'/%3E%3Cuse href='%23s' x='13' y='10'/%3E%3Cuse href='%23s' x='15' y='4'/%3E%3Cuse href='%23s' x='18' y='1'/%3E%3C/g%3E%3C/pattern%3E%3Cpattern id='e' width='47' height='53' patternUnits='userSpaceOnUse' patternTransform='scale(18.25) translate(-945.21 -708.9)'%3E%3Cg fill='%23CA6680'%3E%3Cuse href='%23s' x='2' y='5'/%3E%3Cuse href='%23s' x='16' y='38'/%3E%3Cuse href='%23s' x='46' y='42'/%3E%3Cuse href='%23s' x='29' y='20'/%3E%3C/g%3E%3C/pattern%3E%3Cpattern id='f' width='59' height='71' patternUnits='userSpaceOnUse' patternTransform='scale(18.25) translate(-945.21 -708.9)'%3E%3Cg fill='%23CA6680'%3E%3Cuse href='%23s' x='33' y='13'/%3E%3Cuse href='%23s' x='27' y='54'/%3E%3Cuse href='%23s' x='55' y='55'/%3E%3C/g%3E%3C/pattern%3E%3Cpattern id='g' width='139' height='97' patternUnits='userSpaceOnUse' patternTransform='scale(18.25) translate(-945.21 -708.9)'%3E%3Cg fill='%23CA6680'%3E%3Cuse href='%23s' x='11' y='8'/%3E%3Cuse href='%23s' x='51' y='13'/%3E%3Cuse href='%23s' x='17' y='73'/%3E%3Cuse href='%23s' x='99' y='57'/%3E%3C/g%3E%3C/pattern%3E%3C/defs%3E%3Crect fill='url(%23a)' width='100%25' height='100%25'/%3E%3Crect fill='url(%23b)' width='100%25' height='100%25'/%3E%3Crect fill='url(%23h)' width='100%25' height='100%25'/%3E%3Crect fill='url(%23c)' width='100%25' height='100%25'/%3E%3Crect fill='url(%23d)' width='100%25' height='100%25'/%3E%3Crect fill='url(%23e)' width='100%25' height='100%25'/%3E%3Crect fill='url(%23f)' width='100%25' height='100%25'/%3E%3Crect fill='url(%23g)' width='100%25' height='100%25'/%3E%3C/svg%3E");
   background-attachment: fixed;
   background-size: cover;
}

h1,
h2 {
   margin: 0;
   margin-bottom: 1rem;
}

h1 {
   font-family: 'Zen Dots', cursive;
   font-size: 2rem;
}

h2 {
   font-size: 1.4rem;
   font-weight: 500;
   background-color: var(--color-beige);
   text-align: center;
   margin: 1rem 0 0 0;
}

a {
   color: var(--color-pink);
}

a:hover,
a:focus {
   color: var(--color-green-light);
}

button {
   border: 0;
   box-shadow: none;
   font-family: 'Sunflower', sans-serif;
   font-weight: 500;
}

button:hover,
button:focus {
   cursor: pointer;
}

.container {
   width: 98%;
   max-width: 500px;
   margin: 0 auto;
}

.container-canvas {
   width: 370px;
   height: 370px;
   margin: 3em auto 0;
   position: relative;
}

canvas {
   display: block;
   border-radius: 50%;
   border: 2px solid var(--color-green);
   box-shadow: 0 0 4px 4px #060c15; 
   width: 370px;
   height: 370px;
   background-color: #c1b36c;
   /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#c4b56f+0,c1a94f+62,6b4c14+90,c1a94f+93,956b1b+94,956b1b+100 */
   background: #c4b56f; /* Old browsers */
   background: -moz-radial-gradient(center, ellipse cover,  #c4b56f 0%, #c1a94f 62%, #6b4c14 90%, #c1a94f 93%, #956b1b 94%, #956b1b 100%); /* FF3.6-15 */
   background: -webkit-radial-gradient(center, ellipse cover,  #c4b56f 0%,#c1a94f 62%,#6b4c14 90%,#c1a94f 93%,#956b1b 94%,#956b1b 100%); /* Chrome10-25,Safari5.1-6 */
   background: radial-gradient(ellipse at center,  #c4b56f 0%,#c1a94f 62%,#6b4c14 90%,#c1a94f 93%,#956b1b 94%,#956b1b 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c4b56f', endColorstr='#956b1b',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

.game {
   display: grid;
   position: fixed;
   top: 0;
   left: 0;
   width: 100vw;
   height: 100vh;
   place-content: center;
   background-color: rgba(8, 10, 12, 0.998);
   transition: opacity 0.4s ease-in-out;
}

.game.hidden {
   opacity: 0;
   pointer-events: none;
}

.game__card {
   background-color: var(--color-beige);
   color: var(--color-black);
   padding: 1.4rem 2rem;
   text-align: center;
}

.game__buttons {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 1rem;
}

.game__button {
   background-color: transparent;
}

.game__button svg {
   width: 48px;
}

.game__button:hover svg,
.game__button:focus svg {
   fill: var(--color-pink);
}

.results {
   background-color: var(--color-black);
   color: var(--color-green-light);
   padding: 0.8rem;
   font-family: 'Zen Dots', cursive;
   font-size: 1.2rem;
   letter-spacing: 1px;
   text-align: center;
   text-transform: uppercase;
   margin-top: 1.2rem;
}

.score {
   background-color: var(--color-green-light);
   font-size: 1.4rem;
   text-align: center;
   padding: 1rem;
}

.restart {
   display: block;
   margin: 0 auto;
   color: var(--color-black);
   background-color: var(--color-pink-light);
   font-size: 1.5rem;
   letter-spacing: 0.8px;
   text-transform: uppercase;
   padding: 0.4rem 1rem 0.2rem;
   margin-top: 1rem;
}

.restart:hover,
.restart:focus {
   background-color: var(--color-green-light);
}

footer {
   margin-top: 3rem;
   text-align: center;
   background-color: var(--color-black);
   color: var(--color-beige);
   padding: 0.5rem;
}