:root {
  --bg-primary: #151515;
  --bg-secondary: #222;
  --bg-light: #f1f1f1;
  --text-primary: #f1f1f1;
  --text-secondary: #ffffff1a;
  --text-dark: #151515;
  --border-color: #1a1a1a1a;
  --shadow: #1a1a1a0f;
  --primary-purple: #663399;
  --secondary-purple: #8864c7;
  --highlight-purple: #7e57c2;
}

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

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Geist", "sans-serif";
  background: var(--bg-primary);
}

main {
  .top-content {
    max-width: 1360px;
    margin: 0 auto;
    color: var(--text-primary);
    border-bottom: 1px solid var(--text-secondary);
    padding: 2rem 0;

    .top-content-container {
      display: flex;
      gap: 4rem;

      
      .work-img {
        background-size: cover;
        background-position: 50%;
        background-repeat: no-repeat;
        border-radius: 36px;
        width: 100%;
        max-width: 50%;
        height: 512px;
      }
      
      .text-content {
        .work-title {
          font-size: 8rem;
        }

        .dates {
          font-size: 1.1rem;
          opacity: 0.7;
        }

        .work-description {
          font-size: 1.25rem;
        }

        .tags {
          display: flex;
          padding: 2rem 0;
          gap: 1rem;
          flex-wrap: wrap;

          .tag {
            border: 2px solid var(--text-primary);
            border-radius: 999px;
            padding: 0.25rem 0.75rem;
            transition: 0.3s;

            &:hover {
              transform: scale(1.1);
            }
          }
        }
      }
    }
  }

  .main-content {
    max-width: 1360px;
    margin: 0 auto;
    color: var(--text-primary);
    padding: 2rem 0;

    .main-content-container {
      display: flex;
      flex-direction: column;
      gap: 2rem;

      .section-block {
        padding: 1rem 0;

        .section-title {
          font-size: 4rem;
        }
  
        .section-text {
          font-size: 1.25rem;
        }

        ol {
          list-style-position: inside;
          padding-left: 1rem;
        }
      }
    }
  }
}

/* ============ */
/* == Mobile == */
/* ============ */

@media (max-width: 768px) {
  main {
    padding: 0 1.5rem;
    .top-content {
      .top-content-container {
        flex-direction: column;
        gap: 2rem;

        .work-img {
          max-width: 100%;
          height: 360px;
        }

        .text-content {
          .work-title {
            font-size: 4rem;
          }

          .dates {
            font-size: 1rem;
          }

          .work-description {
            font-size: 1.1rem;
          }
        }
      }
    }

    .main-content {
      .main-content-container {
        .section-block {
          .section-title {
            font-size: 2rem;
          }

          .section-text {
            font-size: 1.1rem;
          }
        }
      }
    }
  }
}