@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500&display=swap');

/* CSS HEX */
/* --burnished-brown: #B98574ff;
--antique-brass: #C29D8Bff;
--rose-ebony: #674649ff;
--pale-silver: #D5C8C1ff;
--alice-blue: #E5EEF2ff;
--silver-chalice: #B4AAA5ff;
--light-gray: #D4D0CEff;
--cultured: #E8EDEFff;
--alice-blue-2: #EAF1F5ff; */

:root{
    --burnished-brown: #B98574ff;
    --bear-brown: #88605aff;
    --antique-brass: #C29D8Bff;
    --rose-ebony: #674649ff;
    --pale-silver: #D5C8C1ff;
    --alice-blue: #E5EEF2ff;
    --silver-chalice: #B4AAA5ff;
    --light-gray: #D4D0CEff;
    --cultured: #E8EDEFff;
    --alice-blue-2: #EAF1F5ff;
    --sakura:#ECD8D4ff;
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style: none;
    text-decoration: none;
    font-family: 'Cormorant Garamond', serif;
    scroll-behavior: smooth;
}

html{
    height: 100%;
}

body{
    height: 100%;
}

.loader-container{
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #FFF7F7;
}

.loader{
    position: relative;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: linear-gradient(#fe9190,#fec8c8,#b8d2f0);
    animation: loader-animation 1s linear infinite;
}

.loader span{
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: linear-gradient(#fe9190,#fec8c8,#b8d2f0);
}

.loader span:nth-child(1){
    filter: blur(5px);
}

.loader span:nth-child(2){
    filter: blur(10px);
}

.loader span:nth-child(3){
    filter: blur(25px);
}

.loader span:nth-child(4){
    filter: blur(50px);
}

.loader::after{
    content: '';
    position: absolute;
    top: 30px;
    left: 30px;
    right: 30px;
    bottom: 30px;
    background: linear-gradient(#FFF7F74d, #FFF7F74d), url("assets/home/IncompletePalatableBluetickcoonhound-size_restricted.gif");
    border-radius: 50%;
    filter: blur(1px);
    animation: rev-loader-animation 1s linear infinite;
}

@keyframes loader-animation{
    0% { transform: rotate(0deg);}
    100% { transform: rotate(360deg);}
}

@keyframes rev-loader-animation{
    0% { transform: rotate(0deg);}
    100% { transform: rotate(-360deg);}
}

@-webkit-keyframes loader-animation{
    0% { transform: rotate(0deg);}
    100% { transform: rotate(360deg);}
}

@-webkit-keyframes rev-loader-animation{
    0% { transform: rotate(0deg);}
    100% { transform: rotate(-360deg);}
}

@-moz-keyframes loader-animation{
    0% { transform: rotate(0deg);}
    100% { transform: rotate(360deg);}
}

@-moz-keyframes rev-loader-animation{
    0% { transform: rotate(0deg);}
    100% { transform: rotate(-360deg);}
}

@-ms-keyframes loader-animation{
    0% { transform: rotate(0deg);}
    100% { transform: rotate(360deg);}
}

@-ms-keyframes rev-loader-animation{
    0% { transform: rotate(0deg);}
    100% { transform: rotate(-360deg);}
}

@-o-keyframes loader-animation{
    0% { transform: rotate(0deg);}
    100% { transform: rotate(360deg);}
}

@-o-keyframes rev-loader-animation{
    0% { transform: rotate(0deg);}
    100% { transform: rotate(-360deg);}
}

.main{
    display: none;
}

/* intro */
.header{
    height: 100vh;
    background-color: var(--pale-silver);
    background: linear-gradient(167deg, rgba(236,216,212,0) 24%, rgba(236,216,212,1) 100%), url("assets/home/headeBG.jpg") no-repeat left center / cover;
    /* background:url("assets/home/headeBG.jpg") no-repeat left center / cover; */
    background-attachment: fixed;
    animation: onload-bg-anima  3s 0s;
}

@-webkit-keyframes onload-bg-anima{
    0% {background-position-x: -100vw;}
    100% {background-position-x: 0;}
}

@keyframes onload-bg-anima{
    0% {background-position-x: -100vw;}
    100% {background-position-x: 0;}
}

@-moz-keyframes onload-bg-anima{
    0% {background-position-x: -100vw;}
    100% {background-position-x: 0;}
}

@-ms-keyframes onload-bg-anima{
    0% {background-position-x: -100vw;}
    100% {background-position-x: 0;}
}

@-o-keyframes onload-bg-anima{
    0% {background-position-x: -100vw;}
    100% {background-position-x: 0;}
}

@-webkit-keyframes onload-text-anima{
    0% {opacity: 0;top: -100vh;}
    100% {opacity: 1.0;top: 0vh;}
}

@keyframes onload-text-anima{
    0% {opacity: 0;top: -100vh;}
    100% {opacity: 1.0;top: 0vh;}
}
@-moz-keyframes onload-text-anima{
    0% {opacity: 0;top: -100vh;}
    100% {opacity: 1.0;top: 0vh;}
}
@-ms-keyframes onload-text-anima{
    0% {opacity: 0;top: -100vh;}
    100% {opacity: 1.0;top: 0vh;}
}
@-o-keyframes onload-text-anima{
    0% {opacity: 0;top: -100vh;}
    100% {opacity: 1.0;top: 0vh;}
}

.header .intro-container{
    display: flex;
    align-items: center;
    position: absolute;
    right: 0px;
    top: 0px;
    width: 50vw;
    height: 100vh;
    animation: onload-text-anima 3s 0s;
}

.header .intro-container .intro{
    max-width: 30vw;
    max-height: 100vh;
    margin: auto;
    padding: 30px;
    background-color: #ffffff4d;
    border: 0px solid #fff;
    border-radius: 50px;
}

.header .intro-container .intro h1{
    text-align: left;
    margin: 20px 0px;
    font-size: 2.4em;
    color: var(--rose-ebony);
}

.header .intro-container .intro h3{
    text-align: right;
    margin-right: 20px;
    margin-bottom: 20px;
    font-size: 1.2em;
    font-weight: 500;
    color: rgb(122, 122, 122);
}

.header .intro-container .intro p{
    text-align: left;
    margin-bottom: 25px;
    line-height: 1.5em;
    font-size: 1.2em;
    font-weight: 500;
}

.header .intro-container .intro .main-table{
    margin-left: -1vw;
    font-weight: bold;
}

.header .intro-container .intro .alt-table{
    display: none;
    font-weight: bold;
}


.header .intro-container .intro td{
    padding: .8em 1vw;
}

.header .intro-container .intro table tr td a,
.header .intro-container .intro table tr td a:link
{
    font-size: 1.5em;
    color:var(--rose-ebony);
}

.header .intro-container .intro table tr td a:hover,
.header .intro-container .intro table tr td a:active
{
    color:var(--burnished-brown);
}

/* second part */
/* sidebar and post container */
.container{
    display: flex;
    position: relative;
    /* overflow: auto; */
}

/* nav */
.container .nav{
    top:0px;
    position: sticky;
    min-width:360px;
    background-color:var(--sakura);
    height: 100vh;
}

.container .nav .nav-dropdown{
    display: none;
    background-color: var(--sakura);
    height: fit-content;
    justify-content: center;
    padding: 5px 2px 5px 10px;
}

.container .nav .nav-dropdown .roll-nav{
    flex-grow: 7;
    width:90%;
    /* border: 1px solid var(--rose-ebony); */
    display: flex;
    align-items: center;
    white-space: nowrap;
    flex-direction: row;
    overflow-x: hidden;
}

.container .nav .nav-dropdown .roll-nav .roll-nav1{
    padding-left: 100%;
    animation: marquee1 10s linear infinite;
    display: block;
}

@keyframes marquee1{
    0% {transform: translate(0,0);}
    100% {transform: translate(-100%,0);}
}

@-webkit-keyframes marquee1{
    0% {transform: translate(0,0);}
    100% {transform: translate(-100%,0);}
}

@-moz-keyframes marquee1{
    0% {transform: translate(0,0);}
    100% {transform: translate(-100%,0);}
}

@-ms-keyframes marquee1{
    0% {transform: translate(0,0);}
    100% {transform: translate(-100%,0);}
}

@-o-keyframes marquee1{
    0% {transform: translate(0,0);}
    100% {transform: translate(-100%,0);}
}



.container .nav .nav-dropdown .roll-nav .roll-nav1 a{
    color: var(--rose-ebony);
    font-weight: bold;
}

.container .nav .nav-dropdown .dropdown-btn{
    flex-grow: 8;

    text-align: center;
    font-size: 2em;
    color: var(--rose-ebony);

    height: 1.2em;
    width: 1.2em;
}

.container .nav .nav-container{
    width: max-content;
    margin: 0px auto;
    padding-top: 30px;
}

.container .nav .nav-title{
    color: var(--rose-ebony);
    font-size: 1.8em;
    text-align: center;
    margin: 10px auto 20px;
    font-weight: bold;
}



.container .nav .day-title{
    color: var(--rose-ebony);
    font-size: 1.2em;
    text-align: left;
    transition: 1s;
    padding: 0px 10px;
}

.container .nav .nav-title.day-title:hover{
    background-color: var(--burnished-brown);
    color: var(--sakura);
}

.container .nav .events-view .event a{
    display: block;
    width: 100%;
    color: var(--rose-ebony);
    font-size: 1.0em;
    transition: 1s;
    font-weight:700 ;
    padding: 0px 10px;
}

/* .container .nav .events-view .event:hover{
    background-color: var(--burnished-brown);
    color: var(--cultured);
    padding-left: 30px;
} */

.container .nav .events-view .event a:hover{
    background-color: var(--burnished-brown);
    color: var(--sakura);
}

.highlight-li{
    background-color: var(--burnished-brown);
    color: var(--sakura);
}

.container .nav .side-footer{
    position: absolute;
    bottom: 0px;
    text-align: left;
    margin-bottom: 20px;
    font-size: 18px;
}

/* event container */
.container .content {
    overflow: hidden;
    background-color: #FBF6F5;
    flex-grow: 1;
    /* overscroll-behavior: auto; */
    
}

/* add overflow */
.overflow-on{
    overflow: auto !important;
    /* -ms-overflow-style: none;  /* IE and Edge */
    /*scrollbar-width: none;  */
}

.container .content .day-container{
    width: 100%;
    margin: 0;
    padding: 0;
}

.container .content .event-container{
    border: 1px solid var(--rose-ebony);
    background-color: #f9f9f9;
    width: 90%;
    margin: 50px auto 0px;
}

.container .content .event-container .content-flex{
    display: flex;
    align-items: center;
    justify-content: center;
}


.container .content .event-container h1{
    margin: 20px 0px 5px;
    text-align: center;
    font-size: 2em;
    color: var(--rose-ebony);
}

.container .content .event-container h2{
    margin: 0px 0px 0px;
    text-align: center;
    font-size: 1.8em;
    color: var(--rose-ebony);
}

.container .content .event-container .content-flex .content-l{
    -ms-flex: 2;
    flex: 1;
    flex-basis: 50%;
    flex-grow: 0;
    flex-shrink: 0;
    padding: 20px 30px 30px;
}

.container .content .event-container .content-flex p{
    /* -ms-flex: 2;
    flex: 1;
    flex-basis: 50%;
    flex-grow: 0;
    flex-shrink: 0; */

    text-align: center;
    font-size: 1.2em;
    color: var(--rose-ebony);
}

.container .content .event-container iframe{
    display: block;
    flex-grow: 1;
    flex-basis: 100%;
    width:50%;
    height: 160px;
    margin: 60px 20px 60px 0px ;
}

/* place holder */
.container .empty-placeholder{
    height: 15vh;
}


/* footer */
.bottom-container {
    width: 80%;
    height: 20vh;
    margin: 50px auto 30px;
    text-align: center;
    font-size: 1.2em;
    font-weight: bold;
    color: var(--rose-ebony);
}

.bottom-container .cpright{
    margin: 10px 0px;
}

/* smol screens */
@media (max-width: 1024px) and (min-width: 769px){
    /* header */
    .header .intro-container{
        display: flex;
        align-items: center;
        position: absolute;
        right: 0px;
        top: 0px;
        width: 100vw;
        height: 100vh;
        animation: onload-text-anima 3s 0s;
    }

    .header .intro-container .intro{
        max-width: 60vw;
        max-height: 80vh;
        margin: auto;
        padding: 30px;
        background-color: #ffffff4d;
        border: 0px solid #fff;
        border-radius: 50px;
    }

    .header .intro-container .intro p{
        margin-bottom: 0px;
    }
    .header .intro-container .intro .main-table{
        display: none;
    }

    .header .intro-container .intro .alt-table{
        display: block;
        margin: auto;
        width: fit-content;
    }

    .header .intro-container .intro table tr td a,
    .header .intro-container .intro table tr td a:link
    {
        font-size: 1.5em;        
        color:var(--rose-ebony);
    }

    .header .intro-container .intro table tr td a:active,
    .header .intro-container .intro table tr td a:hover
    {
        color: var(--burnished-brown);
    }


    /* smol screen content */
    .container .content .event-container .content-flex{
        display: block;
    }

    .container .content .event-container .content-flex .content-l{
        text-align: center;
        padding: 20px auto;
    }

    .container .content .event-container iframe{
        width: 90%;
        height: 160px;
        margin: 0px auto 20px;
    }
}

/* tablet */
@media (max-width: 768px) and (min-width: 481px){
    /* header */

    .header{
        animation: onload-bg-anima 2s 0s;
    }

    .header .intro-container{
        display: flex;
        align-items: center;
        position: absolute;
        right: 0px;
        top: 0px;
        width: 100vw;
        height: 100vh;
        animation: onload-text-anima 2s 0s;
    }

    .header .intro-container .intro{
        max-width: 90vw;
        max-height: 90vh;
        margin: auto;
        padding: 30px;
        background-color: #ffffff4d;
        border: 0px solid #fff;
        border-radius: 50px;
    }

    @keyframes onload-bg-anima{
        0% {background-position-y: -100vh;}
        100% {background-position-y: 0;}
    }

    @-webkit-keyframes onload-bg-anima{
        0% {background-position-y: -100vh;}
        100% {background-position-y: 0;}
    }
    
    @-moz-keyframes onload-bg-anima{
        0% {background-position-y: -100vh;}
        100% {background-position-y: 0;}
    }
    
    @-ms-keyframes onload-bg-anima{
        0% {background-position-y: -100vh;}
        100% {background-position-y: 0;}
    }

    @-o-keyframes onload-bg-anima{
        0% {background-position-y: -100vh;}
        100% {background-position-y: 0;}
    }

    .header .intro-container .intro .main-table{
        display: none;
    }

    .header .intro-container .intro .alt-table{
        display: block;
        width: fit-content;
        margin: auto;
    }

    .header .intro-container .intro table tr td a,
    .header .intro-container .intro table tr td a:link
    {
        font-size: 1.5em;        
        color:var(--rose-ebony);
    }

    .header .intro-container .intro table tr td a:active,
    .header .intro-container .intro table tr td a:hover
    {
        color: var(--burnished-brown);
    }

    /* mobile nav */
    .container{
        display: block;
    }

    .container .nav{
        height: fit-content;
    }

    .container .nav .nav-dropdown{
        display: flex;
    }

    .container .nav .dropdown-btn{
        transition: 1s;
    }

    .dropdown-btn-active{
        -webkit-transform: rotate(180deg);
        -moz-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        -o-transform: rotate(180deg);
        transform: rotate(180deg);
        color: var(--burnished-brown);
    }

    .container .nav .nav-wrap{
        height: 0px;
        overflow: hidden;
        transition: 2s;
    }

    .container .nav .nav-container{
        overflow-y:hidden;
        height: fit-content;
        padding-bottom: 30px;
        padding-top: 0px;
    }


    /* tablet content */
    .container{
        display: block;
    }
    
    .container .content .event-container .content-flex{
        display: block;
    }

    .container .content .event-container h1,
    .container .content .event-container h2{
        font-size: 1.5em;
    }

    .container .content .event-container .content-flex .content-l{
        text-align: center;
        padding: 20px auto;
    }

    .container .content .event-container iframe{
        width: 90%;
        height: 160px;
        margin: 0px auto 20px;
    }
}

/* mobile */
@media (max-width: 481px){
    .loader{
        width: 200px;
        height: 200px;
    }

    /* header */
    .header{
        animation: onload-bg-anima 1.5s 0s;
    }

    .header .intro-container{
        display: flex;
        align-items: center;
        position: absolute;
        right: 0px;
        top: 0px;
        width: 100vw;
        height: 100vh;
        animation: onload-text-anima 1.5s 0s;
    }

    @-webkit-keyframes onload-bg-anima{
        0% {background-position-y: -100vh;}
        100% {background-position-y: 0;}
    }
    
    @keyframes onload-bg-anima{
        0% {background-position-y: -100vh;}
        100% {background-position-y: 0;}
    }

    @-moz-keyframes onload-bg-anima{
        0% {background-position-y: -100vh;}
        100% {background-position-y: 0;}
    }
    
    @-ms-keyframes onload-bg-anima{
        0% {background-position-y: -100vh;}
        100% {background-position-y: 0;}
    }

    @-o-keyframes onload-bg-anima{
        0% {background-position-y: -100vh;}
        100% {background-position-y: 0;}
    }


    .header .intro-container .intro{
        max-width: 98vw;
        max-height: 98vh;
        margin: auto;
        padding: 30px;
        background-color: #ffffff4d;
        border: 0px solid #fff;
        border-radius: 50px;
    }

    .header .intro-container .intro h1,
    .header .intro-container .intro h3{
        margin: 0px;
    }
    .header .intro-container .intro p{
        font-size: 1em;
        margin-bottom: 0px;
    }

    .header .intro-container .intro .main-table{
        margin: auto;
    }

    .header .intro-container .intro .alt-table{
        display: none;
    }

    .header .intro-container .intro table tr td{
        padding: 1vh 2vw ;
    }

    .header .intro-container .intro table tr td a
    {
        font-size: 1em;        
        color:var(--rose-ebony);
    }

    .header .intro-container .intro table tr td a:active
    {
        font-size: 1em;        
        color:var(--burnished-brown);
    }

    /* mobile nav */
    .container{
        display: block;
    }

    .container .nav{
        height: fit-content;
    }

    .container .nav .nav-dropdown{
        display: flex;
    }

    .container .nav .dropdown-btn{
        transition: 1s;
    }

    .dropdown-btn-active{
        -webkit-transform: rotate(180deg);
        -moz-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        -o-transform: rotate(180deg);
        transform: rotate(180deg);
        color: var(--burnished-brown);
    }

    .container .nav .nav-wrap{
        height: 0px;
        overflow: hidden;
        transition: 2s;
    }

    .container .nav .nav-container{
        overflow-y:hidden;
        height: fit-content;
        padding-bottom: 30px;
        padding-top: 0px;
    }

    /* mobile content */
    .container .content .event-container .content-flex{
        display: block;
    }

    .container .content .event-container h1,
    .container .content .event-container h2{
        font-size: 1.2em;
    }

    .container .content .event-container .content-flex .content-l{
        text-align: center;
        padding: 20px auto;
    }

    .container .content .event-container iframe{
        width: 90%;
        height: 160px;
        margin: 0px auto 20px;
    }

}