/* ================================
            Colors
================================ */

:root {
    --bodyBG: #f6f6f6;
    --bodyFont: #2b3445;
    --blue:#9FC5EF;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --container-max-width: 1200px;
    --header-height: 60px;
    --card-min-height: 400px;
  
}

/* Base styles */
body {
    background-color: var(--bodyBG);
    color: var(--bodyFont);
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    height: 100vh;
    overflow: auto;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* IE and Edge */
    line-height: 1.6;
    overflow-x: hidden;
}

/* Responsive typography */
@media (max-width: 768px) {
    body {
        font-size: 14px;
    }
}

@media (min-width: 769px) {
    body {
        font-size: 16px;
    }
}

/* Header styles */
header {
    position: relative;
    background: black;
    color: white;
    padding: var(--spacing-md);
    text-align: center;
    min-height: var(--header-height);
}

/* Page content */
main {
    padding: var(--spacing-lg);
}

/* Responsive container */
.container {
    width: 100%;
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

/* Responsive images */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Responsive spacing */
@media (max-width: 768px) {
    .container {
        padding: 0 var(--spacing-sm);
    }
    
    main {
        padding: var(--spacing-md);
    }
    
    header {
        padding: var(--spacing-sm);
        min-height: calc(var(--header-height) - 16px);
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 var(--spacing-sm);
    }
    
    main {
        padding: var(--spacing-sm);
    }
    
    header {
        padding: var(--spacing-sm);
        min-height: calc(var(--header-height) - 24px);
    }
}

/* Hide scrollbar */
body {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* IE and Edge */
    overflow: -moz-scrollbars-none; /* Firefox */
}

/* Hide scrollbar for Chrome, Safari and Opera */
body::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE/Edge */
body::-ms-scrollbar {
    display: none;
}

  /* Hide scrollbar for all elements */
  * {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* IE and Edge */
  }

  /* Hide scrollbar for Chrome, Safari and Opera for all elements */
  *::-webkit-scrollbar {
    display: none;
  }
  
  /* ================================
              My classes
  ================================ */
  
  .border {
    border: 4px solid red;
  }
  
  .flex {
    display: flex;
    align-items: center;
  }