@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+Display:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Kode+Mono:wght@400..700&family=Noto+Serif+Display:ital,wght@0,100..900;1,100..900&display=swap');

html, body {
 margin: 0px;
 min-width: 100vw;
 min-height: 100vh;
 --foreground: #deadbeef;
 --text: #000000;
 --background: #ffffff;
 --accent-hover: #235d23ff;
 --accent: #286d28ff;
 --accent-compliment: #d792d7;
 --warning: #d12639;
 --background-shading: rgba(127,127,127,.5);
 background-image: url("./static/grass_tile.webp");
 background-size: 4rem;
 animation: shifting 900s linear infinite;
 font-family: "Roboto", sans-serif;
 overflow-x: hidden;
 color: var(--text);
}

@media( prefers-color-scheme: dark ) {
   body {
      --foreground: #deadbeef;
      --text: #FFFFFF;
      --background: #000000;
   }
}
@keyframes shifting {
   0% {
      background-position: 0% 0%;
   }

   50% {
      background-position: 100% 100%;
   }

   100% {
      background-position: 0% 0%;
   }
}
button {
   background: none;
   border: none;
   outline: none;
   box-shadow: none;
   color: var(--text);
}

main {
   display: grid;
   justify-items: center;
   grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}

#cookie-pop-up {
   margin: 1rem;
   border-radius: 1rem;
   border: none;
   background: var(--background);
   color: var(--text);
}

.plus {
   min-width: 3rem;
   min-height: 3rem;
   background-color: var(--accent);
   border-radius: 50%;
   font-size: 1.5rem;
   position: absolute;
   /* bottom: 1rem;
   right: 1rem; */
   top: calc(100% - 5rem);
   left: calc(100% - 5rem);
   margin: .25rem;
   justify-self: center;
}
   
  

#cookie-nav {
   display: flex;
   flex-direction: row;
   justify-content: right;
   gap: 1em;
}

#cookie-nav > button {
   background-color: var(--accent);
   border-radius: 0.25rem;
   padding: .5rem;
   cursor: pointer;
}

#cookie-nav > button:hover {
   background-color: var(--accent-hover);
}

header {
   background-color: var(--background);
   display: grid;
   justify-items: center;
   padding: 0.25rem;
   font-size: 1em;
}

header > nav {
   width: 100%;
   min-height: 2rem;
   padding: 0.25rem;
   padding-left: 2rem;
   padding-right: 2rem;
   display: flex;
   align-items: center;
   justify-content: space-between;
}

header > nav > span > input[type="number"] {
   appearance: none;
   border: none;
   padding: 0.25em;
   border-radius: 0.25em;
   background: var(--background-shading);
   color: var(--text);
   font-size: 1em;
   width: 5em;
}

header > nav > span > input[type="number"]:focus {
   outline: 0.2em var(--accent) solid;
}

header > nav > span {
   display: flex;
   flex-direction: row;
   gap: 0.5em;
   align-items: center;
   justify-self: flex-end;
   align-self: center;
}

header > nav > span > select {
   appearance: none;
   border: none;
   padding: 0.25em;
   border-radius: 0.25em;
   width: 5em;
   text-align: center;
   font-size: inherit;
   background-color: var(--background-shading);
   color: var(--text);
}

header > progress[value] {
   width: calc(100% - 1rem);
   height: 0.5rem;
   margin: 0.5rem;
   border-radius: 0.25rem;
   border: none;
   -webkit-appearance: none;
   appearance: none;
   background-color: var(--accent);
   
}

/* header > ::-webkit-progress-bar {
   width: 80%;
   height: 0.5rem;
   margin: 0.5rem;
   border-radius: 0.25rem;
   border: none;
   -webkit-appearance: none;
   appearance: none;
   background-color: var(--accent);
} */

.modal[open] {
   position: absolute;
   top: 0px;
   left: 0px;
   background-color: transparent;
   border: none;
   min-height: 100vh;
   min-width: min(100vw, 100%);
   margin: 0px;
   padding: 0px;
   display: grid;
   justify-items: center;
   align-items: center;
}

.modal > div {
   background: var(--background);
   color: var(--text);
   min-height: 50%;
   min-width: 50%;
   padding: 1rem;
   border-radius: 0.25em;
   display: grid;
   justify-items: center;
   align-items: center;
}

.modal > div > button {
   font-size: 1rem;
   background-color: var(--accent);
   padding: 0.5em;
   border-radius: .25em;
}

.modal > div > button:hover {
   cursor: pointer;
   background-color: var(--accent-hover);
}

#go-touch-grass > div > q::before {
   content: "“";
}

.modal > div > h1 {
   text-align: center;
}

.modal > div > h1 > q {
   font-family: "Noto Serif Display";
}

.modal > div > h1 > q::after, .modal > div > h1 > q::before {
   content: "";
}

#go-touch-grass > div > q::after {
   content: "”";
}

.final-time {
   font-family: "Kode Mono", "Roboto", sans-serif;
   color: var(--warning);
   font-size: 3.5rem;
}

.final-time::before {
   content: '-';
}

.break-time {
   font-family: "Kode Mono", "Roboto", sans-serif;
   color: var(--accent);
   font-size: 3.5rem;
}