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

/* @font-face { */
  /* font-family: 'Berkeley Mono'; */
  /* font-style: normal; */
  /* font-weight: 400; */
  /* src: url("fonts/BerkeleyMonoRegular/BerkeleyMono-regular.otf"); */
  /* font-display: swap; */
/* } */

/* body { */
  /* font-family: 'Berkeley Mono', serif; */
/* } */

/* Purple as main colour */
:root {
  --purple: #A192EC;
  --pink: #ee3856;
  --orange: #fe8019;
  --yellow: #fab71c;

  font-family: serif;
}


:root.dark {
  /* define colours */
  /* --bg-dim: #1d2021; */
  --bg-dim: #1e1e1e;
  --bg0: #282828;
  --bg1: #3c3836;
  --bg2: #504945;
  --bg3: #665c54;

  --fg: #fef1d2;
  --fg0: #fbf1c7;
  --fg1: #faebb3;
  --fg2: #f8e8a0;
  --fg3: #bdae93;

  /* assign colours */
  --primary-color: var(--pink);
  
  --bg-0: var(--bg-dim);
  --bg-1: var(--bg0);
  --bg-2: var(--primary-color); 

  --note-header-bg: var(--bg1);
  --note-content-bg: var(--bg0);
  --hightlight-color: #444;

  --text-h: var(--fg0);
  --text-h-before: var(--primary-color);

  
  --text-0: var(--fg);
  --text-1: var(--fg0);
}

:root.light {
  /* define colours */
  --fg: #1d2021;
  --fg0: #282828;
  --fg1: #3c3836;
  --fg2: #504945;
  --fg3: #665c54;


  --bg-dim: #fef1d2;
  --bg0: #fbf1c7;
  --bg1: #faebb3;
  --bg2: #f8e8a0;
  --bg3: #bdae93;

  /* assign colours */
  --primary-color: var(--pink);
  
  --bg-0: var(--bg-dim);
  --bg-1: var(--bg0);
  --bg-2: var(--primary-color); 

  --note-header-bg: var(--bg1);
  --note-content-bg: var(--bg0);
  --hightlight-color: #ccc;

  --text-h: var(--fg2);
  --text-h-before: var(--primary-color);

  
  --text-0: var(--fg1);
  --text-1: var(--fg2);
}

h1, h2, h3, h4, h5 {
  color: var(--text-h);
  margin-bottom: 0em;
}

h1:before {
  color: var(--text-h-before);
}
h2:before {
  color: var(--text-h-before);
}
h3:before {
  color: var(--text-h-before);
}
h4:before {
  color: var(--text-h-before);
}
h5:before {
  color: var(--text-h-before);  
}
h6:before {
  color: var(--text-h-before);

}

li::marker {
   color: var(--primary-color);
}

pre {
  border: 2px solid var(--primary-color);
  margin-bottom: 0;
}

pre table td:nth-of-type(1) {
  min-width: 0px;
  padding-right: 20px;

  color: var(--fg3);
  
}

.note-content pre {
  background-color: var(--bg1) !important;
}

.page-header {
  color: var(--fg);
}

.subheader {
  color: var(--fg0);
}

.page-header > span  {
  font-size: 1.6em !important;
  
}

.subheader {
  font-size: 2em !important;
  margin-top: 3rem;
}

.subheader > span {
  font-size: 1.4em !important;
}

p {
  line-height: 1.6em;
  margin-top: 0.5em;
}

img {
  border: none;
  margin: auto;
  width: 100%;
}


:root.dark .note-container {
  border-radius: 6px !important;
  border-top: 1px solid var(--bg1);
  border-right: 1px solid var(--bg1);
  border-bottom: 1px solid var(--bg1);
  border-left: 4px solid var(--primary-color);
}

:root.light .note-container {
  border-radius: 6px !important;
  border-top: 1px solid var(--bg1);
  border-right: 1px solid var(--bg1);
  border-bottom: 1px solid var(--bg1);
  border-left: 4px solid var(--primary-color);
}

:root.light .note-container .note-icon {
  color: var(--fg1);
}

/* Purple code label on code block */
.code-label {
  background: var(--primary-color);
  margin-top: 0;
}

/* Blue clipboard SVG on code block */
:root.dark .clipboard-button svg {
  fill: var(--primary-color);
}

:root.light .clipboard-button svg {
  fill: var(--primary-color);
}


/* No size change and highlight when hovering foldable text */
summary:hover, summary:focus {
  padding: 0px !important;
  background-color: none !important
}

.center {
  display: flex;
  justify-content: center;
}


.caption {
  font-size: 0.9em;
  margin-top: 0.2em;
  color: var(--fg2);
}

.img-caption {
  margin-top: -1.3em;
}

.quote-caption::before {
  content: '-';
  padding-right: 5px;
}

.quote-caption {
  justify-content: end;
  margin-top: -1em;
}

table.table th {
  border: 1px solid var(--bg3);
  color: var(--primary-color);
  text-align: center;
}

table.table td {
  border: 1px solid var(--bg3);
  text-align: center;
}