/* CSS Variables for theming */
:root {
    --orange: #dfa94a; 
    --medium-turquoise: #87bf9e;
    --medium-off-white: #DEE7E5;
    --very-light-green: #D4E5E4;
    --light-turquoise: #7Eb2b0 ;
    --dark-turquoise: #2f7E7b;
    --off-white: #f8f6f2;
    --white: #ffff;
    --light-gray: #475569;
    --dark-gray: #0f1521;
    --very-light-gray: #b3b3b3;

}

[data-theme="dark"] {
    --dark-gray: #f8f6f2 ;
    --white:  #475569;
    --light-gray: #f8f6f2;
    --off-white:  #0f1521;
    --dark-turquoise: #7Eb2b0 ;
    --light-turquoise: #2f7E7b;
    --medium-turquoise: #244C4C;
    --medium-off-white: #597978;
    --very-light-green: #4C7470;
}

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

html {
    font-size: 16px;
}

body {
    background-color: var(--off-white);
    color: var(--dark-gray);
    font-family: 'Montserrat', Arial, sans-serif;
    transition: background-color 0.3s ease, color 0.3s ease;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}


main {
    flex: 1;
}
h2{
    font-size: 3.5rem;
}
p{
    font-size:1rem;
}
/* Responsive Design */
@media (max-width: 1200px) {
    .navbar {
        flex-direction: column;
        gap: 0.9375rem;
        padding: 0.9375rem;
    }
    
    .logo-section {
        padding: 0;
    }
  
    
    .user-section {
        gap: 0.9375rem;
        padding: 0;
    }
}

@media (max-width:1000px){
      h2{
        font-size: 2rem;
      }
}
@media (max-width: 480px) {
     h2{
        font-size: 1.5rem;
      }
    .nav-links {
        gap: 0.625rem;

    }
    
    .nav-link {
        font-size: 1.4rem;
    }
    
    .login-btn,
    .dark-mode-toggle {
        font-size: 1.3rem;
    }
}