:root {
	 --gaiacolor:hsla(240, 65%, 50%, 1);
	 --gaiacolor-secondary:hsla(240, 65%, 55%, 1);
	 --gaiacolor-tertiary:hsla(240, 65%, 60%, 1);
	 --gaiacolor-section:hsla(240, 65%, 65%, 1);
	 --gaiacolor-input:hsla(240, 65%, 35%, 1);
	 --bg-color:#ffffff;
	 --text-color:#111111;
	 --link-color:#ACAAEC;
	 --link-color-disabled:#A3A0EC;
	 --container-bg:#ffffff;
	 --container-color:#111111;
	 --footer-link-color:hsla(240, 65%, 45%, 1);
	 --footer-link-color-disabled:hsla(240, 65%, 45%, 0.4);
	 --footer-bg:#CFD2FF;
	 --footer-color:#000000;
	 --theme-image:url('https://gaiawindwave90.github.io/img/icons/moon.svg');
  /* Add other variables */
}

[data-bs-theme="dark"] {
	 --gaiacolor:hsla(240, 65%, 40%, 1);
	 --gaiacolor-secondary:hsla(240, 65%, 50%, 1);
	 --gaiacolor-tertiary:hsla(240, 65%, 55%, 1);
	 --gaiacolor-section:hsla(240, 65%, 25%, 1);
	 --gaiacolor-input:hsla(240, 65%, 20%, 1);
	 --bg-color:#111111;
	 --text-color:#ffffff;
	 --link-color:#7E7BEC;
	 --link-color-disabled:#6D6AEC;
	 --container-bg:#262626;
	 --container-color:#ffffff;
	 --footer-link-color:hsla(240, 65%, 85%, 1);
	 --footer-link-color-disabled:hsla(240, 65%, 85%, 0.4);
	 --footer-bg:#00058A;
	 --footer-color:#ffffff;
     --theme-image:url('https://gaiawindwave90.github.io/img/icons/sun.svg');
  /* Override variables */
}

.searchinput { 
    background-color: var(--gaiacolor-secondary); /* ??? */
    color: white;
  }

        ul, li {
            list-style: none;
          }
		  

.bg-container {
  background-color: var(--container-bg);
  color: var(--container-color);
}

   .bg-menu { 
    background-color: var(--gaiacolor); /* ??? */
    color: white;
  }
  
      .bg-menu a{ 
    color: white;
  }
  
      .bg-menu a:hover{ 
    color: #CFCFFF;
  }
  
    .bg-jumbotron { 
    background-color: var(--gaiacolor-secondary); /* ??? */
    color: #ffffff;
  }
  
     .bg-menu { 
    background-color: var(--gaiacolor); /* ??? */
    color: white;
  }
  
     .btn-gaia { 
    background-color: var(--gaiacolor-secondary); /* ??? */
    color: white;
    font-weight: 600;
    font-size: 1.1rem;
    outline-width: 2px;
    outline-style: solid;
    outline-color: white;
    cursor: pointer;
    align-items: center;
  }
  
  
  .nav-link.disabled,.nav-link:disabled{
					color:var(--link-color);
					pointer-events:none;
					cursor:default
					}
					
					
  
       .btn-gaia:hover { 
    background-color: var(--gaiacolor); /* ??? */
    color: white;
  }
  
  
      .inspiration{
    text-decoration: underline;		  
    cursor: pointer;
    color: #00C3FF;
  }
  
       .inspiration-tw{
    text-decoration: underline;		  
    cursor: pointer;
    color: #FF4C4C;
  }
  
  .imageIcon img {
            vertical-align: middle; /* Align the image vertically */
            transition: transform 0.3s ease-in-out; /* Add a smooth transition effect */
        }
		
.imageIcon img:hover {
            background-color: transparent;
            transform: scale(1.1);
        }
  
  .imageIcon img:not(:hover) {
            background-color: transparent;
            transform: scale(1); /* Return to regular size when not hovered */
        }
  
  
   #theme-toggle::before {
  content: var(--theme-image);
  color: white;
  }
    
    /* Set height of the grid so .sidenav can be 100% (adjust as needed) */
    .row.content {height: auto}
    
    /* Set gray background color and 100% height */
    .sidenav {
        height: auto;
        padding: 15px;
    }
    
    /* Set black background color, white text and some padding */
    footer {
background-color: var(--footer-bg);
    color: var(--footer-color);
      padding: 15px;
      list-style: none;
    }
	
  footer a.disabled,.footer a:disabled{
					color:var(--footer-link-color-disabled);
					pointer-events:none;
					cursor:default
					}
					
  footer a{
					color:var(--footer-link-color);
					}
        
     /* Set black background color, white text and some padding */
    .bg-section {
    background: var(--gaiacolor-section);
    color: white;
    width: 100%;
    padding: 0.5rem 0;
    margin: 0px;
    }
	
	
   .bg-jumbotron button {
    background: #ffffff;
    color: hsla(240, 65%, 50%, 1);
    font-weight: bold;
    border: 3px solid #fff;
    border-radius: 5px;
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 20px;
    margin: 20px auto 0;
    }
	
	   .bg-jumbotron button a{
	text-decoration: none;
    }
	
.bg-jumbotron img{
    background: #fff;
    width: 50px;
    height: 50px;
}
	
	
    
    /* On small screens, set height to 'auto' for sidenav and grid */
    @media screen and (max-width: 767px) {
      .sidenav {
        height: auto;
        padding: 15px;
      }
      .row.content {height:auto;} 
    }

body {
  background-color: var(--bg-color);
  color: var(--text-color);
}