/* default = light mode */
:root {
  --font: Georgia,Times New Roman,Helvetica;
  --bg-primary: rgba(152, 224, 214, 0.44);
  --bg-secondary: rgba(61, 208, 187, 0.29);
  --text-primary: rgb(0,0,0,1);
  --text-secondary: rgb(0, 75, 53);
  --btn-primary: rgb(61, 208, 187);
  --btn-secondary: rgb(0,0,0);
}

/* dark mode */
:root[data-theme="dark"] {
  --font: arial,Times New Roman,Helvetica;
  --bg-primary: rgb(26, 26, 26);
  --bg-secondary: rgb(7, 7, 7);
  --text-primary: rgb(245, 241, 241);
  --text-secondary: rgb(5, 224, 159);
  --btn-primary: rgb(6, 133, 99);
  --btn-secondary: rgb(232, 226, 226);
}

/* fantasy theme */
:root[data-theme="fantasy"] {
  --font: fantasy;
  --bg-primary: rgb(39, 4, 65);
  --bg-secondary: rgb(25, 0, 42);
  --text-primary: rgb(192, 158, 32);
  --text-secondary: rgb(206, 16, 203);
  --btn-primary: rgb(17, 16, 16);
  --btn-secondary: rgb(0,0,0);
}

:root[data-theme="Spirited Away"] {
  --font: Georgia,Times New Roman,Helvetica;
  --bg-primary: rgb(46, 98, 122);
  --bg-secondary: rgb(24, 52, 68);
  --text-primary: rgb(245, 169, 79);
  --text-secondary: rgb(237, 135, 96);
  --btn-primary: rgb(22, 38, 58);
  --btn-secondary: rgb(0,0,0);
}


body, div, span, ul, p {
  font-family: var(--font);
  font-size: 1rem;
  background-color: var(--bg-primary);
  color: var(--text-primary);
}


h1 {
  font: var(--font);
  font-size: 4rem;
  color: var(--text-secondary);
  margin-bottom: 20px;
}

h2 {
  font: var(--font);
  font-size: 2.5rem;
  color: var(--text-secondary);
  margin-bottom: 15px;
}

/* hyperlinks enzow */
a {
  color: var(--text-secondary);
  text-decoration: none;
}

a:hover {
  color: var(--text-primary);
}

/* sidebar enzoooo */
.sidebar-nav {

  padding: 0;
  text-indent: 20px;
  list-style: none;
  background-color: var(--bg-secondary);
  min-height: 100vh;
}

/* remove bootstrap padding from the sidebar column */
.col-sm-2 {
  padding: 0;
}

/* remove container padding */
.container-fluid {
  padding: 0;
}

/* remove default row margin */
.row {
  margin: 0;
}

.btn, .btn-primary, .btn.btn, button{
  background-color: var(--btn-primary);
  color: var(--text-primary)
}

form {
  margin-top: 20px;
}

form div {
  margin-bottom: 15px;
}

input, textarea, select,button, .btn, .btn-primary {

  padding: 8px 12px;
  margin-top: 5px;
}

.side-button {
  font-size: 0.9rem;
  padding: 0.4rem 0.8rem;
  border-radius: 8px;
  border: none;
  background: var(--btn-primary);
  color: var(--text-primary);
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}
.side-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px var(--bg-secondary);
}

.para {
  width: fit-content;
  height: fit-content;
  padding-left: 1rem;
  padding-right: 1rem;
  margin-bottom: 0.5rem;
  margin-left: 1rem;
  background: var(--bg-secondary);
  transform: skewX(-20deg);
  border-radius: 5%;
}

.track {
  width: 40%;
  height: 8px;
  background: var(--btn-secondary);
  border-radius: 999px;
  overflow: hidden;
}
.fill {
  height: 100%;
  width: 30%;
  background: var(--btn-primary);
  border-radius: 999px;
  animation: grow 1.5s ease both;
}
@keyframes grow {
  from { width: 0; }
}