/* CSS STYLES */

/* FONT */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');

/* COLOR PALETTE */
:root {
  /* main colors */
  --market-text: #0c0e0d;
  
  --market-background: #f2f3f2;
  --market-background-card: color-mix(in srgb, var(--market-background) 90%, #2cc98f);
  
  --market-primary: #2cc98f;
  
  --market-secondary: #d0d2d170; /* --market-background-songlist */
  
  --market-breadcrumbs: #b9bbba70; /* --market-background-songlist-active */
  
  /* hovered */
  --market-text-hover: color-mix(in srgb, var(--market-text) 75%, #2cc98f);
  
  --market-background-card-hover: color-mix(in srgb, var(--market-background) 80%, #2cc98f);
  
  --market-primary-hover: color-mix(in srgb, var(--market-primary) 50%, #0c0e0d);
  
  --market-breadcrumbs-hover: color-mix(in srgb, var(--market-primary) 40%, #f2f3f2);
}

html.dark-mode {
  /* main colors */
  --market-text: #f2f4f3;
  
  --market-background: #0c0d0c;
  --market-background-card: color-mix(in srgb, var(--market-background) 95%, #34d399);
  
  --market-primary: #34d399;
  
  --market-secondary: #2d2f2e; /* --market-background-songlist */
  
  --market-breadcrumbs: #434544; /* --market-background-songlist-active */
  
  /* hovered */
  --market-text-hover: color-mix(in srgb, var(--market-text) 75%, #34d399);
  
  --market-background-card-hover: color-mix(in srgb, var(--market-background) 85%, #34d399);
  
  --market-primary-hover: color-mix(in srgb, var(--market-primary) 50%, #f2f4f3);
  
  --market-breadcrumbs-hover: color-mix(in srgb, var(--market-primary) 40%, #0c0d0c);
}

/* LAYOUT */
/* body */
body {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  background: var(--market-background);
  color: var(--market-text);
}

/* titles */
h1, h2, h3, h4, h5 {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
}

/* title sizes*/
html {font-size: 100%;} /* 16px */
h1 {font-size: 4.210rem; /* 67.36px */}
h2 {font-size: 3.158rem; /* 50.56px */}
h3 {font-size: 2.369rem; /* 37.92px */}
h4 {font-size: 1.777rem; /* 28.48px */}
h5 {font-size: 1.333rem; /* 21.28px */}
small {font-size: 0.750rem; /* 12px */}

/* paragraphs */
p {
  text-align: justify;
}

/* lists */
li {
  text-align: justify;
}

/* justified text word management */
.word {
  text-justify: inter-word;
}

/* CODE */
code {
  color: var(--market-primary);
  background: var(--market-secondary) !important;
  border-radius: 4px;
}

div.sourceCode {
  overflow: hidden;
  background: var(--market-background) !important;
}

pre.sourceCode code {
  background: var(--market-background) !important;
  opacity: 1;
  padding: 10px;
  margin: 0 auto;
}

/* NAVIGATION BAR */
/* nav bar*/
.navbar {
  font-family: 'Inter', sans-serif;
  background: var(--market-background);
  border-bottom: 2px solid var(--market-secondary);
  display: flex !important;
  align-items: center;
}

.navbar-container {
  display: flex !important;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.navbar-brand {
  flex: 0 0 auto;
}

.navbar-nav {
  flex: 1;
  display: flex;
  justify-content: center;
  gap: 1.5rem;
}

.quarto-navbar-tools {
  flex: 0 0 auto;
}

/* nav bar title */
.navbar-title {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 1.5rem;
}

.title-first {
  color: var(--market-primary);
  transition: color 0.3s ease;
}

.title-last {
  color: var(--market-text);
  transition: color 0.3s ease;
}

.navbar-brand:hover .title-first {
  color: var(--market-text);
}

.navbar-brand:hover .title-last {
  color: var(--market-primary);
}

/* nav bar links */
.nav-link {
  color: var(--market-text) !important;
  background: transparent;
  border-radius: 10px;
  transition: color 0.3s ease,
              background 0.3s ease;
}

/* nav bar link behaviour when hovered */
.nav-link:hover {
  color: var(--market-primary) !important;
  background: var(--market-secondary);

}

/* nav bar icons */
.quarto-navigation-tool {
  display: inline-flex;
  align-items: center;
  justify-content!importan: center;
  font-size: 1.3rem;
  color: var(--market-text) !important;
  opacity: 0.7 !important;
  transition: opacity 0.2s ease,
              transform 0.2s ease,
              color 0.2s ease;
  transform-origin: center;
}

/* nav bar icons behaviour when hovered */
.quarto-navigation-tool:hover {
  opacity: 1 !important;
  transform: scale(1.2) !important;
  color: var(--market-primary) !important;
}

.aa-SubmitIcon {
  font-size: 1.3rem !important;
  fill: var(--market-text) !important;
  opacity: 0.7 !important;
  transition: opacity 0.2s ease,
              transform 0.2s ease,
              color 0.2s ease;
}

.aa-SubmitIcon:hover {
  opacity: 1 !important;
  transform: scale(1.2) !important;
  fill: var(--market-primary) !important;
}

/* BREADCRUMBS */
/* breadcrumbs */
.breadcrumb {
  margin-top: -30px;
  padding-top: 0;
  display: flex;
  justify-content: center;
}

/* breadcrumb lists */
.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: end;
}

/* links before current page */
.breadcrumb li:not(:last-child)::after {
  display: inline-block;
  color: var(--market-breadcrumbs);
  margin: 0 0.6rem;
  content: ">";
  opacity: 0.7;
}

/* layout links breadcrumbs */
.breadcrumb a {
  color: var(--market-breadcrumbs);
  text-decoration: none;
  font-weight: 0.9rem;
}

/* behaviour when hovered */
.breadcrumb a:hover {
  color: var(--market-breadcrumbs-hover);
  text-decoration: underline;
}

/* layout current page */
.breadcrumb span[aria-current="page"] {
  color: var(--market-text);
  opacity: 0.8;
}

/* PAGE FOOTER */
/* footer */
.nav-footer {
  border-top: 2px solid var(--market-secondary);
  background: var(--market-background) !important;
  color: var(--market-text) !important;
}

/* footer content */
.nav-footer-left,
.nav-footer-center,
.nav-footer-right {
  font-weight: 500;
  color: var(--market-text) !important;
  opacity: 0.8;
}

/* footer links */
.nav-footer a {
  color: var(--market-primary); 
}

/* footer links behaviour when hovered */
.nav-footer a:hover {
  color: var(--market-primary-hover); 
}

/* footer icons */
.nav-footer .bi {
  font-size: 1.2rem; /* taille */
  color: var(--market-text) !important;
  opacity: 0.7;
  transition: opacity 0.2s ease,
              transform 0.2s ease,
              color 0.2s ease;
}

/* footer icons behaviour when hovered */
.nav-footer a:hover .bi {
  opacity: 1;
  color: var(--market-primary-hover) !important;
  transform: scale(1.2) !important;
}

/* BACK TO TOP */
/* back to top button */
#quarto-back-to-top {
  border-radius: 50%;
  font-size: 0;
  background: var(--market-primary);
  color: var(--market-background);
  transition: background 0.2s ease,
              color 0.2s ease;
}

/* back to top arrow*/
#quarto-back-to-top i {
  font-size: 1.2rem;
}

/* back to top button behaviour when hovered */
#quarto-back-to-top:hover {
  background: var(--market-background);
  color: var(--market-primary);
  border: 1px solid var(--market-primary);
}

/* IMAGE JOLLA THEME ABOUT */
.about-image {
  width: 20em !important;  
  height: 20em !important;
}