/* Global */

* {
    margin: 0;
    padding: 0;
    border: 0;
}

body {
    background-color: #1d1f2f;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    color: #353851;
    /* color: #31334a; */
    font-size: 1.05rem;
}

p {
    margin-bottom: 0.6rem;
}

ul {
    list-style-type: none;
    padding-left: 0;
}

a {
    font-family: 'Diphylleia', cursive;
    color: #d85c6b;
    font-weight: 600;
}

i {
    color: #d85c6b;
}

.row {
    --bs-gutter-x: 0;
}


/* Header */

#header {
    position: relative;
    width: 100%;
    height: 22vw;
    background: url(../images/llangennith.JPG) center center / cover no-repeat;
    padding: 1.85rem 0rem;
}

h1 {
    font-family: 'Noto Serif', 'Times New Roman', Times, serif;
    font-size: 3rem;
    text-align: right;
    margin-bottom: 0.2rem;
}

#title-link {
    color: #353851;
    font-family: 'Noto Serif', 'Times New Roman', Times, serif;
    font-weight: inherit;
    text-decoration: none;
}

h2 {
    font-family: 'Diphylleia', cursive;
    font-size: 1.25rem;
    font-weight: 600;
    color: #252639;
    text-shadow: #b0b4d8 0px 0px 5px;
    text-align: right;
    text-transform: lowercase;
}

/* Navbar */

#navbar {
    width: 100%;
    background-color: rgba(49, 51, 74, 0.5);
    text-transform: lowercase;
    z-index: 5;
}

#nav-tabs {
    width: 60%;
    margin: auto;
    font-weight: 600;
    border-bottom: none;
    --bs-nav-tabs-border-width: 0;
}

.nav-item {
    background-color: rgba(111, 96, 150, 0.5);
    margin: 0 0.6rem;
    --bs-border-radius: 0.45rem;
    border-top-left-radius: 0.45rem;
    border-top-right-radius: 0.45rem;
}

.nav-link {
    color: #d85c6b;
    font-size: 1.15rem;
    padding: 0.8rem 0.5rem;
    border: none !important;
}

.nav-link:hover {
    color: #f6ad68;
    text-decoration: underline;
    --bs-nav-tabs-link-active-color: #f7d7ad;
}

.active {
    --bs-nav-tabs-link-active-color: #353851;
    /* --bs-nav-tabs-link-active-bg: #e79b4f; */
    --bs-nav-tabs-link-active-bg: #d85c6b;
    /* --bs-nav-tabs-link-active-border-color: #fff; */
}

.absolute {
    position: absolute;
    bottom: 0;
}

.sticky {
    position: fixed;
    top: 0;
}

.sticky-2 {
    position: sticky;
    top: 3.25rem;
}

/* Collapsible Navbar */

.collapsible {
    display: none;
    width: 100%;
    padding: 0.5rem 0;
    background-color: rgba(111, 96, 150, 0.5);
}

#collapsed-content {
    display: none;
}


/* Main Section */

#content-row {
    margin-left: 3rem;
    margin-right: 3rem;
}

/* Panels */

.panel {
    /* background-color: #f3c9a1; */
    /* background-image: linear-gradient(to top, #f6ad68, #f5bc76, #f5cb87, #f6d999, #f7e6ad); */
    background-image: linear-gradient(to bottom, #f28987, #f58f81, #f8967c, #f89d77, #f8a573, #f7ad74, #f6b477, #f4bc7a, #f4c584, #f4cd8e, #f4d599, #f5dda4);
    padding: 2.6rem;
}

.inner-panel {
    background-color: #f9f6ef;
    padding: 2.6rem;
}

.side-panel {
    padding: 2rem;
    margin: 0 0 0 2rem;
}

#side-panel-1{
    background-color: #685991;
    margin-bottom: 0;
}

#side-panel-2 {
    background-color: #A05796;
    margin-top: 0;
}

/* Articles */

h3 {
    font-size: 1.8rem;
}

.post-title {
    color: #d85c6b;
}

.post-title-link {
    text-decoration: none;
}

h4 {
    font-family: 'Diphylleia', serif;
    font-weight: 600;
    font-size: 1.05rem;
    font-style: italic;
}

hr {
    width: 75%;
    margin: auto;
    border: solid 1px;
    border-radius: 10px;
}

.separator {
    background-color: #f9f6ef;
}

.entry-date {
    margin-bottom: 1.2rem;
}

.read-more {
    text-align: center;
}

.read-more-link:hover {
    color: #ec9442;
}

.tag {
    color: #71849b;
    font-size: 89%;
    font-style: italic;
    letter-spacing: 0.05rem;
    margin-top: 1.25rem;
    margin-bottom: 0;
}

#back-to-top {
    display: block;
    font-size: 1.15rem;
    font-style: italic;
    text-align: center;
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
}

.top-link {
    text-decoration: none;
}

.top-link:hover {
    text-decoration: underline;
}

/* Sidebar */

/* #sidebar {
    background-color: #3c4065;
} */

#profile-img {
    width: 100%;
    margin-bottom: 1.2rem;
}

.sidebar-text {
    color: #fff;
}

.sidebar-text h3 {
    font-family: 'Diphylleia', cursive;
    font-weight: 600;
}

.sidebar-text p {
    font-family: 'Noto Serif', 'Times New Roman', Times, serif;
    font-weight: 300;
    font-style: italic;
    margin-top: 0.8rem;
}

.side-list {
    list-style-type: none;
}

.side-list a {
    color: #fff;
    text-decoration: none;
}

.side-list a:hover {
    text-decoration: underline;
}


/* Footer */

#footer-row {
    background-color: #d04f55;
    padding: 1.6rem 0;
}

h5 {
    color: #353851;
    font-size: 1.05rem;
    padding-left: 1.8rem;
    padding-right: 1.8rem;
}


/* Media Queries */

@media only screen and (max-width: 1025px) {
    #nav-tabs {
        width: 75%;
    }

    .nav-link {
        padding: 0.7rem 0.5rem;
    }

    #content-row {
        margin-left: 1rem;
        margin-right: 1rem;
    }
}

@media only screen and (max-width: 768px) {
    #header {
        height: 28vw;
    }

    #nav-tabs {
        width: 90%;
    }

    .panel {
        padding: 2rem;
    }

    .inner-panel {
        padding: 2.4rem;
    }
}

@media only screen and (max-width: 426px) {
    #header {
        height: 50vw;
    }

    h1 {
        font-size: 1.9rem;
    }

    h2 {
        font-size: 1.1rem;
    }

    #navbar {
        display: none;
    }

    .collapsible {
        display: block;
    }

    #collapsed-content {
        text-align: center;
    }

    #collapsed-navbar {
        display: inline-block;
        position: absolute;
        width: 50%;
        top: 50vw;
        right: 25vw;
    }

    .nav-item {
        background-color: rgba(111, 96, 150, 1);
        border-radius: 0;
        font-weight: 600;
        text-transform: lowercase;
    }

    .active {
        color: #353851;
        background-color: #d85c6b;
    }

    .panel {
        padding: 1.8rem;
    }

    .inner-panel {
        padding: 1.8rem;
    }

    h3 {
        font-size: 1.5rem;
    }

    .entry-date {
        font-size: 0.95rem;
    }

    p {
        font-size: 0.95rem;
    }

    #content-row {
        margin: 0;
    }
}