/* rgb(17, 90, 118) */
/* rgb(156, 223, 250) */
/* #DAD3B6 white */
/* #5C0120 red */
/* rgb(92, 1, 32) red */
/* rgb(218, 211, 182) white */
/* #9d9883 box-shadow use */
/* Navigation Bar*/
*{
    /* v.0.0.1 */
    box-sizing:border-box;
    font-family:'Times New Roman', Times, serif;
    /*  */
}
a{
    text-decoration:none;
    color:#000000;
}
a:hover{
    color:rgb(92, 1, 32);
    filter:brightness(1.3);
}

button:hover{
    filter:opacity(0.6);
}
button,
a{
    cursor:pointer;
}
html,
body{
    /* v.0.0.1 */
    background-color:rgb(218, 211, 182);
    background-size:cover;
    margin:0px;
    padding:0px;
    /* TEMP */
    height:100%;
}
header{
    /* v.0.0.1 */
    background:#5C0120;
    height:55px;
    /* flex positioning */
    display:flex;
    justify-content:space-between;
    /*  */
}
header .logo{
    /* v.0.0.1 */
    color:aliceblue;
    font-size:30px;
    font-weight:bold;
    /* inherit covers the given header height */
    /* helloWorld sliding */
    position:relative;
    padding-left:20px;
    height:inherit;
    /* TEMP */
    /* overflow:hidden; */
    /* width:45%; */
}
header .logo .helloWorld{
    position:absolute;
    top:0;
    left:-100%;
    width:100%;
    height:100%;
    background:rgb(1, 52, 72);
    color:white;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:left 0.5s ease;
}
header .logo:hover .helloWorld{
    left:0;
}
header .logo a{ 
    /* v.0.0.1 */
    position:relative;
    /* set relative positioning for proper alignment */
    top:9px;
    color:rgb(243, 243, 243);
    /* menuBtn Config */
    float:left;
}
header .logo a:hover{
    color:currentColor;
}
header #menuBtn{
    color:white;
    background-color:rgba(0, 0, 0, 0);
    border:none;
    font-weight:bold;
    font-size:15px;
    padding:18px;
    display:none;
    height:55px;
    /*  */
    cursor:pointer;
    float:right;
}
header ul {
    /* v.0.0.1 */
    padding:0px;
    margin:0px;
    float:right;
    list-style:none;
    position:relative;
    z-index:999;
    /* v.0.0.2 */
    background-color:#5C0120;
    box-shadow:1rem 1rem 1rem -0.9rem grey;
}
header ul input{
    /* position */
    width:100%;
    height:55px;
    /* decoration */
    font-size:17px;
    border:none;
    border-radius:2px;
    background-color:transparent;
    outline:none;
    border-bottom:2px solid aliceblue;
    color:aliceblue;
}
header ul input::placeholder{
    color:aliceblue;
}
header ul li{
    /* v.0.0.1 */
    float:left;
    position:relative;
    /*  */
}
header ul li a{
    /* v.0.0.1 */
    display:block;
    /* none is to hide, block is to show */
    text-decoration:none;
    padding:18px;
    color:aliceblue;
    height:55px;
    /*  */
}   
header ul li a:hover{
    /* v.0.0.1 */
    background:rgb(26, 110, 146);
    transition:0.3s;
    /*  */
}
header ul li ul{
    /* v.0.0.1 */
    position:absolute;
    /* absolute sets vertical alignment to header ul li */
    display:none;
    background-color:rgb(25, 96, 124);
    /*  */
}
header ul li:hover ul{
    /* v.0.0.1 */
    display:block;
    /*  */
}
header ul li ul a .user-dropdown:hover{
    /* v.0.0.1 */
    background-color:rgb(130, 130, 130);
    /*  */
}
header ul li ul li{
    /* v.0.0.1 */
    width:100%;
    text-align:center;
    /*  */
}
/* Trending Post Title */
#headline{
    /* position */
    margin:0;
    text-align:center;
    padding:30px 0;
    /* decoration */
    font-weight:bold;
    color:rgb(92, 1, 32);
    font-size:35px;
}
/* Post Slider */
.pageWrapper{
    display:block;
    /*  */
    /* min-height:100%; */
}
.prev, .next{
    /* position */
    width:40px;
    text-align:center;
    margin:117px 0 0 0;
    padding:20px 0;
    /* decoration */
    color:#5C0120;
    font-weight:bold;
    font-size:30px;
    font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;  
    background-color:rgba(0, 0, 0, 0.2);  
    cursor:pointer;
}
.postSlider .prev{
    float:left;
}
.postSlider .next{
    float:right;
}
.postSlider .postWrapper{
    /* border:2px dashed black; */
    height:360px;
    overflow:hidden;
    padding: 0px 5px;
}
.postSlider .postWrapper .sliderImage{
    /* position */
    position:relative;
    width: 100%;
    height:55%;
    /* decoration */
    /* opacity:0.8; */
}
.postSlider .postWrapper .post{
    /* position */
    width:300px;
    height:400px;
    display:inline-block;
    margin:0px 10px;
    /* decoration */
    box-shadow:1rem 1rem 1rem -0.9rem #9d9883; 
    border:2px solid #DAD3B6;
}
.postSlider .postWrapper .post .postInfo{
    /* border: 2px solid black; */
    /* position */
    position:relative;
    margin:5px;
    /* decoration */
}
/* Main Content - Recent Post */
.mainWrapper{
    /* border:2px dotted black; */
    /* position */
    width:100%;
    display:inline-block;
}
.mainWrapper .recentPostWrapper{
    /* position */
    float:left;
    width:70%;
    /* border:2px solid blue; */
}
.mainWrapper .recentPostWrapper .recentPost{
    /* border:2px solid green; */
    /* position */
    display:flex;
    margin:20px;
    height:300px;
    position:relative;
    /* decoration */
    background-color:#DAD3B6;
    box-shadow:2px 2px 10px 0.5px #9d9883;
    border:2px solid #DAD3B6;
}
.mainWrapper .recentPostWrapper .recentPost .recentPostInfo{
    /* border:2px solid orange; */
    /* position */
    margin:0 0 0 10px;
    width:99%;
    position:absolute;
    /* decoration */
    color:#DAD3B6;
}
.mainWrapper .recentPostWrapper .recentPost .recentPostInfo div{
    display:flex;
    gap:5px;
}
.mainWrapper .recentPostWrapper .recentPost .recentPostInfo .description{
    /* position */
    padding:20px 20px 20px 0px;
    /* decoration */
    border:2px dashed #DAD3B6;
}
.mainWrapper .recentPostWrapper .recentPost .recentPostInfo a{
    /* position */
    padding:10px;
    float:right;
    margin-right:10px;
    /* decoration */
    border:2px solid #DAD3B6    ;
    border-radius:2px;
    color:#DAD3B6;
    background-color:#9d9883;
    font-weight:bold;
}
.mainWrapper .recentPostWrapper .recentPost .image-cut{
    overflow:hidden;
}
.mainWrapper .recentPostWrapper .recentPost .image-cut .recentPostImage{
    /* position */
    position:relative;
    top:-50%;
    height:580px;
    /* decoration */
    opacity:0.7;
}
.mainWrapper .explorationSide{
    /* border:2px dotted red; */    
    float:right;
    width:30%;
}
/* Main Content - Exploration Side  */
/* Search Bar */
.explorationSide .searchBar{
    margin:126.4px 0px 0px;   
    padding:20px;   
}
.explorationSide .searchBar{
    /* position */
    padding:10px;
    /* decoration */
    box-shadow:0px 0px 10px 2px #9d9883;
    background-color:#5C0120;
    border:2px solid #DAD3B6;
}
.explorationSide .searchBar input{
    /* position */
    width:100%;
    padding:10px;
    /* decoration */
    font-size:20px;
    border:none;
    border-radius:2px;
    background-color:transparent;
    outline:none;
    border-bottom:2px solid #DAD3B6;
}
.explorationSide .searchBar input::placeholder{
    color:#DAD3B6;
}
.explorationSide .searchBar button{
    /* position */
    margin:10px 0 0 0;
    /* decoration */
    color:#DAD3B6;
    background-color:transparent;
    border-radius:5px;
    border-color:#DAD3B6;
    font-size:1.1rem;
    font-weight:bold;
    cursor:pointer;
}
/* Topics List */
.explorationSide .topicList{
    /* position */
    margin:20px 0 0 0;
    /* decoration */
    border-radius:5px;
    background-color:#5C0120;
    box-shadow:0px 0px 10px 2px #9d9883;
    border:2px solid #DAD3B6;
}
.explorationSide .topicList h2{
    /* position */
    text-align:center;
    padding-top:20px;  
    margin:0; 
    /* decoration */
    font-weight:bold;
    color:#DAD3B6;
}
.explorationSide .topicList ul{
    /* position */
    padding:10px 20px;
    margin:0px;    
    /* decoration */
    list-style:none;
}
.explorationSide .topicList ul li{
    margin:10px 0px;
    border-bottom:2px solid #DAD3B6;
    padding:20px 0px;
}
.explorationSide .topicList ul li a{
    /* position */
    padding:20px 20px 20px 0px;
    /* decoration */
    font-size:1.1rem;
    color:#DAD3B6;
    /* transition */
    transition:0.3s;
}
.explorationSide .topicList ul li a:hover{
    /* decoration */
    font-size:1.5rem;
    /* transition */
    transition:all 0.3s;
}
/* Footer */
.footerWrapper .copyright{
    /* position */
    height:40px;
    width:100%;
    text-align:center;
    position:relative;
    bottom:-210px;
    width:100%;
    /* decoration */
    background-color:#DAD3B6;
    /*  */  
}
.footer{
    /* position */
    display:flex;
    gap:30px;
    width:100%;
    height:350px;
    padding:0px 10px;   
    /* stick to bottom */
    position:relative;
    bottom:-210px;
    width:100%;
    /* decoration */
    background-color:#5C0120;
    font-size:1.5rem;
    color:#DAD3B6;
    border:2px solid #9d9883;
}
.footer .aboutUs{
    flex:1;
    padding:5px;
}
.footer .aboutUs a{
    color:#DAD3B6;
}
.footer .quickLinks{
    flex:1;
    padding:5px;
}
.footer .quickLinks ul li a{
    color:#DAD3B6;
}
.footer .quickLinks ul li a:hover{
    padding-left:20px;
}
.footer .quickLinks ul li{
    padding:0 0 10px 0;
    font-size:1.9rem;
}
.footer .contactUs{
    flex:1;
    padding:5px;
    display:flex;
    flex-direction:column;
    gap:5px;
    /* border:2px solid black; */
}
.footer .contactUs input,
.footer .contactUs textarea,
.footer .contactUs button{
    /* position */
    padding:10px 0px;
    /* decoration */
    background-color:rgb(218, 211, 182);
    border-radius:2px;
    border:2px solid rgb(218, 211, 182);
}
.footer .contactUs textarea{
    height:200px;
}
.footer .contactUs button{
    /* position */
    float:right;    
    margin:0px 0 0 auto;
    width:50px;
    /* decoration */
    font-size:1.2rem;
    cursor:pointer;
}
/* .mainWrapper,
.footerWrapper,
.postSlider{
    display:none;

} */