:root {
    --header-height: 3rem;
  
    /*========== Colors ==========*/
    /* Change favorite color to match images */
    /*Green dark 190 - Green 171 - Grren Blue 200*/
    --hue-color: 190;
  
    /* HSL color mode */
    --first-color: hsl(var(--hue-color), 64%, 22%);
    --title-color:#12233c;
    --text-color: #013153;
    --text2-color: #000000;
    --iocn-color: #1062ec;
    --iocn2-color: #fff;
    --text2-color: #fff;
    --header-color: #fff;
    --body-color: #fff;
    --body2-color: #EFF2F8;
    --body3-color: #28446c;
    --body4-color: #F8FAFF;
    --button-color: #1062ec;
    --lunbotu-color: #014ca1;
    --buttonbdc11-color: #CBD9EF;
    --buttonc11-color: white;
    --button11hover-color: #144996;
    --buttonbdc22-color: #144996;
    --buttonc22-color: #Aed0ee;
    --button22hover-color: #0056b3;
    
    
    
    
  
    /*========== Font and typography ==========*/
    --body-font: 'Open Sans', sans-serif;
    --title-font: 'Raleway', sans-serif;
    --biggest-font-size: 2.5rem;
    --h1-font-size: 1.5rem;
    --h2-font-size: 1.25rem;
    --h3-font-size: 1rem;
    --normal-font-size: .938rem;
    --small-font-size: .813rem;
    --smaller-font-size: .75rem;
  
    /*========== Font weight ==========*/
    --font-medium: 500;
    --font-semi-bold: 600;
  
    /*========== Margenes Bottom ==========*/
    --mb-0-25: .25rem;
    --mb-0-5: .5rem;
    --mb-0-75: .75rem;
    --mb-1: 1rem;
    --mb-1-25: 1.25rem;
    --mb-1-5: 1.5rem;
    --mb-2: 2rem;
    --mb-2-5: 2.5rem;
  
    /*========== z index ==========*/
    --z-tooltip: 10;
    --z-fixed: 100;
  
    /*========== Hover overlay ==========*/
    --img-transition: .3s;
    --img-hidden: hidden;
    --img-scale: scale(1.1);
  }


  /*========== Variables Dark theme ==========*/
body.dark-theme {
    --first-color: hsl(var(--hue-color), 64%, 22%);
    --title-color:#fff;
    --text-color: #fff;
    --text2-color: #fff;
    --iocn-color: #fff;
    --iocn2-color: #1062ec;
    --text2-color: lightblue;
    --header-color: #28446c;
    --body-color: #28446c;
    --body2-color: #1e3654;
    --body3-color: #fff;
    --body4-color: #0c243d;
    --button-color: #013153;
    --lunbotu-color: #edf7f9;
    --buttonbdc11-color: #144996;
    --buttonc11-color: #CBD9EF;
    --button11hover-color: #Aed0ee;
    --buttonbdc22-color: #Aed0ee;
    --buttonc22-color: white;
    --button22hover-color: #144996;
  }
  
  /*========== Button Dark/Light ==========*/
  .nav__dark {
    display: flex;
    align-items: center;
    column-gap: 2rem;
    position: absolute;
    left: 3rem;
    bottom: 4rem;
  }
  
  .change-theme,
  .change-theme-name {
    color: var(--text-color);
  }
  
  .change-theme {
    cursor: pointer;
    font-size: 1rem;
  }
  
  .change-theme-name {
    font-size: var(--small-font-size);
  }
  
body {
            transition: background-color 0.3s ease, color 0.3s ease;
            color: black;
        }

        .light-theme {
            background-color: var(--body-color);
        }

        .dark-theme {
            background-color:var(--body-color);
            color: white;
        }