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

:root {
    --bg-color: #0D0C1D;
    --light: #DBE5E6;
}

.stars {
  position: fixed;   /* behind everything */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* don't block clicks */
  z-index: -1;          /* behind all content */
  background: #0D0C1D;
  overflow: hidden;
}

.star {
  position: absolute;
  border-radius: 50%;
  background: white;
  opacity: 0.8;
  animation: twinkle 4s infinite alternate;
}

@keyframes twinkle {
  0% { opacity: 0.3; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-2px); }
  100% { opacity: 0.3; transform: translateY(0); }
}



body {
    font-family: 'Orbitron', sans-serif;
    font-size: 20px;
    background: var(--bg-color);
    color: var(--light);
}

button {
    font-family: 'Orbitron', sans-serif;
    font-size: 20px;
    background: #888888;
    color: #ccc;
}

a {
    text-decoration: none; /*removes underline*/
    color: var(--light);
}

ul { /*unordered lists*/
    list-style: none; /*removes bullets*/
}

.navbar { padding: 20px; }
.navbar .container { display: flex; justify-content: space-between; align-items: center; }

.navbar .quote{
    font-size: 15px;
}
.container-wide { display: flex; gap: 5%; justify-content: center; margin: 20px; }

.rocket {
    background: #474973;
    padding: 20px;
    border-radius: 10px;
    width: 40%;
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: center;
}

.rocket_space {
    background-color: #0D0C1D;
    width: 100%;
    max-height: 400px;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative; /* needed for absolute children */
    overflow: hidden;   /* prevent overflow */
    min-height: 300px;  /* ensure container has space even if image hidden */
}

.rocket_space div {
    position: absolute;  
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 300px;
    max-height: 100%;
    display: none;       
}

.rocket_space div img {
    display: block;
    max-width: 300px;
    height: 100%; /* make image fit container height */
}

/* Rocket flight path animation */
@keyframes rocketFlyCurve {
  0% {
    transform: translate(0%, 0%) scale(1) rotate(0deg);
  }
  12% {
    transform: translate(-12%, -12%) scale(0.9) rotate(40deg);
  }
  24% {
    transform: translate(5%, -20%) scale(0.8) rotate(90deg);
  }
  36% {
    transform: translate(40%, -5%) scale(0.7) rotate(140deg);
  }
  48% { 
    transform: translate(20%, 25%) scale(0.55) rotate(200deg);
  }
  60% {
    transform: translate(-10%, 25%) scale(0.45) rotate(250deg);
  }
  72% {
    transform: translate(-25%, 10%) scale(0.35) rotate(300deg);
  }
  84% {
    transform: translate(-15%, -5%) scale(0.25) rotate(370deg);
  }
  92% {
    transform: translate(10%, -12%) scale(0.2) rotate(400deg);
  }
  100% {
    transform: translate(650px, -120px) scale(0.15) rotate(480deg);
  }
}



.launch-animation {
  animation: rocketFlyCurve 5s ease-in forwards;
  will-change: transform;
  z-index: 999;
  position: relative;
}


.under_rocket{
    width: 100%;
    padding: 10px;
    background-color: #e9e9e9;
    color:#000000;
    border-radius: 10px;
    font-size: 12px;
}

.progress-text {
    display: flex;
    align-items: center;
    gap: 10px;
}

.progress-bar-container {
    flex: 1;
    height: 10px;
    background-color: #fff;
    border-radius: 5px;
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    width: 0%;
    background-color: #A3001E;
    transition: width 0.5s ease;
}

.task-list {
    background: #474973;
    padding: 20px;
    border-radius: 10px;
    width: 40%;
    position: relative;
}

.task-list h1 { display: flex; align-items: center; gap: 50%; }

.help-icon {
    position: absolute;
    top: 15px;
    right: 20px;
    cursor: pointer;
    font-size: 16px;
    background-color: #A3001E;
    color: #fff;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    z-index: 10;
}

.tooltip-text {
    visibility: hidden;
    width: 180px;
    background-color: #0D0C1D;
    color: #fff;
    text-align: center;
    padding: 8px;
    border-radius: 6px;
    position: absolute;
    top: -40px;
    right: 50%;
    transform: translateX(50%);
    opacity: 0;
    transition: opacity 0.2s;
    font-size: 12px;
    line-height: 1.2;
}

.help-icon:hover .tooltip-text { visibility: visible; opacity: 1; }

#tasklist { list-style: none; padding: 0; }
#tasklist li {
    background: #e9e9e9;
    padding: 10px;
    margin-bottom: 8px;
    border-radius: 6px;
    font-size: 16px;
    color: #000;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* NEW: Delete "×" button */
#tasklist li .delete-btn {
    cursor: pointer;
    font-weight: bold;
    color: #A3001E;
    font-size: 18px;
    padding: 0 5px;
    user-select: none;
    transition: color 0.2s ease;
}
#tasklist li .delete-btn:hover {
    color: #FF0000;
}

#tasklist li.completed label { text-decoration: line-through; color: #888; opacity: 0.7; }

/* INPUT FORM CONTAINER */
.task-list .input {
    margin-top: 15px;
    background-color: #e9e9e9;
    padding: 15px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;

}

/* INPUT FIELD */
.task-list .input input[type="text"] {
    padding: 10px;
    font-size: 16px;
    border-radius: 6px;
    border: none;
    outline: none;
    width: 100%;
    box-sizing: border-box;
    color:#000;
}

/* RADIO BUTTONS FOR POINTS */
.task-list .input .point_options {
    display: flex;
    gap: 10px;
    margin-top: 5px;
    
}

.task-list .input .point_options input[type="radio"] {
    accent-color: #A3001E;
    cursor: pointer;
}

/* SUBMIT BUTTON */
.task-list .input label {
    display: block;          /* ensures label is on its own line */
    margin-bottom: 5px;      /* space between label and input */
    font-weight: lighter;
    color: #000;
}

.task-list .input input[type="submit"] {
    margin-top: 10px;
    padding: 10px;
    border-radius: 6px;
    border: none;
    background-color: #A3001E;
    color: white;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.task-list .input input[type="submit"]:hover {
    background-color: #FF0000;
}

/* TASK LIST ITEMS */
#tasklist li {
    justify-content: space-between; /* space between text and delete */
}

/* Ensure checkbox + label + delete button layout */
#tasklist li label {
    flex: 1; /* takes remaining space so delete is at the right */
}

/* Optional: add some padding to completed tasks */
#tasklist li.completed label {
    padding-right: 10px;
}




.calculate-points {
    background-color: #A3001E;
    color: white;
    text-align: center;
    padding: 12px 20px;
    margin-top: 20px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.3s;
}
.calculate-points:hover { background-color: #5952d4; }

#launchBtn {
  padding: 10px 20px;
  font-size: 1em;
  border: none;
  cursor: pointer;
  margin-top: 10px;
  border-radius: 10px;
}

#launchBtn.grey {
  background-color: grey;
  color: white;
}

#launchBtn.red {
  background-color: red;
  color: white;
}

.launch_section {
  text-align: center; /* centers everything inside */
  margin-top: 20px;
}

#launchMessage {
  margin-top: 10px; /* space between button and message */
  display: none;
  color: red;
  font-weight: bold;
}