: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;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%
  }

  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 {
      /*This one is free ;->  */
      position: static;
  }

  .relative-box {
      background: #2ecc71;
      left: 200px;
  }

  .absolute-wrapper {
      position: relative;   
      height: 200px;
      background: #f9f9f9;
      border: 2px dashed #ccc;
  }

  .absolute-box {
      position: absolute;
      background: #9b59b6;
      bottom: 0;
      right: 0;
  }

  .sticky-box {
      background: #e67e22;
      position: sticky;
      top: 800px;
  }

  footer {
      width: 100%;
      background: #34495e;
      color: white;
      text-align: center;
      padding: 10px 0;
      font-size: var(--footer-fontsize);
      position:fixed;
      bottom: 0;
  }

  /*  MEDIA QUERY 
            if the viewport is less than 500px, change the header and footer font size by to 20px and reduce the box size by 50% - Challenge - Can you do this using only the :root selector?
        */