:root {
  --svg-filter-black : none;
  --svg-filter-white : invert(100%);
  /* @formatter:off */
  /* https://angel-rs.github.io/css-color-filter-generator/ */
  --svg-filter-048fec: brightness(0) saturate(100%) invert(45%) sepia(89%) saturate(4233%) hue-rotate(184deg) brightness(102%) contrast(97%); /* (0.4 loss) */
  --svg-filter-262626: brightness(0) saturate(100%) invert(11%) sepia(33%) saturate(0%)    hue-rotate(231deg) brightness(106%) contrast(93%); /* (0.0 loss) */
  --svg-filter-43b5fc: brightness(0) saturate(100%) invert(57%) sepia(40%) saturate(765%)  hue-rotate(162deg) brightness(103%) contrast(98%); /* (0.1 loss) */
  /* @formatter:on */
}

:root, [data-bs-theme=light] {
  --card-color                  : var(--std-fg-color);
  --card-background-color       : var(--gray-white);
  --card-border-color           : var(--gray-white);
  --card-box-shadow             : 4px 2px 10px 0 rgb(0, 0, 0, 0.02), 0 0 6px 0 rgb(0, 0, 0, 0.01);
  --card-hover-background-color : var(--gray-10);
  --card-hover-border-color     : var(--gray-10);
  --card-hover-box-shadow       : 10px 10px 30px 0 rgb(217, 217, 217, 0.5), -10px -10px 30px 0 rgb(255, 255, 255, 0.3);
  --svg-filter-black-and-white  : var(--svg-filter-262626);
  --svg-filter-constant         : var(--svg-filter-048fec);
  --svg-filter-blue-and-white   : var(--svg-filter-048fec);
  --svg-filter-blue-and-blue    : var(--svg-filter-048fec);
  --getting-started-bg          : url(../img/backgrounds/style01-light-1310x268.png);
  --latest-release-block-bg     : url(../img/backgrounds/style02-light-1280x368.png);
  --latest-kos-studio-bg        : url(../img/gradients/gradient-04-1280x368.png);
}

[data-bs-theme=dark] {
  --card-color                  : var(--std-fg-color);
  --card-background-color       : var(--gray-75);
  --card-border-color           : var(--card-background-color);
  --card-box-shadow             : 0 1px 2px 0px rgb(16, 24, 40, 0.05);
  --card-hover-background-color : var(--gray-80);
  --card-hover-border-color     : var(--gray-75);
  --card-hover-box-shadow       : 7px 7px 20px 0 rgb(38, 38, 38, 1), -7px -7px 30px 0 rgb(44, 43, 43, 1);
  --svg-filter-black-and-white  : var(--svg-filter-white);
  --svg-filter-blue-and-white   : var(--svg-filter-white);
  --svg-filter-blue-and-blue    : var(--svg-filter-43b5fc);
  --getting-started-bg          : url(../img/backgrounds/style01-dark-1280x298.png);
  --latest-release-block-bg     : url(../img/backgrounds/style02-light-1280x368.png);
  --latest-kos-studio-bg        : url(../img/gradients/gradient-03-1280x368.png);
}

img[src$='svg']:not(img[class='kos-logo']) {
  filter : var(--svg-filter-constant);
}

img[src$='svg']:not(img[class='kos-logo']).color-changes-blue-and-white {
  filter : var(--svg-filter-blue-and-white);
}

img[src$='svg']:not(img[class='kos-logo']).color-changes-blue-and-blue {
  filter : var(--svg-filter-blue-and-blue);
}

img[src$='svg']:not(img[class='kos-logo']).color-changes-black-and-white {
  filter : var(--svg-filter-black-and-white);
}

/*--------------------------------------------------------------------------------------*/

.block-title {
  font-weight : bold;
  font-size   : 32px;
  line-height : 36px;
}

.block-text {
  font-size   : 24px;
  line-height : 28px;
}

.latest-kos-studio {
  align-items         : center;
  display             : flex;
  flex-direction      : column;
  justify-content     : center;
  gap                 : 32px;
  background-image    : var(--latest-kos-studio-bg);
  background-position : center;
  background-repeat   : no-repeat;
  background-size     : cover;
  border-radius       : 10px;
  margin              : auto;
  padding             : 64px;
  text-align          : center;
  vertical-align      : middle;
}

/*------ Page Title --------------------------------------------------------------------*/

.std_top-of-page .title {
  font-size   : 56px;
  font-weight : bold;
  line-height : 64px;
}

.std_top-of-page .text {
  font-size   : 24px;
  line-height : 32px;
}

