@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');

body {
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.serif-font{
    font-family: 'Libre Baskerville', 'Georgia', serif;
}

/* width */
/*::-webkit-scrollbar {*/
/*    width: 6px;*/
/*    height: 6px;*/
/*}*/

/* Track */
/*::-webkit-scrollbar-track {*/
/*    background: #777; */
/*}*/
 
/* Handle */
/*::-webkit-scrollbar-thumb {*/
/*    background: #ddd; */
/*}*/



/* width */
::-webkit-scrollbar {
    width: 3px;
    height: 3px;
}

 /*Track */
::-webkit-scrollbar-track {
    background: #eee; 
}

 /*Handle */
::-webkit-scrollbar-thumb {
    background: #bbb; 

}

 /*Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #777; 
}


@media (max-width: 768px) { 
    ::-webkit-scrollbar {
        width: 0px;
        height: 0px;
    }
}

/* Custom */

/* 
* Main Parallax Banner 
*/
#banner{
    position: relative;
    display: flex;
    justify-content: center;
    align-content: center;
    overflow: hidden;
    height: 100vh;
}
#banner img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; 
}
#banner-foreground{
    z-index: 20px;
}
#bannr h1{
    position: absolute;
    margin-top: 15%;
    margin-left: 10%;
    top: 0;
    left: 0;
    color: #FFFFFF;
    text-shadow: 1px 1px 3px #777;
    font-weight: bolder;
    z-index: 10;
}

#sermon_like{
    /* background-color: ; */
    border-radius: 5px;
}

/* 
 * Quill Editor
 */

#editor{
    height: 500px;
}

.noteStorageStatus{
    color: #999;
    font-weight: normal;
    font-size: 16px;
    padding-right: 5px;
    text-align: right;
    position: relative; 
    float: right;
}

.notesBar{
    padding: 5px 10px;
    background-color: #fbfbfb;
}

.ql-toolbar{
    background-color: #fbfbfb;
}
.ql-editor{
    background-color: #ffffff;
}
.ql-container.ql-snow, .ql-toolbar.ql-snow{
    border-color: transparent;
}




/* Old Styled Button */
.old_btn{
    font-family: 'Georgia';
    transition: all ease-in-out 0.2s;
}
.old_btn div{
    transition: all ease-in-out 0.2s;
}
.old_btn:hover{
    border-color: #426774;
    transition: all ease-in-out 0.2s;
}
.old_btn div:hover{
    background-color: #426774;
    transition: all ease-in-out 0.2s;
}


/* Menu Icon Animation */
.menu-icon-1{
    transform: translate(6px, 0px) rotate(45deg);
}
.menu-icon-2{
    transform: translate(-7px, 12.5px) rotate(-45deg);
}


/* Responsive iframe (16:9) */
.iframe-container {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding-top: 56.25%; /* 16:9 Aspect Ratio */
}

.iframe {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* Sticky iframe */
@media (orientation: portrait) and (max-width: 1024px) {
    .sticky-iframe {
        position: sticky;
        top: 0;
        z-index: 30;
    }
}
@media (orientation: landscape) {
    .sticky-iframe {
        position: static;
    }
}

/* Tooltip */
.tooltip {
    position: relative;
    display: inline-block;
}
  
.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: #171717;
    color: #fff;
    font-size: 0.875rem;
    font-weight: normal;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 10;
    bottom: 150%;
    left: 50%;
    margin-left: -60px;
}
  
.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #171717 transparent transparent transparent;
}
  
.tooltip:hover .tooltiptext {
    visibility: visible;
}



/* Marquee */
.marquee {
    height: 1rem;
    overflow: hidden;
    position: relative;
}

.marquee div {
    position: absolute;
    display: flex;
    gap: 20%;
    width: 140%;
    height: 100%;
    margin: 0;
    line-height: 1rem;
    text-align: center;
    -moz-transform: translateX(50%);
    -webkit-transform: translateX(50);
    transform: translateX(50%);
    -moz-animation: scroll-left 2s linear infinite;
    -webkit-animation: scroll-left 2s linear infinite;
    animation: scroll-left 40s linear infinite;
}
.marquee div p {
    flex-shrink: 0;
}

@-moz-keyframes scroll-left {
    0% {
        -moz-transform: translateX(50);
    }
    100% {
        -moz-transform: translateX(-100%);
    }
}

@-webkit-keyframes scroll-left {
    0% {
        -webkit-transform: translateX(50%);
    }
    100% {
        -webkit-transform: translateX(-100%);
    }
}

@keyframes scroll-left {
    0% {
        -moz-transform: translateX(50%);
        -webkit-transform: translateX(50%);
        transform: translateX(50%);
    }
    100% {
        -moz-transform: translateX(-100%);
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }
}