html{
  /* Card styling */
  /*
  --sd-color-card-border:  var(--sd-color-dark);
  --sd-color-card-border-hover: var(--sd-color-primary);
  --sd-color-card-background: var(--sd-color-light);
  --sd-color-card-text: var(--sd-color-light-text);
  --sd-color-card-header: var(--sd-color-light-text);*/

  --sd-color-windows: rgb(0,120,212);
  --sd-color-rhel: rgb(204,0,0);
  --sd-color-ubuntu: rgb(233,84,32);
  --sd-color-macos: rgb(0,0,0);

  /* Dropdowns */
  --sd-fontsize-dropdown-title: 1rem;
  --sd-fontweight-dropdown-title: 600;

  /* Shadow *//*
  --sd-color-shadow: var(--sd-color-dark)*/
  
  /* Tabs, if used */
  /*
  --sd-color-tabs-label-active: var(--sd-color-primary);
  --sd-color-tabs-label-hover: var(--sd-color-primary-highlight);
  --sd-color-tabs-label-inactive: var(--sd-color-primary);

  --sd-color-tabs-underline-active: var(--sd-color-primary);
  --sd-color-tabs-underline-hover: var(--sd-color-primary-transparent);
  --sd-color-tabs-underline-inactive: var(--sd-color-muted-transparent);*/
}

/* ----------------------------- */
/* Design elements for dropdowns */
/* ----------------------------- */
/*
.nn-dropdown {
    border: 1px solid var(--sd-color-dark);
}

.nn-dropdown-title {
    background-color: var(--sd-color-dark);
    color: var(--sd-color-dark-text);
    font-weight: 700;
}

*/
/* ---------------------------------- */
/* Design elements for download cards */
/* ---------------------------------- */

/* General download card */
.general-card {
    border: 1px solid var(--sd-color-dark);
    border-left: 0.35rem solid var(--sd-color-success);
    border-radius: 0.6rem;
}
/* Hover state */
.general-card:hover {
    border-color: var(--sd-color-primary);
    box-shadow: 0 0.15rem 0.5rem;
}
/* Title */
.general-card-title {
    color: var(--sd-color-success);
}
/* Hover state */
.general-card:hover .general-card-title {
    color: var(--sd-color-primary);
}

/* Windows download card */
.windows-card {
    border: 1px solid var(--sd-color-dark);
    border-left: 0.35rem solid var(--sd-color-windows);
    border-radius: 0.6rem;
}
/* Hover state */
.windows-card:hover {
    border-color: var(--sd-color-primary);
    box-shadow: 0 0.15rem 0.5rem;
}
/* Title */
.windows-card-title {
    color: var(--sd-color-windows);
}
/* Hover state */
.windows-card:hover .windows-card-title {
    color: var(--sd-color-primary);
}

/* Ubuntu download card */
.ubuntu-card {
    border: 1px solid var(--sd-color-dark);
    border-left: 0.35rem solid var(--sd-color-ubuntu);
    border-radius: 0.6rem;
}
/* Hover state */
.ubuntu-card:hover {
    border-color: var(--sd-color-primary);
    box-shadow: 0 0.15rem 0.5rem;
}
/* Title */
.ubuntu-card-title {
    color: var(--sd-color-ubuntu);
}
/* Hover state */
.ubuntu-card:hover .ubuntu-card-title {
    color: var(--sd-color-primary);
}

/* RHEL download card */
.rhel-card {
    border: 1px solid var(--sd-color-dark);
    border-left: 0.35rem solid var(--sd-color-rhel);
    border-radius: 0.6rem;
}
/* Hover state */
.rhel-card:hover {
    border-color: var(--sd-color-primary);
    box-shadow: 0 0.15rem 0.5rem;
}
/* Title */
.rhel-card-title {
    color: var(--sd-color-rhel);
}
/* Hover state */
.rhel-card:hover .rhel-card-title {
    color: var(--sd-color-primary);
}

/* macOS download card */
.macos-card {
    border: 1px solid var(--sd-color-dark);
    border-left: 0.35rem solid var(--sd-color-macos);
    border-radius: 0.6rem;
}
/* Hover state */
.macos-card:hover {
    border-color: var(--sd-color-primary);
    box-shadow: 0 0.15rem 0.5rem;
}
/* Title */
.macos-card-title {
    color: var(--sd-color-macos);
}
/* Hover state */
.macos-card:hover .macos-card-title {
    color: var(--sd-color-primary);
}

.landing-site-card-footer {
    color: hsl(183, 81%, 39%);
}