.std_top-of-page > div {
  background-position : center;
  background-repeat   : no-repeat;
  background-size     : cover;
  margin-left         : calc(50% - 50vw);
  margin-right        : calc(50% - 50vw);
}

/*------ Section Icon/Title/Text/Button ------------------------------------------------*/

.section-icon {
  margin-bottom : 32px;
  text-align    : center;
}

.section-icon img {
  filter     : var(--svg-filter-black-and-white) !important;
  width      : 80px;
  height     : 80px;
  text-align : center;
}

.section-title {
  font-weight    : bold;
  font-size      : 32px;
  line-height    : 36px;
  padding-bottom : 16px;
  text-align     : center;
}

.section-text {
  font-size      : 20px;
  line-height    : 24px;
  padding-bottom : 32px;
  text-align     : center;
}

.section-button {
  text-align : center;
}

/*------ Getting Started Block ---------------------------------------------------------*/

.getting-started-block {
  background-color    : var(--blue-05);
  background-image    : var(--getting-started-bg);
  background-position : center;
  background-repeat   : no-repeat;
  background-size     : cover;
  border-radius       : 11px;
  padding             : 39px;
}

.getting-started-block .section-title {
  font-size   : 24px;
  line-height : 32px;
}

.getting-started-block .section-text {
  font-size    : 20px;
  line-height  : 30px;
  margin-left  : auto;
  margin-right : auto;
  max-width    : 884px;
  text-align   : center;
}

/*------ Latest Release Block ----------------------------------------------------------*/

.latest-release-block {
  background-image  : var(--latest-release-block-bg);
  /*background-position: center;*/
  background-repeat : no-repeat;
  background-size   : cover;
  border-radius     : 10px;
  color             : var(--gray-white);
  margin            : auto;
  padding           : 150px 64px 64px 64px;
}

.latest-release-block img {
  filter : none !important;
}

/*------ New-to-Studio Block -----------------------------------------------------------*/

.new-to-studio-block {
  background-image    : url(../img/backgrounds/style01-light-1310x268.png);
  background-position : center;
  background-repeat   : no-repeat;
  background-size     : cover;
  border-radius       : 10px;
  color               : var(--gray-dark);
  margin              : auto;
  padding             : 64px;
}

.new-to-studio-block div {
  margin    : auto;
  max-width : 900px;
}

/*------ (0) Generic Cards  ------------------------------------------------------------*/

.kos-cards {
  display         : flex;
  flex-wrap       : wrap;
  gap             : 32px;
  justify-content : space-evenly;
}

.kos-card {
  background-color : var(--card-background-color);
  background-size  : cover;
  border           : 1px solid var(--card-border-color);
  border-radius    : 4px;
  box-shadow       : var(--card-box-shadow);
  color            : var(--card-color);
  cursor           : pointer;
  flex             : 1 1 auto;
  min-width        : 300px;
}

.kos-card:hover {
  background-color : var(--card-hover-background-color);
  border           : 1px solid var(--card-hover-border-color);
  box-shadow       : var(--card-hover-box-shadow);
}

.kos-card .card-title {
  font-size   : 24px;
  font-weight : bold;
  line-height : 28px;
}

.kos-card .card-text {
  font-size   : 16px;
  line-height : 24px;
}

.kos-card .card-link {
  font-size   : 16px;
  font-weight : bold;
  line-height : 22px;
}

/*------ (1) Feature Cards (three per row) ---------------------------------------------*/

.kos-cards.kos-feature-cards {
  justify-content : center;
}

.kos-card.kos-feature-card {
  flex-basis : 30%;
  max-width  : 400px;
}

.kos-card.kos-feature-card .card-icon img {
  height : 40px;
}

/*------ (2) Download Cards (three per row) --------------------------------------------*/

.kos-card.kos-download-card {
  flex-basis : 30%;
}

/*------ (3) Bootloader Cards (two per row) --------------------------------------------*/

.kos-cards.kos-bootloader-cards {
  justify-content : center;
}

.kos-card.kos-bootloader-card {
  flex-basis : 47%;
  max-width  : 644px;
}

/*------ (4) Related Article Cards (three per row) -------------------------------------*/

.kos-cards.kos-related-article-cards {
  gap          : 64px;
  margin-left  : 32px;
  margin-right : 32px;
}

.kos-card.kos-related-article-card {
  background-color : inherit;
  border           : 1px solid var(--page-border-color);
  box-shadow       : none;
  flex-basis       : 22%;
  max-width        : 405px;
  padding          : 24px;
}

