/* =======================
   Default variables
   ======================= */
:root {
  --gradient-color-main: linear-gradient(355deg, rgba(255, 255, 255, 0.356) 0%, rgba(0, 0, 0, 0.445) 56%, rgba(255, 255, 255, 0.767) 100%);
  --gradient-color-secondary: linear-gradient(355deg, rgba(255, 255, 255, 0.63) 0%, rgba(0, 0, 0, 0.767) 56%, rgba(255, 255, 255, 0.87) 100%);
  --gradient-color-bg: linear-gradient(355deg, rgba(255, 255, 255, 0.527) 0%, rgba(129, 129, 129, 0.555) 56%, rgba(255, 255, 255, 0.61) 100%);
  --svg-icons-inactive: rgba(190, 190, 190, 0.329);
  --border-color-inactive: rgba(255, 255, 255, 0.267);
  --svg-icons-active: rgb(255, 255, 255);
  --accent-colors: rgb(221, 255, 99);
  --navbar-color: rgb(36, 36, 36);
}

/* =======================
   Themes
   ======================= */

/* Classic Titanium (default) */
:root[data-theme="classic-titanium"] {
  --gradient-color-main: linear-gradient(355deg, rgba(255, 255, 255, 0.356) 0%, rgba(0, 0, 0, 0.445) 56%, rgba(255, 255, 255, 0.767) 100%);
  --gradient-color-secondary: linear-gradient(355deg, rgba(255, 255, 255, 0.63) 0%, rgba(0, 0, 0, 0.767) 56%, rgba(255, 255, 255, 0.87) 100%);
  --gradient-color-bg: linear-gradient(355deg, rgba(255, 255, 255, 0.527) 0%, rgba(129, 129, 129, 0.555) 56%, rgba(255, 255, 255, 0.61) 100%);
  --svg-icons-inactive: rgba(190, 190, 190, 0.329);
  --border-color-inactive: rgba(255, 255, 255, 0.267);
  --svg-icons-active: rgb(255, 255, 255);
  --accent-colors: rgb(221, 255, 99);
  --navbar-color: rgb(36, 36, 36);
}

/* Aqua Jelly */
:root[data-theme="aqua-jelly"] {
  --gradient-color-main: linear-gradient(355deg, rgba(73, 188, 255, 0.356) 0%, rgba(2, 100, 145, 0.445) 56%, rgba(157, 255, 214, 0.767) 100%);
  --gradient-color-secondary: linear-gradient(355deg, rgba(0, 135, 145, 0.63) 0%, rgba(15, 206, 181, 0.233) 56%, rgba(40, 248, 255, 0.87) 100%);
  --gradient-color-bg: linear-gradient(355deg, rgba(118, 200, 255, 0.527) 0%, rgba(4, 161, 209, 0.555) 56%, rgba(60, 232, 255, 0.61) 100%);
  --svg-icons-inactive: rgba(13, 88, 65, 0.329);
  --border-color-inactive: rgba(255, 255, 255, 0.267);
  --svg-icons-active: rgb(158, 255, 234);
  --accent-colors: rgb(97, 255, 221);
  --navbar-color: rgb(0, 150, 170);
}

/* Crimson Love */
:root[data-theme="crimson-love"] {
  --gradient-color-main: linear-gradient(355deg, rgba(224, 0, 0, 0.356) 0%, rgba(255, 29, 29, 0.664) 56%, rgba(255, 27, 27, 0.753) 100%);
  --gradient-color-secondary: linear-gradient(355deg, rgba(255, 80, 80, 0.63) 0%, rgba(179, 10, 10, 0.767) 56%, rgba(255, 83, 83, 0.459) 100%);
  --gradient-color-bg: linear-gradient(355deg, rgba(255, 0, 0, 0.527) 0%, rgba(255, 59, 59, 0.555) 56%, rgba(255, 136, 136, 0.61) 100%);
  --svg-icons-inactive: rgba(49, 28, 28, 0.329);
  --border-color-inactive: rgba(99, 19, 19, 0.267);
  --svg-icons-active: rgb(255, 223, 223);
  --accent-colors: rgb(255, 121, 104);
  --navbar-color: rgb(114, 20, 20);
}

/* Sunset Kiss */
:root[data-theme="sunset-kiss"] {
  --gradient-color-main: linear-gradient(355deg, rgba(255, 227, 68, 0.356) 0%, rgba(255, 130, 28, 0.445) 56%, rgba(241, 255, 112, 0.767) 100%);
  --gradient-color-secondary: linear-gradient(355deg, rgba(255, 189, 114, 0.63) 0%, rgba(175, 140, 43, 0.945) 56%, rgb(255, 187, 147) 100%);
  --gradient-color-bg: linear-gradient(355deg, rgba(255, 204, 64, 0.527) 0%, rgba(255, 121, 44, 0.836) 56%, rgba(252, 255, 55, 0.61) 100%);
  --svg-icons-inactive: rgba(151, 72, 19, 0.329);
  --border-color-inactive: rgba(104, 50, 14, 0.267);
  --svg-icons-active: rgb(255, 223, 41);
  --accent-colors: rgb(255, 187, 86);
  --navbar-color: rgb(201, 99, 40);
}

/* Midnight Sky */
:root[data-theme="midnight-sky"] {
  --gradient-color-main: linear-gradient(355deg, rgba(21, 14, 112, 0.815) 0%, rgba(26, 52, 92, 0.815) 56%, rgba(31, 15, 172, 0.884) 100%);
  --gradient-color-secondary: linear-gradient(355deg, rgba(16, 25, 153, 0.63) 0%, rgba(47, 41, 100, 0.788) 56%, rgba(71, 58, 252, 0.87) 100%);
  --gradient-color-bg: linear-gradient(355deg, rgba(19, 1, 43, 0.527) 0%, rgba(53, 67, 131, 0.555) 56%, rgba(79, 82, 231, 0.61) 100%);
  --svg-icons-inactive: rgba(84, 85, 177, 0.329);
  --border-color-inactive: rgba(73, 41, 190, 0.267);
  --svg-icons-active: rgb(144, 167, 230);
  --accent-colors: rgb(140, 76, 224);
  --navbar-color: rgb(9, 8, 88);
}

