@import url('https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css');
@import url('https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css');
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&display=swap');

:root{
    --primary-red: #BA1514;
    --primary-gold: #C2A340;
    --secondary-gold: #F4ECCE;
}

.fancy-font {
    font-family: 'Cinzel', serif;
    color: var(--primary-red);
}

.red-link{
    color: var(--primary-red);
}

[role=button] {
    cursor: pointer;
}

#content .footnote-ref, #content .footnote-back {
  scroll-margin-top: 150px;
}

#content img, #image-editor {
  display: block;
  margin: 10px auto;
  border: 3px solid var(--secondary-gold);
  cursor: pointer;
}

img{
  max-width: 100%;
}

[data-anonimize-last=true]{
  border-radius: 0 0.5em 0.5em 0;
  padding-right: 0.4em;
}

[data-anonimize-first=true]{
  border-radius: 0.5em 0 0 0.5em;
  padding-left: 0.4em;
}

[data-anonimize-last=true][data-anonimize-first=true]{
  border-radius: 0.5em 0.5em 0.5em 0.5em;
}

[data-anonimize-last=true]:after {
  content: "";
  display: inline-block;
  padding: 0 0.2em;
  margin: 0 0 0 0.5em;
  font-size: .75em;
  font-weight: 700;
  line-height: 1;
  background: white;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 0.25rem;
}

.show-type [data-anonimize-last=true]:after {
  content: attr(data-anonimize-type);
}

.show-cod [data-anonimize-type] {
  text-decoration: line-through;
}

.show-cod [data-anonimize-last=true]:after {
  content: attr(data-anonimize-cod);
}

.canvas {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: lightyellow;
  z-index: 1000;
  border-color: black;
  border-style: solid;
  border-width: 3px;
  padding-left: 50px;
  padding-right: 50px;
}

.canvasButtons {
  display: flex;
  justify-content: space-around;
  padding-top: 20px;
  padding-bottom: 20px;
}

/* ===== Scrollbar CSS ===== */
/* Firefox */
* {
  scrollbar-width: 10px;
  scrollbar-color: var(--primary-gold) var(--secondary-gold);
}

/* Chrome, Edge, and Safari */
*::-webkit-scrollbar {
  width: 10px;
}

*::-webkit-scrollbar-track {
  background: var(--secondary-gold);
}

*::-webkit-scrollbar-thumb {
  background-color: var(--primary-gold);
  border-radius: 10px;
}

.selected {
  background-color: var(--secondary-gold);
}