:root {
  --primary-color: #302AE6;
  --secondary-color: #536390;
  --font-color: #424242;
  --bg-color: #fff;
  --heading-color: #292922;
  --card-background: #fff;
  --highlight: #e6f7ff;
  --border-color: #ddd;
}

[data-theme="dark"] {
  --primary-color: #9A97F3;
  --secondary-color: #818cab;
  --font-color: #e1e1ff;
  --bg-color: #161625;
  --heading-color: #818cab;
  --card-background:#26263a;
  --highlight:#3f3f53;
  --border-color:#818cab;
}

body div {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  background-color: var(--bg-color);
  color: var(--font-color);
  font-family: sans-serif;
  font-size: 16px;
  line-height: 1.5;
}
.flux-logo {
  margin:auto;
  width:400px
}
.flux-tagline {
  text-align:center;
  font-size: 32px;
  font-family:"Google Sans",sans-serif;
  color: var(--font-color);
  padding-bottom:20px
}

.flux-tagline-small {
  color: var(--font-color);
  padding-top:10px;
  text-align:center;
  margin:auto;
}

.topbar {
  height: 40px;
  background-color: #dee4ee;
  padding-left: 16px;
  padding-right: 16px;
  align-items: center;
  flex-direction: row;
}
.topbar-menu {
  font-size: 24px;
  line-height: 24px;
  color: var(--font-color);
/*  color: #43597f; */
  font-weight: 100;
  text-decoration: none;
}
.topbar-title {
  line-height: 1;
  margin-left: 16px;
  color: var(--font-color);
/*  color: #43597f; */
}
.content {
  padding-left: 16px;
  padding-right: 16px;
  padding-top: 32px;
  padding-bottom: 32px;
}
.notification {
  background-color: var(--bg-color);
  padding: 16px;
  border: 1px solid #cbb9fe;
  margin-bottom: 32px;
}
.search {
  border: 1px solid rgba(0,0,0,0.2);
  padding-left: 15px;
  padding-right: 15px;
}
.cards {
  flex-direction: row;
  flex-wrap: wrap;
  margin-left: -16px;
  padding: 50px 200px;
  align-items: center;
  justify-content: center;
}
.card {
  margin-left: 16px;
  margin-top: 16px;
  padding: 16px;
  background-color: var(--card-background);
  border-radius: 8px;
  box-shadow: 2px 2px 6px rgba(0,0,0,0.1);
  min-width: 500px;
  max-width: 500px;
  flex: 1;
  min-height: 370px;  
}
.card-title {
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card-tags {
  flex-direction: row;
  flex-wrap: wrap;
  margin-left: -8px;
  background-color: var(--card-background);
}

.card-tag {
  margin-top: 8px;
  margin-left: 8px;
  font-size: 12px;
  font-weight: 500;
  padding-left: 4px;
  padding-right: 4px;
  border-radius: 8px;
  background-color: rgb(193, 61, 49);;
  border: 2px solid #ff968d;
  color: white;
}
.card-description {
  padding-top: 8px;
  border-top: 1px solid rgba(0,0,0,0.1);
  margin-top: 16px;
  font-size: 14px;
  background-color: var(--card-background);
  color: var(--font-color);
/*  color: #999; */
}

#releaseSearch {
  background-image: url('/http/flux-framework.org/assets/images/searchicon.png'); /* Add a search icon to input */
  background-position: 10px 12px; /* Position the search icon */
  background-repeat: no-repeat; /* Do not repeat the icon image */
  width: 100%; /* Full-width */
  font-size: 16px; /* Increase font-size */
  padding: 12px 20px 12px 40px; /* Add some padding */
  border: 1px solid #ddd; /* Add a grey border */
  margin-bottom: 12px; /* Add some space below the input */
}

.card > .card-description > .post-preview {
  background-color: var(--card-background);
}

.post-preview {
  background-color: var(--bg-color);
  border-radius: 3px;
}

.post-preview:hover:not(.header) {
  background-color: var(--highlight);
  cursor: pointer;
}


/*Shrinking for mobile*/
@media (max-width: 400px) {
  .list-group li { width: 30%; }
}

@media (max-width: 550px) {
  .list-group li { width: 40%; }
}
@media (max-width: 812px) and (min-width:550) {
  .flux-framework img {display: none !important}
}

@media (max-width: 812px) {
  .cards {
    padding: 0px; 
  }
  .card {
    min-width: 100%;
    max-width: 100%;
    min-height: 100px;
  }
  .flux-logo {
    margin:auto;
    width:200px
  }
  .flux-tagline {
    font-size: 26px;

  }
  .card img {
    display: none;
  }
  .topic-button {
  display: none;
  }
  .radiuss-graph {
    display: none;
  }
  #star-sort, #language-sort, #name-sort {
   padding: 5px;
  }
}

footer {
  margin: auto;
  padding-top:50px;
  margin-top: 100px;
  height: 200px;
  color: #036291 !important;
  background-color: var(--bg-color);
  color: var(--font-color);
  text-align:center;
}​

.list-group, .list-group-item {
  background-color: var(--bg-color) !important;
  color: var(--font-color) !important;
  border: 1px solid var(--border-color) !important;
}

  /*Simple css to style it like a toggle switch*/
  .theme-switch-wrapper {
    display: flex;
    align-items: left;
    padding-top: 20px;
    padding-left: 100px;

    em {
      margin-left: 10px;
      font-size: 1rem;
    }
  }
  .theme-switch {
    display: inline-block;
    height: 34px;
    position: relative;
    width: 60px;
  }
  
  .theme-switch input {
    display:none;
  }
  
  .slider {
    background-color: #ccc;
    bottom: 0;
    cursor: pointer;
    left: 0;
    position: absolute;
    right: 0;
    transition: .4s;
    top: 0;
  }
  
  .slider:before {
    background-color: #fff;
    bottom: 4px;
    content: "";
    height: 26px;
    left: 4px;
    position: absolute;
    transition: .4s;
    width: 26px;
/*    top: 15px;*/
  }
  
  input:checked + .slider {
    background-color:#015f8e;
  }
  
  input:checked + .slider:before {
    transform: translateX(26px);
  }
  
  .slider.round {
    border-radius: 34px;
  }
  
  .slider.round:before {
    border-radius: 50%;
  }