.searchinput { 
    background-color: hsla(260, 100%, 55%, 1); /* ??? */
    color: white;
  }

        ul, li {
            list-style: none;
          }
		  

  .bg-1 { 
    background-color: #9a69f3; /* Green */
    color: #ffffff;
  }
  .bg-2 { 
    background-color: #4800cc; /* Dark Blue */
    color: #ffffff;
  }
  .bg-3 { 
    background-color: #222222; /* White */
    color: #ffffff;
  }
  .bg-4 { 
    background-color: #33333; /* Black Gray */
    color: #ffffff;
  }
  .container-fluid {
    padding-top: 70px;
    padding-bottom: 70px;
  }

.bg-alert {
  background-color: #8787EB;
  color: #FFFFFF;
    display: flex;
    align-items: center;
	padding: 0.5rem 0;
    margin: 0px;
}

.bg-alert img{
  background-color: #8787EB;
  color: #FFFFFF;
}

.bg-alert button{
    background: #ffffff;
    color: hsla(260, 65%, 50%, 1);
    font-weight: bold;
    border: 3px solid #fff;
    border-radius: 5px;
    font-size: 20px;
}

.btn-close:hover {
cursor: pointer;
}

.bg-container {
  background-color: #111111;
  color: #ffffff;
}

   .bg-menu { 
    background-color: hsla(260, 100%, 40%, 1); /* ??? */
    color: white;
  }
  
      .bg-menu a{ 
    color: white;
  }
  
      .bg-menu a:hover{ 
    color: #CFCFFF;
  }
  
    .bg-jumbotron { 
    background-color: hsla(260, 100%, 55%, 1); /* ??? */
    color: #ffffff;
  }
  
     .bg-menu { 
    background-color: hsla(260, 100%, 40%, 1); /* ??? */
    color: white;
  }
  
     .btn-pot { 
    background-color: hsla(260, 100%, 55%, 1); /* ??? */
    color: white;
    font-weight: 600;
    font-size: 1.1rem;
    outline-width: 2px;
    outline-style: solid;
    outline-color: white;
    cursor: pointer;
    align-items: center;
  }
  
.image-card {
    text-align: center;
    margin: 0 10px;
    flex: 0 0 calc(50% - 20px);
    max-width: 300px;
    margin-bottom: 20px;
}
.image-card img {
    width: 100%;
    max-width: 300px;
    height: auto;
    border-radius: 5px;
}
.image-card h3 {
    margin-top: 10px;
    font-size: 18px;
}
.image-card a {
    display: block;
    margin-top: 5px;
    color: blue;
    text-decoration: none;
}
.image-card a:hover {
    text-decoration: underline;
}

section {
    background: white;
    color: #111111;
    padding: 20px;
    align-items: center;
    text-align: center;
}

section.dark-mode {
    background-color: #111111;
    color: white;
}

.section-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
  
  
       .btn-pot:hover { 
    background-color: hsla(260, 100%, 40%, 1); /* ??? */
    color: white;
  }
  
  
      .inspiration{
    text-decoration: underline;		  
    cursor: pointer;
    color: #00C3FF;
  }
  
       .inspiration-tw{
    text-decoration: underline;		  
    cursor: pointer;
    color: #FF4C4C;
  }
  
         .inspiration-sc{
    text-decoration: underline;		  
    cursor: pointer;
    color: #f9a83a;
  }
  
    
    /* Set height of the grid so .sidenav can be 100% (adjust as needed) */
    .row.content {height: auto}
    
        
   .bg-section {
    background: hsla(260, 65%, 65%, 1);
    color: white;
    width: 100%;
    padding: 0.5rem 0;
    margin: 0px;
    }
	
	
   .bg-jumbotron button {
    background: #ffffff;
    color: hsla(260, 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: #111111;
  color: #ffffff;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}