@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap');

:root {
  --c-text-primary: #282a32;
  --c-text-secondary: #686b87;
  --c-text-action: #404089;
  --c-accent-primary: #434ce8;
  --c-border-primary: #eff1f6;
  --c-background-primary: #ffffff;
  --c-background-secondary: #fdfcff;
  --c-background-tertiary: #ecf3fe;
  --c-background-quaternary: #ebedf5;
}


/* Flex Container To Hold The Heading, Dark Mode Toggle & Back Button */
.header-row {
  display: flex;
  align-items: center;
  justify-content: space-between; /* heading left, actions right */
  gap: 1rem;
}

/* Actions Group Keeps Dark Mode Toggle & Back Button Together In The Header */
.header-actions {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

/* Mobile fallback that stacks the header row vertically on narrow screens */
@media (max-width: 480px) {
  .header-row {
    flex-direction: column;
    align-items: stretch;
  }
  .header-actions {
    justify-content: flex-end; /* push actions to the right on single row */
  }
  .back-button { align-self: flex-end; }
}

.main-header h1 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
}

/* Applies The Quicksand Font To All Text */
* {
  font-family: 'Quicksand', sans-serif;
}

/* Dark mode toggle button */
.DarkModeToggle {
  cursor: pointer;
  user-select: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Scales up the icon */
.DarkModeIcon::before {
  content: "☀️";
  font-size: 1.8rem; /* adjust slightly if needed */
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Optional: subtle hover effect */
.DarkModeToggle:hover .DarkModeIcon::before {
  transform: scale(1.1);
}

/* Change the icon when dark mode is active */
.DarkModeToggle input:checked + .DarkModeIcon::before {
  content: "🌙";
  transform: rotate(360deg); /* fun little spin animation */
}

/* Changes how to body behaves when dark mode is toggled */
body.dark-mode {
  background-color: #121212;
  color: #f0f0f0;
}

.dark-mode .card {
  background-color: #1e1e1e;
  border-color: #333;
}

.dark-mode .horizontal-tabs a.active {
  background-color: #333;
  color: #00ffff;
}

/* Styling for back button */
.back-button {
  display: inline-block;
  padding: 8px 16px;
  background-color: #42f5c2; /* Kraken blue */
  color: #000; /* Black text */
  text-decoration: none;
  font-weight: bold;
  border-radius: 6px;
  transition: background 0.3s ease;
}

/* Styling for back button when hovering */
.back-button:hover {
  background-color: #34d3a6; /* Slightly darker on hover */
}

body {
  line-height: 1.5;
  min-height: 100vh;
  background-color: var(--c-background-secondary);
  color: var(--c-text-primary);
}

img {
  display: block;
  max-width: 100%;
}

:focus {
  outline: 0;
}

.responsive-wrapper {
  width: 95%;
  padding-top: 2%;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
}

.header-navigation {
  display: flex;
  flex-grow: 1;
  align-items: center;
  justify-content: space-between;
}
@media (max-width: 1200px) {
  .header-navigation {
    display: none;
  }
}

.header-navigation-links {
  display: flex;
  align-items: center;
}
.header-navigation-links a {
  text-decoration: none;
  color: var(--c-text-action);
  font-weight: 500;
  transition: 0.15s ease;
}
.header-navigation-links a + * {
  margin-left: 1.5rem;
}
.header-navigation-links a:hover, .header-navigation-links a:focus {
  color: var(--c-accent-primary);
}

.header-navigation-actions {
  display: flex;
  align-items: center;
}
.header-navigation-actions > .avatar {
  margin-left: 0.75rem;
}
.header-navigation-actions > .icon-button + .icon-button {
  margin-left: 0.25rem;
}
.header-navigation-actions > .button + .icon-button {
  margin-left: 1rem;
}

.button {
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 1em;
  height: 40px;
  border-radius: 8px;
  line-height: 1;
  border: 2px solid var(--c-border-primary);
  color: var(--c-text-action);
  font-size: 0.875rem;
  transition: 0.15s ease;
  background-color: var(--c-background-primary);
}

.button i {
  margin-right: 0.5rem;
  font-size: 1.25em;
}
.button span {
  font-weight: 500;
}
.button:hover, .button:focus {
  border-color: var(--c-accent-primary);
  color: var(--c-accent-primary);
}

.icon-button {
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  color: var(--c-text-action);
  transition: 0.15s ease;
}
.icon-button i {
  font-size: 1.25em;
}
.icon-button:focus, .icon-button:hover {
  background-color: var(--c-background-tertiary);
  color: var(--c-accent-primary);
}

.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
}

.main-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}
.main-header h1 {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.25;
}
@media (max-width: 550px) {
  .main-header h1 {
    margin-bottom: 1rem;
  }
}

#searchbar{
	padding:15px;
	border-radius: 10px;
}

input[type=text] {
	width: 30%;
}

