:root {
      --main-bg: #f0f0f0;
      --box-color: #3498db;
      --highlight: #e74c3c;
      --text-color: #333;
      --box-size: 120px;
      --header-fontsize: 25px;
      --footer-fontsize: 25px;
  }

  body {
      font-family: Arial, sans-serif;
      background: var(--main-bg);
      color: var(--text-color);
      margin: 0;
  }

  header {
      font-size: var(--header-fontsize);
      background: var(--highlight);
      color: white;
      text-align: center;
  }

  main {
      margin-top: 70px;
      padding: 20px;
      max-width: 900px;
      margin-left: auto;
      margin-right: auto;
  }

  section {
      background: white;
      border-radius: 8px;
      padding: 20px;
      margin-bottom: 40px;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  }

  .box {
      width: var(--box-size);
      height: var(--box-size);
      background: var(--box-color);
      color: white;
      text-align: center;
      font-size: 14px;
      align-items: center;
      font-weight: bold;
      border-radius: 8px;
  }


  /*Make the boxes work as instructed! */
/* STATIC BOX (default behavior) */
.static-box {
    position: static;
}

/* RELATIVE – move the green box 200px to the right */
.relative-box {
    position: relative;
    left: 200px;
}

/* ABSOLUTE – purple box to bottom-right of wrapper */
.absolute-wrapper {
    position: relative; /* parent must be relative */
}

.absolute-box {
    position: absolute;
    bottom: 10px;
    right: 10px;
}

/* STICKY – orange box sticks after scrolling 80px */
.sticky-box {
    position: sticky;
    top: 80px;
}

/* FIXED FOOTER – always visible at bottom */
footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    
}