.kos-card.kos-related-article-card:hover {
  outline : 1px solid var(--page-border-color);
}

.kos-card.kos-related-article-card .card-title {
  font-size   : 20px;
  line-height : 27px;
}

/*------ (5) Latest Update Cards (two per row) -----------------------------------------*/

.kos-card.kos-latest-update-card {
  flex-basis : 47%;
}

.kos-card.kos-latest-update-card .card-img img {
  border-radius : 3px;
  filter        : none;
  width         : 100%;
  text-align    : center;
}

/*------ (6) Why KOS Cards (four per row) ----------------------------------------------*/

.kos-card.kos-why-card {
  box-shadow : none;
  cursor     : initial;
  flex-basis : 22%;
  max-width  : 200px;
}

.kos-card.kos-why-card:hover {
  background-color : var(--card-background-color);
  border-color     : var(--card-border-color);
}

.kos-card.kos-why-card .card-title {
  color       : var(--blue);
  font-size   : 24px;
  line-height : 32px;
}

/*------ (7) Video Cards (three per row) -----------------------------------------------*/

.kos-cards.kos-video-cards {
  gap             : 48px;
  justify-content : flex-start;
}

.kos-cards.kos-related-video-cards {
  justify-content : space-evenly;
}

.kos-card.kos-video-card {
  flex-basis : 30%;
  max-width  : 405px;
}

.kos-card.kos-video-card .card-category {
  color       : var(--blue);
  font-weight : bold;
}

.kos-card.kos-video-card .card-img img {
  border-top-left-radius  : 4px;
  border-top-right-radius : 4px;
  width                   : 100%;
}

.kos-card.kos-video-card .card-tags span {
  border-radius : 2px;
  font-size     : 14px;
  margin        : 0 4px;
  padding       : 2px 8px;
}

.kos-card.kos-video-card .card-tags span:first-child {
  margin-left : 0;
}

.kos-card.kos-video-card .card-tags span:last-child {
  margin-right : 0;
}

/* @formatter:off */
/* These names must coincide with the VideoTag enumerated names */
.kos-card.kos-video-card .card-tags span.beginner        { background-color: var(--light-orange); color: var(--orange); }
.kos-card.kos-video-card .card-tags span.core_concepts   { background-color: var(--light-orange); color: var(--orange); }
.kos-card.kos-video-card .card-tags span.kos_studio      { background-color: var(--light-blue);   color: var(--blue);   }
.kos-card.kos-video-card .card-tags span.os_modification { background-color: var(--light-red);    color: var(--red);    }
.kos-card.kos-video-card .card-tags span.system_design   { background-color: var(--light-green);  color: var(--green);  }
.kos-card.kos-video-card .card-tags span.tutorial        { background-color: var(--light-purple); color: var(--purple); }
/* @formatter:on */

.kos-card.kos-video-card .card-info {
  color : var(--gray-50);
}

/*------ (8) Step Cards (two per row) --------------------------------------------------*/

.kos-card.kos-step-card {
  flex-basis : 47%;
}

/*------ (9) More Info Cards (four per row) --------------------------------------------*/

.kos-cards.kos-more-info-cards {
  gap : 16px;
}

.kos-card.kos-more-info-card {
  background-color : inherit;
  border           : none;
  box-shadow       : none;
  flex-basis       : 22%;
  gap              : 0;
  min-width        : 200px;
  padding          : 12px;
  text-align       : center;
}

.kos-card.kos-more-info-card:hover {
  outline : 1px solid var(--page-border-color);
}

.kos-card.kos-more-info-card .card-title {
  font-size   : 20px;
  line-height : 28px;
}

.kos-card.kos-more-info-card .card-icon img {
  width : 32px;
}

/*------ (10) Java Doc Cards (three per row) --------------------------------------------*/

.kos-card.kos-java-doc-card {
  flex-basis: 30%;
}

/*------ Other -------------------------------------------------------------------------*/

.hseparator {
  background-color : var(--page-border-color);
  height           : 110px;
  margin           : auto;
  position         : relative;
  width            : 1px;
}

/*------ FAQs --------------------------------------------------------------------------*/

.accordion .accordion-body {
  margin-top    : 13px;
  margin-bottom : 4px;
}

.link-primary {
  color : var(--light-fg-color) !important;
}

.link-primary:hover {
  color   : var(--light-fg-color) !important;
  outline : none;
}

.section.faqs {
  border        : 1px solid var(--gray-40);
  border-radius : 10px;
  padding       : 30px;
}

.section.faqs .section-title {
  text-align : left;
}