:root {
  --light: black;
  --dark: #212121;
  --brown: #2F4685;
  --red: #fd3e3e;
  --gray: #BDBDBD;
  --cinnamon: #EF9459;
  --black: black;
  --white: white;
}
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
}
.night{
    width: 7vw;
    height: 7vw;
    background-color: white;
    border-radius: 7vw;
    filter: blur(4px);
    margin-top: -9vw;
    margin-left: 7.5vw;
    position: absolute;
    z-index: 1;
}
.night:hover{
   transform: scale(1.25);
}

body {
    background-image: urL("parknight.jpg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-attachment: fixed;
    overflow: hidden;
    width: 100%;
    height: auto;
  cursor: url("acorn.png"), url("acorn.png"), default;}
/*   transition: background 0.15s cubic-bezier(0.22, 0.61, 0.36, 1); */


.winner {
  background: var(--bg-winner);
}

.app {
  text-align: center;
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 50vw;
  height: 100%;
  position: relative;
}

.app-display {
  min-block-size: 75%;
  display: grid;
  place-content: center;
  place-items: center;
  align-items: stretch;
  align-content: space-evenly;
}

/*.metric-group {
  display: flex;
}*/

/*grid instead of flex*/
.metric-group {
  display: grid;
  gap: 2em;
  width: 100vw;
  height: 100%;
  margin: 0 auto;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  place-content: center;
  place-items: center;
  margin-top: -8vw;
  margin-left: -6vw;
/*   max-inline-size: 1000px; */
/*   align-items: start; */
}
/*test*/

.metric {
  margin: 10px;
  max-width: 90px;
  display: grid;
  gap: 16px;
  place-items: center;
}
.metric:hover{
  filter: invert(20%);
}
.metric .label {
  font-weight: 700;
  font-size: 3rem;
  font-family: 'Cabin Sketch', cursive;
  color: var(--selected-color);
}

.circle-chart {
  color: var(--selected-color);
  width: 140px;
  display: grid;
  place-items: center;
}

.circle-chart > * {
  grid-column: 1/-1;
  grid-row: 1/-1;
}
.circle-chart .circle-bg {
  fill: var(--brown);
  stroke: var(--brown);
  stroke-width: 2.8;
}
.circle-chart .circle {
  fill: none;
  stroke: var(--selected-color);
  stroke-width: 2.8;
  stroke-linecap: round;
  animation: progress 1.2s ease-in-out forwards;
}
.circle-chart .percentage {
  font-family: Monaco, monospace;
  font-weight: bold;
  font-size: 3rem;
  max-width: 3ch;
  overflow-x: clip;
  white-space: nowrap;
}

@keyframes progress {
  0% {
    stroke-dasharray: 0 100;
  }
}
input,
button {
  font-size: max(1.2rem, 16px);
  font-weight: 700;
  padding: 12px;
  background-color: var(--brown);
  color: var(--light);
  border: none;
  margin: 5px 2px;
}
marquee{
  margin-top: -25vw;
  position: absolute;
}
h1 {
    margin-top: 3vw;
    font-size: 5vw;
    color: #D37328;
    font-family: 'Frijole', cursive;
    text-align: center;
    -webkit-text-stroke: 0.3px #924B14;
}
h2{
    font-size: 2vw;
    color: #D37328;
    font-family: 'Frijole', cursive;
    text-align: center;
    -webkit-text-stroke: 0.3px #924B14;
}
a{
   cursor: url("acorn.png"), url("acorn.png"), default;
  text-decoration: none;}
head{
    cursor: url("acorn.png"), url("acorn.png"), default;}