* {
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  margin: 0;
  background-image: linear-gradient(red,black);
  padding: 20px;
  color: #222;
}

/* Header centriran */
header {
  text-align: center;
  margin-bottom: 40px;
}

/* Container teorijskih sekcija u fleksu koji wrapa */
main {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}

/* Svaka teorijska sekcija kao box */
main > section:not(:last-child) {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 10px rgb(0 0 0 / 0.1);
  flex: 1 1 320px;   /* fleksibilna širina, min 320px */
  max-width: 400px;
}

/* Zadaci (posljednja sekcija) puni red */
main > section:last-child {
  flex: 1 1 100%;
  background: white;
  border-radius: 8px;
  padding: 30px;
  box-shadow: 0 3px 15px rgba(0,0,0,0.15);
  display: block; /* koristi block, flex ide u unutarnjem wrapperu */
}

/* Container za zadatke - naslov + boxevi */
.tasks-container {
  display: flex;
  flex-direction: column;
  align-items: center; /* centriranje sadržaja */
  gap: 25px;
}

/* Wrapper za boxeve - horizontalno jedan do drugog */
.boxes-wrapper {
  display: flex;
  gap: 40px;
  justify-content: center;
  flex-wrap: nowrap; /* da svi budu u jednom redu */
  width: 100%;
  max-width: 1000px; /* ograniči širinu */
  overflow-x: auto; /* ako ne stane, pojavit će se scroll */
}

/* Boxovi zadataka */
.box {
  width: 300px;
  height: 300px;
  border-radius: 8px;
  box-shadow: inset 0 0 10px rgba(0,0,0,0.1);
  position: relative; /* za pozicioniranje labela */
}

/* Label unutar boxa */
.task-label {
  position: absolute;
  top: 10px;
  left: 0;
  width: 100%;
  text-align: center;
  font-weight: bold;
  font-size: 18px;
  color: #fff; /* vidi se na gradijentu */
  text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

/* Zadaci - gradijenti */

/* Zadatak A - linearni gradijent */
.a {
  background-image: linear-gradient(to top right, yellow, red 50%, black);
}

/* Zadatak B - radijalni gradijent */
.b {
  background-image: radial-gradient(circle at right, white, darkblue);
}

/* Zadatak C - zastava Hrvatske (oštri prijelazi) */
.c {
  background-image: linear-gradient(
    to bottom,
    red 0%,
    red 33.33%,
    white 33.33%,
    white 66.66%,
    blue 66.66%,
    blue 100%
  );
}