.search {
  width: 110%;
  max-width: 340px;
}
.search input {
  height: 40px;
  border-radius: 8px;
  font-size: 16px;
  transition: 0.15s ease;
  width: 100%;
  line-height: 1;
}
.search input::-moz-placeholder {
  color: var(--c-text-action);
}
.search input:-ms-input-placeholder {
  color: var(--c-text-action);
}
.search input::placeholder {
  color: var(--c-text-action);
}

.search button {
  border: 0;
  background-color: transparent;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  color: var(--c-text-action);
  height: 40px;
}

.horizontal-tabs {
  font-weight: 600;
  font-size: 16px;

  margin-top: 1.5rem;
  display: flex;
  align-items: center;
  overflow-x: auto;
}
@media (max-width: 1000px) {
  .horizontal-tabs {
    scrollbar-width: none;
    position: relative;
  }
  .horizontal-tabs::-webkit-scrollbar {
    display: none;
  }
}
.horizontal-tabs a {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  height: 48px;
  padding: 0 0.25rem;
  color: inherit;
  border-bottom: 3px solid transparent;
  text-decoration: none;
  transition: 0.15s ease;
}
.horizontal-tabs a:hover, .horizontal-tabs a:focus, .horizontal-tabs a.active {
  color: var(--c-accent-primary);
  border-bottom-color: var(--c-accent-primary);
}
.horizontal-tabs a + * {
  margin-left: 1rem;
}

.content-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding-top: 3rem;
  margin-top: -1px;
  border-top: 1px solid var(--c-border-primary);
}

.content-header-intro h2 {
  font-size: 1.25rem;
  font-weight: 600;
}
.content-header-intro p {
  color: var(--c-text-secondary);
  margin-top: 0.25rem;
  font-size: 0.875rem;
  margin-bottom: 1rem;
}

@media (min-width: 800px) {
  .content-header-actions a:first-child {
    display: none;
  }
}

.content {
  border-top: 1px solid var(--c-border-primary);
  margin-top: 2rem;
  display: flex;
  align-items: flex-start;
}

.content-panel {
  display: none;
  max-width: 280px;
  width: 25%;
  padding: 2rem 1rem 2rem 0;
  margin-right: 3rem;
}
@media (min-width: 800px) {
  .content-panel {
    display: block;
  }
}

.vertical-tabs {
  font-weight: 600;
  font-size: 16px;

  display: flex;
  flex-direction: column;
}
.vertical-tabs a {
  display: flex;
  align-items: center;
  padding: 0.75em 1em;
  background-color: transparent;
  border-radius: 8px;
  text-decoration: none;
  color: var(--c-text-action);
  transition: 0.15s ease;
}
.vertical-tabs a:hover, .vertical-tabs a:focus, .vertical-tabs a.active {
  background-color: var(--c-background-tertiary);
  color: var(--c-accent-primary);
}
.vertical-tabs a + * {
  margin-top: 0.25rem;
}

.content-main {
  padding-top: 2rem;
  padding-bottom: 6rem;
  flex-grow: 1;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  -moz-column-gap: 1.5rem;
       column-gap: 1.5rem;
  row-gap: 1.5rem;
}
@media (min-width: 600px) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1200px) {
  .card-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.card {
  background-color: var(--c-background-primary);
  box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  display: list-item;	
}

.card-header {
  font-weight: 600;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding-top: 5%;
  padding-left: 5%;
  padding-right: 5%;
}
.card-header div {
  display: flex;
  align-items: center;
}
.card-header div span {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.card-header div span img {
  max-height: 100%;
}
.card-header div h3 {
  margin-left: 0.75rem;
}

.toggle span {
  display: block;
  width: 40px;
  height: 24px;
  border-radius: 99em;
  background-color: var(--c-background-quaternary);
  box-shadow: inset 1px 1px 1px 0 rgba(0, 0, 0, 0.05);
  position: relative;
  transition: 0.15s ease;
}
.toggle span:before {
  content: "";
  display: block;
  position: absolute;
  left: 3px;
  top: 3px;
  height: 18px;
  width: 18px;
  background-color: var(--c-background-primary);
  border-radius: 50%;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.15);
  transition: 0.15s ease;
}
.toggle input {
  clip: rect(0 0 0 0);
  -webkit-clip-path: inset(50%);
          clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}
.toggle input:checked + span {
  background-color: var(--c-accent-primary);
}
.toggle input:checked + span:before {
  transform: translateX(calc(100% - 2px));
}
.toggle input:focus + span {
  box-shadow: 0 0 0 4px var(--c-background-tertiary);
}

.card-body {
  font-weight: 500;
  font-size: 16px;

  padding-left: 5%;
  padding-right: 5%;
}

.card-footer {
  font-weight: 500;

  padding-left: 5%;
  padding-right: 5%;
  padding-bottom: 5%;

  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 50%;
}
.card-footer a {
  color: var(--c-text-action);
  text-decoration: none;
  font-size: 1rem;
}

html::-webkit-scrollbar {
  width: 12px;
}
html::-webkit-scrollbar-thumb {
  background-color: var(--c-text-primary);
  border: 4px solid var(--c-background-primary);
  border-radius: 99em;
}

.cmd {
  font-style: italic;
  font-size: small;
}