/* Bubblegum Flavor */
:root[data-theme="bubblegum-flavor"] {
  --gradient-color-main: linear-gradient(355deg, rgba(212, 78, 172, 0.356) 0%, rgba(185, 40, 120, 0.445) 56%, rgba(255, 133, 235, 0.767) 100%);
  --gradient-color-secondary: linear-gradient(355deg, rgba(166, 215, 255, 0.63) 0%, rgba(15, 97, 129, 0.801) 56%, rgba(176, 243, 255, 0.87) 100%);
  --gradient-color-bg: linear-gradient(355deg, rgba(88, 222, 255, 0.747) 0%, rgba(255, 171, 251, 0.836) 56%, rgba(134, 255, 249, 0.808) 100%);
  --svg-icons-inactive: rgba(190, 107, 158, 0.329);
  --border-color-inactive: rgba(172, 104, 166, 0.267);
  --svg-icons-active: rgb(255, 211, 226);
  --accent-colors: rgb(156, 255, 250);
  --navbar-color: rgb(61, 116, 189);
}

/* Serene Woods */
:root[data-theme="serene-woods"] {
  --gradient-color-main: linear-gradient(355deg, rgba(2, 77, 2, 0.685) 0%, rgba(42, 158, 67, 0.795) 56%, rgba(173, 247, 151, 0.767) 100%);
  --gradient-color-secondary: linear-gradient(355deg, rgba(241, 197, 139, 0.63) 0%, rgba(119, 86, 24, 0.863) 56%, rgba(233, 186, 132, 0.87) 100%);
  --gradient-color-bg: linear-gradient(355deg, rgba(26, 202, 35, 0.527) 0%, rgba(22, 122, 22, 0.555) 56%, rgba(119, 255, 153, 0.61) 100%);
  --svg-icons-inactive: rgba(131, 161, 118, 0.445);
  --border-color-inactive: rgba(102, 138, 93, 0.753);
  --svg-icons-active: rgb(238, 184, 134);
  --accent-colors: rgb(162, 190, 125);
  --navbar-color: rgb(82, 72, 53);
}

/* Royal Genesis */
:root[data-theme="royal-genesis"] {
  --gradient-color-main: linear-gradient(355deg, rgba(187, 101, 148, 0.356) 0%, rgba(69, 10, 83, 0.445) 56%, rgba(255, 242, 250, 0.767) 100%);
  --gradient-color-secondary: linear-gradient(355deg, rgba(242, 188, 255, 0.63) 0%, rgba(63, 15, 55, 0.349) 56%, rgba(255, 255, 255, 0.87) 100%);
  --gradient-color-bg: linear-gradient(355deg, rgba(189, 69, 219, 0.527) 0%, rgba(199, 134, 185, 0.555) 56%, rgba(233, 152, 255, 0.61) 100%);
  --svg-icons-inactive: rgba(100, 33, 95, 0.329);
  --border-color-inactive: rgba(121, 31, 106, 0.267);
  --svg-icons-active: rgb(226, 182, 255);
  --accent-colors: rgb(252, 216, 255);
  --navbar-color: rgb(84, 38, 88);
}

body { 
    font-family: oxanium; 
    max-width: 100rem; 
    margin: 1rem auto; 
    padding: 1rem; 
    background-color: none;
    overflow: hidden;
}


.title-guestbook {
    color: var(--accent-colors);
}

form { 
    display: flex; 
    flex-direction: column; 
    gap: 0.5rem; 
    margin-bottom: 2rem; 
}

input, textarea { 
    font-family: oxanium; 
    padding: 0.5rem; 
    font-size: 1rem; 
    resize: none;
    border-radius: 1rem;
    border: none;
    background-color: var(--navbar-color);
    color: var(--accent-colors);
    padding: 1rem;
    box-sizing: border-box;
}

input::placeholder, textarea::placeholder { 
    color: color-mix(in srgb, var(--accent-colors) 45%, transparent);
}


button { 
    padding: 0.5rem; 
    font-size: 1rem; 
    cursor: pointer; 
    border-radius: 1rem;
    border: none;
    background-color: var(--accent-colors);
    color: va3r(--navbar-color);
}

.entry { 
    border-bottom: 1px solid var(--border-color-inactive); 
    padding: 0.5rem 0; 
}

.entry a { 
    color: var(--accent-colors); 
    text-decoration: none; 
}

.date { 
    font-size: 0.8rem; 
    color: var(--accent-colors); 
}

.replies {
    background-color: color-mix(in srgb, var(--navbar-color) 65%, transparent);
    overflow-y: scroll;
    height: 24rem;
    padding: 2rem;
    box-sizing: border-box;
    border-radius: 1rem;
    color: var(--svg-icons-active);
}

.replies::-webkit-scrollbar {
  width: 12px;             
}

.replies::-webkit-scrollbar-track {
  background: transparent;
  margin: 10px;
}

.replies::-webkit-scrollbar-thumb {
  background: var(--accent-colors);
  border: 3px solid transparent;
  background-clip: content-box;
  border-radius: 10px;
}

@media (max-height: 880px) {
   .replies {
    height: 21rem;
   } 
}

@media (max-height: 700px) {
   .replies {
    height: 9rem;
   } 
}