:root {
  --color-primary: rgb(3, 63, 119);
  --color-accent:  #457b9d;
  --timer-fill:  #a5e8ff;
  
}

* {
  margin:0;
  padding:0;
  box-sizing: border-box;
  
}

html, body {
  height: 100%;
  display: flex;
  flex-direction: column;
  color: white; /* Text Color */
  font-family: "Sour Gummy", sans-serif; 
  align-items: center;
  justify-content: center;
  background: var(--color-primary);
  color: white
}

#title {
  text-align: center;
  padding-bottom: 20px;
}

#layout {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 2rem
}

#input {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

#input input{
  background: rgba(255,255,255,0.08); /* subtle fill for dark bg */
  border: 2px solid var(--color-accent);
  border-radius: 50px;
  font-family: "Sour Gummy", sans-serif;
  color: white;
  font-size: 18px;
  font-weight: 500;
  padding: 0px 8px; /* extra right padding for arrows */
  outline: none;
  box-shadow: none;
}

#input p input::placeholder{
  color: var(--color-accent);
}

#input input:focus {
  outline: none; /* turn off browser default */
  border-color: var(--color-accent); /* keep same color */
}

.timer-container {
  position: relative;
  width: 300px;    /* match the SVG size */
  height: 300px;   /* match the SVG size */
}

.timer-container svg {
  /* x-offset, y-offset, blur-radius, color */
  filter: drop-shadow(0px 4px 8px  var(--color-accent));
}

.timer {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 2px;
  font-size: 32px;
}

#timer-circle {
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  stroke: var(--timer-fill);
}

button {
  font-size: 2rem;
  background: none;
  border: none;
  cursor: pointer;
}

.controls {
  position: absolute;      /* pull it out of flow, overlaying the SVG */
  bottom: 20%;            /* 20% up from the bottom edge of the container */
  left: 50%;               /* start at 50% across */
  transform: translateX(-50%);  /* shift back by half its width to center */
  display: flex;           /* lay the buttons out in a row */
  gap: 8px;                /* space between buttons */
}