/* CLASSES used by all pages */

/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {  
  background: var(--grey-300); 
  border-radius: 5px; 
  box-shadow: var(--box-shadow);
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: rgba(114, 220, 239, 0.38);
  border-radius: 5px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: rgba(114, 220, 239, 0.8);
}
*,
*::before,
*::after { box-sizing: border-box; }

::placeholder { padding-left: 1rem; }

html {
scroll-behavior: smooth;
box-sizing: border-box;
margin: 0;
padding: 0;
}

body {
position: relative;
font-family: var(--body-font-family);
background-color: var(--body-bg);
color: var(--body-color);
font-size: var(--body-font-size);
font-weight: var(--body-font-weight);
line-height: var(--body-line-height);
/* width: 100%;
max-width: 100%; */
margin: 0;
padding: 0;
/* overflow-x: hidden; */
}

.scaleable-font {
font-size: var(--data-font-size);
}

ul { list-style: none; }

.text-truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

/* ------ Typography ------ */

.serif {
font-family: "DM Serif Display", serif;
}

h1,h2,h3,h4,h5,h6 {
font-family: "DM Serif Display", serif;
}


/* Scalable font sizes for headings and paragraph */
h1,.fs-1 {
font-size: clamp(1.7rem, 5vw, 3rem);
font-weight: 800;
line-height: 1.1;
}

h2,.fs-2  {
font-size: clamp(1.6rem, 4vw, 2.5rem);
font-weight: 700;
line-height: 1.15;
}

h3,.fs-3  {
font-size: clamp(1.5rem, 3vw, 2rem);
font-weight: 600;
line-height: 1.2;
}

h4,.fs-4  {
font-size: clamp(1.4rem, 2.5vw, 1.75rem);
font-weight: 600;
line-height: 1.25;
}

h5,.fs-5 {
font-size: clamp(1.3rem, 2vw, 1.6rem);
font-weight: 500;
line-height: 1.3;
}

h6,.fs-6  {
font-size: clamp(1.2rem, 1.5vw, 1.4rem);
font-weight: 500;
line-height: 1.35;
}

p {
font-size: clamp(1rem, 1.2vw, 1.2rem);
font-weight: 400;
line-height: 1.6;
}


.fs-7 {
font-size: clamp(1rem, 1.2vw, 1.2rem);
font-weight: 400;
line-height: 1.6;
}

.fs-8 {
font-size: clamp(0.95rem, 1.2vw, 1.1rem);
font-weight: 400;
line-height: 1.6;
}

.fs-9 {
font-size: clamp(0.9rem, 0.9vw, 1rem);
font-weight: 400;
line-height: 1.6;
}

.fs-10 {
font-size: clamp(0.85rem, 0.8vw, 1rem);
font-weight: 400;
line-height: 1.6;
}
/* ------ font weights ------ */
.fw-light {
font-weight: 300 !important;
}

.fw-lighter {
font-weight: lighter !important;
}

.fw-normal {
font-weight: 400 !important;
}

.fw-bold {
font-weight: 700 !important;
}

.fw-bolder {
font-weight: bolder !important;
}

/* ------ font styles ------ */
.fst-italic {
font-style: italic !important;
}

.fst-normal {
font-style: normal !important;
}

.normal {
font-family: var(--body-font-family);
}

.lead {
font-size: 1.125rem;
font-weight: 500;
}

/* ------ display sizes ------ */
.display-1,
.display-2,
.display-3,
.display-4,
.display-5,
.display-7,
.display-8,
.display-9,
.display-10 {
font-weight: 300;
line-height: 1.2rem;
}

.display-1 {
font-size: calc(1.625rem + 4.5vw);
}

.display-2 {
font-size: calc(1.575rem + 3.9vw);
}

.display-3 {
font-size: calc(1.525rem + 3.3vw);
}

.display-4 {
font-size: calc(1.475rem + 2.7vw);
}

.display-5 {
font-size: calc(1.425rem + 2.1vw);
}

.display-6 {
font-size: calc(1.375rem + 1.5vw);
}

.display-7 {
font-size: calc(1.275rem + 1.5vw);
}

.display-8 {
font-size: calc(1.175rem + 1.5vw);
}

