:root {
  --color-dark: #0d0800; 
  --color-medium: #5f3b03; 
  --color-light: #fcf9dd;
}

body {
  background-color: var(--color-dark);
}

.button {
  color: var(--color-dark);
  background-color: var(--color-light);
  border: 1px solid var(--color-dark);
}
.button:hover {
  color: var(--color-light);
  background-color: var(--color-medium);
  border-color: var(--color-light);
}

.tooltip-link {
  color: var(--color-medium);

}
.tooltip-link .tooltip-text {

  background-color: var(--color-medium);
  color: var(--color-light);
}
.tooltip-link .tooltip-text::after {

  border-color: var(--color-medium) transparent transparent transparent;
}

.social-icon {
  border: 2px solid var(--color-light);
  background: var(--color-medium);
  color: var(--color-light);
}

.img-border {
  border: 1px solid var(--color-light);
}

section {
  background-color: var(--color-medium);
  border: 1px solid var(--color-light);
}

header {
  background-color: var(--color-dark);
  color: var(--color-light);
}

.logo {
  color: var(--color-light);
}

#desktopNav a {
  color: var(--color-light);
}
#desktopNav a:hover {
  color: var(--color-medium);
}
#mobileNav {
  background: var(--color-dark);
}
#mobileNav a:hover {
  background: var(--color-light);
}

footer {
  background-color: var(--color-dark);
  color: var(--color-light);
}

.card {
  background-color: var(--color-light);
  border: 1px solid var(--color-dark);
}


/* Modal*/
.modal-btn {
  border: 2px solid var(--color-medium);
  background-color: var(--color-light);
  color: var(--color-dark);
}
.modal-btn:hover,
.modal-btn:focus {
  background-color: var(--color-medium);
  color: var(--color-light);
}
.modal-content {
  background: var(--color-light);
}
.modal-overlay {
  background: rgba(13, 8, 0, 0.8);
}

/* Thumbnail Grid */   
.click.quarter {
  border: 1px solid var(--color-dark);
  background-color: var(--color-light);  
}
/* Modal Styles */
.shadow {
  background: rgba(13, 8, 0, 0.8);
}
.main-modal {
background: var(--color-light);
}
.clickdots {
background-color: var(--color-medium);
}
.clickdots.text-white {
background-color: var(--color-dark);
}
.close-btn {
background-color: var(--color-dark);
color: var(--color-light);
}
.close-btn:hover {
background-color: var(--color-light);
color: var(--color-medium);
}

details {
border: 1px solid var(--color-dark);
}
details[open] summary::marker {
color: var(--color-medium);
}
details[open] {
background-color: var(--color-light);
}

.typewriter-effect {
color: var(--color-light);
}

/* Opacity Classes */
.opacity,.hover-opacity:hover{opacity:0.50!important}
.opacity-zero{opacity:0.0!important}
.opacity-25{opacity:0.25!important}

/* Coconut Theme */
.coconut, 
.coconut-button, 
.coconut-link {
    color: #5f3b03 !important;
    background-color: #fcf9dd !important;
    border: 1px solid #5f3b03 !important;
}
.coconut-button:hover, 
.coconut-link:hover {
    background-color: #5f3b03;
    color: #fcf9dd;
}
/* Caramel Theme */
.caramel, 
.caramel-button {
    color: #fcf9dd !important;
    background-color: #5f3b03 !important;
    border: 1px solid #fcf9dd!important;
}
.caramel-button:hover {
    background-color: #0d0800;
    color: #fcf9dd;
}
/* Chocolate Theme */
.chocolate, 
.chocolate-button {
    color: #fcf9dd !important;
    background-color: #0d0800 !important;
    border: 1px solid #fcf9dd !important;
}
.chocolate-button:hover {
    background-color: #5f3b03;
    color: #fcf9dd;
}