/* CSS Document */
html {
  font-size: 16px;
}
    
body {
  font-size: calc(14px + (24 - 14) * ((100vw - 300px) / (1600 - 300)));
}



body {background-color:#111113;
    margin: 0;
    height: 100%;
    overflow-x: hidden; /* Optionally hide horizontal scrollbar if not needed */

}


html {
    scrollbar-gutter: stable;
    height: 100%;
}

#fader {
	opacity: 1;
	transition: 1s opacity;
	/*background-image: url("/img/bluebg.jpg");*/
}


#fader.fade-out {
	opacity: 0;
	transition: none;
}

/*NAVIGATION
/* CSS to change the color of the hamburger icon */
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(255, 255, 255, 0.7)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

.navbar-custom {
    background-color: #21262d;
} 


.nav-item a {
   color: grey;
 }

.nav-item a:hover {
 color: ghostwhite;
}

.nav-link.active a {
   color: antiquewhite;
 }

.navbar-brand a {
   color: grey;
 }
.navbar-brand a:hover {
 color: ghostwhite;
}
.btn-write {
    background-color: dimgray;
    color: #EFE386 !important;
    border-color: #262525; /* Optional: to match the button color */
}

.btn-write:hover {
    background-color: dimgray; /* Darken the color on hover */
    border-color: black;
    color:white !important;
}
.btn-write-text{
    color: #EFE386 !important; 
}

.btn-buy {
    background-color: #EFE386;
    color: white;
    border-color: #EFE386; /* Optional: to match the button color */
}

.btn-buy:hover {
    background-color: #EFE386; /* Darken the color on hover */
    border-color: #EFE386;
    color:black;
}
.btn-buy-text{
    color: white !important; 
}


.btn-buy2 {
    background-color: #EFE386;
    color: dimgray !important; 
    border-color: #EFE386; /* Optional: to match the button color */
    margin-left: 20px;
}
.btn-buy2:hover {
    background-color: #EFE386; /* Darken the color on hover */
    border-color: #EFE386;
    color:black  !important;
}
/* Default styling for sidebar links */
#sidebarMenu .nav-link {
    color: grey;
    background-color: transparent; /* Ensure no background color */
}

/* Styling for active sidebar link */
#sidebarMenu .nav-link.active {
    color: antiquewhite !important;
    background-color: #333 !important;
}
.nav-link.active {
    color: antiquewhite !important; /* Add !important if other styles are overriding it */
    background-color: #000; /* Optional, for better visibility */
    margin: 0px;
}

/* Optional: Override focus state if needed */
#sidebarMenu .nav-link:focus {
    background-color: transparent; /* Ensure no background on focus */
    outline: none; /* Remove default browser outline, if any */
}


    .sparks-container {
        position: relative;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    .spark {
        position: absolute;
        bottom: 200px;
        left: 50%;
        width: 4px;
        height: 16px;
        background-color: yellow;
        border-radius: 50%;
        opacity: 0;
        transform-origin: bottom center;
        animation: rise 4s ease-out infinite;
    }

    @keyframes rise {
        0% {
            transform: translateX(0) translateY(100vh);
            opacity: 1;
        }
        100% {
            transform: translateX(var(--spark-x)) translateY(-800px);
            opacity: 0;
        }
    }

/* Home */
    .background-section1 {
        background-color: #111113;
    }
    #section1 a {
       color: whitesmoke;
     }

    #section1 a:hover {
     color: ghostwhite;
    }

    #section1.active a {
       color: antiquewhite;
     }
    #section2 a {
       color: whitesmoke;
     }


/* Hear */
    
    #section3 a {
       color: whitesmoke;
     }

    #section3 a:hover {
     color: goldenrod;
    }

    #section3.active a {
       color: blanchedalmond;
     }
    #section3 a {
       color: blanchedalmond;
     }




/* Anger */
    .background-anger {
        background-color: #386d73;
    }


/* JB Shepherd */
    .background-jbshepherd {
        background-color: #fdf5e6; /* Slightly gold background */
        color: black; /* Black text */
    }
    #jb a {
       color: gray;
        
     }
    #jb a:hover {
     color: silver;
    }


/* Poetry */
    .background-poetry {
        background-color: #fdf5e6; /* Slightly gold background */
        color: black; /* Black text */
    }


/*  Hear */
    .background-hear {
        background-color: #804e34;
        background-image: url("../img/bg.jpg");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        /*background-attachment: fixed;*/
    }

    #htpbook, .text {
        color: white;
    }
 /* Font Awesome*/
        .fa:hover {
            opacity: 0.9;
        }
 
        .fa-linkedin {
            background: #007bb5;
            color: white;
        }
 
        .fa-pinterest {
            background: #cb2027;
            color: white;
        }
 
        .fa-reddit {
            background: #ff5700;
            color: white;
        }
 
        .fa-envelope {
            padding: -10px;
            margin-left: -10px;
            color: #EFE386;
        }
 
        .fa {
            padding: 0px;
            font-size: 40px;
            width: 50px;
            text-decoration: none;
            margin: 5px 0px;
        }