:root {
    --bg-dark: #02030b;
    --bg-deep: #070b1a;
    --bg-soft: #0f1324;

    --accent-cyan: #58f0ff;
    --accent-blue: #7c75ff;
    --accent-magenta: #d36eff;
    --accent-yellow: #f2d64b;

    --solid-white: #ffffff;
    --solid-black: #000000;
    --solid-panel: #0d1124;
    --solid-panel-soft: rgba(255, 255, 255, 0.08);

    --text-main: #eef6ff;
    --text-muted: #8fa6c2;

    --gradient-page: radial-gradient(circle at top, rgba(88, 240, 255, 0.14), transparent 25%), linear-gradient(180deg, var(--bg-dark) 0%, var(--bg-deep) 100%);
    --gradient-card: linear-gradient(145deg, rgba(255, 0, 0, 0.08), rgba(129, 168, 102, 0.534));
    --gradient-accent: linear-gradient(135deg, var(--accent-cyan), var(--accent-blue));
    --gradient-glow: radial-gradient(circle, rgba(206, 200, 148, 0.24), transparent 80%);
     --rainbow-border:
      conic-gradient(from 0deg,
        var(--accent-pink),
        var(--accent-blue),
        var(--accent-cyan),
        var(--accent-yellow),
        var(--accent-green),
        var(--accent-magenta),
        var(--accent-pink));
}

@keyframes rainbow-border-move {
    from { background-position: center, 0% 0%; }
    to { background-position: center, 100% 100%; }
}

body {
      background: var(--gradient-page);
      color: white;
      min-height: 80vh;
      display: flex;
      flex-direction: column;
      font-family: 'Press Start 2P', monospace;
      position: relative;
      -webkit-text-stroke: 0.5px rgb(122, 122, 122);
}

.screen {
    background: transparent;
    flex: 1;
    display: grid;
    padding-left: 24px;
    padding-right: 24px;
}

/* Rectangle boxes, with padding and rounded corners */
.guide-box {
    background: var(--gradient-card);
    border: 8px solid black;

    margin-bottom: 3px;
    margin-top: 3px;
     position: relative;
      z-index: 20;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2.5rem;
      text-align: center;
      padding: 1rem;
}
.guide-box button {
    font-size: larger;
}
.edit-button {
    background-color: yellow;
    border: #000510 solid 6px;
    font-size: larger;
}
.start-button {
    background-color: green;
    border: #000510 solid 6px;
    font-size: larger;
}
.new-guide-button {
        background-color: aliceblue;
    border: #000510 solid 6px;
    margin-bottom: 3px;
    margin-top: 3px;
     position: relative;
      z-index: 20;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2.5rem;
      text-align: center;
      padding: 1rem;
}


#guideEditScreen {
    background-color: red;
}
#guideEditScreen button {
    margin: 4px;
    margin-bottom: 10px;
    padding: 3%;
    font-size: large;
}
#guideEditScreen input {
    margin: 4px;
    margin-bottom: 10px;
    padding: 3%;
    font-size: larger;
}
#guideEditScreen textarea {
  width: 100%;
  height: 100px;
  box-sizing: border-box;
  resize: none;
}
#guideEditScreen select {
    font-size: large;
    border: 4px solid black;
}
#guideListScreen {
    background-color: transparent;
}
#guideListScreen button {
    margin: auto;
    padding: 10%;
    font-size: larger;
}
#guideInProgressScreen {
    background-color: blue;
}

#guideInProgressScreen button {
    margin: auto;
    padding: 10%;
    font-size: larger;
}
#inProgressScreen {
    background-color: yellowgreen;
}

#breakSpace {
    height: 60px;
}
/* Footer Radio goes to bottom */
#footerRadio {
    background-color: black;
    position: fixed;
    z-index: 30;
    left: 0;
    bottom: 0;
    width: 100%;
    display: flex;
    justify-content: center;
}

/* Default label style */
label {
  cursor: pointer;
  padding: 5px 10px;
  font-family: sans-serif;
  flex:1;
  color: #333;
  background-color: #25231a;
  font-size: 32px;
}

/* Style for the label of the checked radio button */
input[type="radio"]:checked + label {
  font-weight: bold;
  color: #007bff; /* Example: Blue text when selected */
  background-color: #cfa519;
}
input[type="radio"] {
  display: none;
}

/* Base style for the container */
progress {
  width: 100%;
  height: 20px;
  border-radius: 10px;
  overflow: hidden;
}

/* Chrome, Safari, and newer Edge styling */
progress::-webkit-progress-bar {
  background-color: #eee;
}
progress::-webkit-progress-value {
  background-color: #4caf50;
}

/* Firefox styling */
progress::-moz-progress-bar {
  background-color: #4caf50;
}

.small-image {
    border: 4px solid black;
}

.complete {
    background-color: green;
}