/* ==========================================================================
   Base Styles and Variables
   ========================================================================== */

@import url('variables.min.css');

:root {
  /* Colors */
  --color-primary-start: #12D181;
  --color-primary-end: #0ABAB5;
  --color-text-primary: #252525;
  --color-background: #FFFFFF;
  --color-border: rgba(0, 0, 0, 0.1);
  --color-premium: #1B1B1B;
  --color-accent: #0058FF;
  --color-link: #00A0FF;

  /* Gradients */
  --gradient-primary: linear-gradient(90deg, var(--color-primary-start), var(--color-primary-end));

  /* Typography */
  --font-primary: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  --font-size-base: 1.25em; /* 20px - Base font size for larger screens */
  --font-weight-normal: 400;
  --font-weight-semi-bold: bold;

  /* Spacing */
  --spacing-xs: 10px;
  --spacing-sm: 30px;
  --spacing-md: 40px;
  --spacing-lg: 60px;
  --spacing-xl: 130px;

  /* Border radius */
  --border-radius-lg: 20px;

  /* Shadows */
  --shadow-bottom: 0 -15px 40px rgba(255, 255, 255, 1), 0 -6px 15px rgba(255, 255, 255, 0.1);
  --shadow-card: 0 12px 30px rgba(0, 0, 0, 0.1);

  /* Z-index */
  --z-index-fixed: 888;
}

/* ==========================================================================
   Base Styles
   ========================================================================== */

body {
  font-family: var(--font-primary);
  height: 100vh;
  color: var(--color-text-primary);
  margin-top: var(--spacing-sm);
  font-size: 1em; /* Base font size for body */
}

/* ==========================================================================
   Layout Styles
   ========================================================================== */

main {
  max-width: 900px;
  margin: 0 auto;
  padding: var(--spacing-sm) 20px 50px;
}

/* ==========================================================================
   Component Styles
   ========================================================================== */

.bottom-box-shadow {
  position: fixed;
  bottom: -120px;
  left: 0;
  width: 100%;
  box-shadow: var(--shadow-bottom);
  background-color: var(--color-background);
  z-index: var(--z-index-fixed);
}

.section {
  margin-bottom: var(--spacing-md);
  padding: var(--spacing-lg);
  background-color: var(--color-background);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-card);
  line-height: 1.2em !important;
}

/* ==========================================================================
   Typography Styles
   ========================================================================== */

.main-title,
.title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semi-bold);
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
}

.content,
.developer-name {
  font-size: 0.75em; /* 12px */
  color: var(--color-text-primary);
  font-weight: var(--font-weight-normal);
  margin-top: var(--spacing-xs);
}

/* ==========================================================================
   Link Styles
   ========================================================================== */

.section a {
  color: var(--color-link);
  text-decoration: none;
  font-weight: var(--font-weight-semi-bold);
  transition: color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.section a:hover {
  color: var(--color-accent);
}

/* ==========================================================================
   Media Queries - Responsive Design
   ========================================================================== */

/* Tablet Portrait */
@media screen and (max-width: 767px) {
  :root {
    --font-size-base: 1.0em; /* 16px */
  }

  .section {
    padding: var(--spacing-md);
  }
}

/* Mobile */
@media screen and (max-width: 599px) {
  :root {
    --font-size-base: 0.875em; /* 14px */
  }

  .section {
    padding: var(--spacing-sm);
  }
}