.display-9 {
font-size: calc(1rem + 1.5vw);
}

.display-10 {
font-size: calc(0.8rem + 1.25vw);
}

/* ------ text classes ------ */
.text-light {
color: #f5f5f5;
}

.text-dark {
color: #333;
}


.text-primary {
color: var(--primary);
}

.text-secondary {
color: var(--secondary);
}

.text-danger {
color: var(--danger);
}

.text-warning {
color: var(--warning);
}

.text-success {
color: var(--success);
}

.text-info {
color: var(--info);
}

.text-accent {
color: var(--accent);
}

.text-muted {
color: var(--text-);
}

/* ------ text alignments ------ */
.text-start {
text-align: left !important;
}

.text-end {
text-align: right !important;
}

.text-center {
text-align: center !important;
}

.text-truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* ------ buttons & links------ */
a {
text-decoration: none;
}

nav a {
color: var(--nav-link-clr);
}

nav a:hover {
color: var(--link-hover-clr);
}

.inline-link {
  color: var(--link-clr)
}

.inline-link:hover {
  color: var(--link-hover-clr)
}

.btn,
.btn-submit {
  margin-top: 0.5rem;
  padding: 8px 12px;
  border-radius: var(--btn-radius);
  border: none;
  outline: none;
  text-transform: capitalize;
  cursor: pointer; 
  color: var(--btn-clr);
  background-color: var(--btn-bg-clr);
}

.btn,
.btn-submit:hover {
  background-color: var(--btn-hover-bg-clr);
}

.btn-update {
display: block;
padding: 8px 0;
text-align: center;
text-transform: capitalize;
cursor: pointer; 
font-size: 1.2rem;
font-weight: 500;
color: white;
background-color: purple;
}

.btn-update:hover {
color: white;
 background-color: var(--btn-hover-bg-clr);
}

.title-notes .btn {
  font-size: 0.75rem;
  text-align: center;
  color: white;
 
}

/*---------- MODAL ----------*/

dialog {
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
border: 1px solid var(--grey-400);
box-shadow: 0px 15px 15px rgba(0, 0, 0, 0.38);
transition: 1s ease-out;
}

dialog[open] {
opacity: 1;
transform: scale(1);
}

dialog img {
position: relative;
width: auto;
max-height: 90vh;
overflow: hidden;
}

.close {
position: fixed;
top: 0;
right: 0;
margin: 2px;
font-size: 12px;
}

dialog::backdrop {
background-color: rgb(0 0 0 / 0%);
transition: display 0.7s allow-discrete, overlay 0.7s allow-discrete,
background-color 0.7s;
}

dialog[open]::backdrop {
background-color: rgb(0 0 0 / 25%);
}

@starting-style {
dialog[open]::backdrop {
background-color: rgb(0 0 0 / 0%);
}
}

/* ------ containers ------ */

.page-wrapper {
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
  padding-left: 1rem;
  padding-right: 1rem;
  overflow-x: hidden;
}

.container {
  position: relative;
  overflow: hidden;
  margin: 1rem;
  padding: 2rem 1rem;
}

.comments-container,
.bordered-panel {
  position: relative;
  overflow: hidden;
  margin: 1rem;
  padding: 2rem 1rem;
  line-height: var(--body-line-height);
  background: var(--grey-200);
}

.bordered-panel {
  border: 1px solid #333;
  border-radius: var(--border-radius);
}

.bordered-panel ul {
  padding-left: 0;
}

/* ------ utility ------ */
.img-fluid {
max-width: 100%;
height: auto;
}
.text-overlay {
height: 100%;
width: 100%;
background: rgba(0, 0, 0, 0.45);
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.77);
display: flex;
flex-direction: column;
text-align: center;
justify-content: center;
font-family: var(--serif);
}

.glass {
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
border-radius: var(--border-radius);
backdrop-filter: blur(9.5px);
-webkit-backdrop-filter: blur(9.5px);
}

.d-none {
display: none !important;
}

.fixed-top {
position: fixed;
width: 100%;
}

.fixed-bottom {
position: fixed;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
}

.sticky-top {
position: sticky;
top: 0;
z-index: 10;
}

.sticky-bottom {
position: sticky;
bottom: 0;
z-index: 1;
}