body {
    min-width: 400px;
    min-height: 400px;
    padding: 0;
    color: #ffffff;
    background-color: #2a2438;
    /* Dark purple background */
    margin: 0;
    margin-left: 160px;
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    font-size:larger;
}

.noto-sans-mdc {
    font-family: "Noto Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    font-variation-settings: "wdth" 100;
}

.inter-mdc {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}

a {
    text-decoration: underline;
    text-decoration-color: #b19e67;
    color: #ffffff;
}

h1 {
    text-align: center;
}

h2 {
    text-align: center;
}

h3 {
    text-align: center;
}

h1 a {
    color: inherit !important
}

h2 a {
    color: inherit !important
}

h3 a {
    color: inherit !important
}

h4 a {
    color: inherit !important
}

h5 a {
    color: inherit !important
}

h6 a {
    color: inherit !important
}

#post-list {
    margin-bottom: 1em;
    margin-top: 1em;
}

pre {
    margin: 2em 1em 2em 4em;
    font-family: 'Source Code Pro', monospace;
    color: #e9ddba;
    background: none repeat scroll 0 0 #000000;
    border-radius: 2px;
    font-size: 0.9em;
    font-style: normal;
    letter-spacing: 0.015em;
    line-height: 130%;
    padding: 0.7em;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.header {
    display: block;
    background-color: #201b2a;
}

.main {
    flex: 1;
    background-color: #201b2a;
}

article {
    max-width: 1200px;
    padding: 2em;
    margin: auto;
}

.main img {
    max-width: 80%;
    height: auto;
    display: block;
    margin: auto;
}

.card {
    width: 190px;
    overflow: hidden;
    padding: 1em;
    height: 200px;
    border-radius: 1rem;
    background-color: #4158D0;
    background-image: linear-gradient(43deg, #201b2a 0%, #53466e 46%, #b19e67 100%);
    box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
}



.card header {
    font-size: normal;
}

.cards {
    max-width: 800px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    grid-gap: 20px;
}

blockquote {
    background-color: #201b2a;
    font-size: x-large;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 20px;
    padding: 15px;
    border-left: 6px solid #e9ddba;
}

/* Sidebar */
.sidebar {
    width: 120px;
    background-color: #2a2438;

    padding: 80px 20px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: fixed;
    /* Ensures the sidebar stays fixed */
    top: 0;
    bottom: 0;
    left: 0;
    height: 100dvh;
    /* Full height */
    overflow-y: auto;
    /* Allows scrolling if menu is long */
    transition: transform 0.3s ease;
}

.sidebar ul {
    padding: 0;
}

.sidebar li a {
    display: inline-block;
    margin-bottom: 10px;
}

.logo {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
}

.logo img {
    max-width: 20%;
    height: auto;
}

.menu-toggle {
    font-size: 24px;
    color: #ebe9d6;
    background: none;
    background-color: #2a2438;
    border: none;
    cursor: pointer;
    display: none;
    /* Hidden on desktop */
    position: fixed;
    /* Keeps it visible when scrolling */
    top: 5px;
    /* Adjust to position at the top */
    left: 5px;
    /* Align to the left */
    z-index: 1000;
    /* Ensures it's above other elements */
    padding: 10px;
    border-radius: 5px;
}

nav ul {
    list-style: none;
}

footer#footer {
    min-width: 100% !important;
    background-color: #2a2438;
    padding-top: 100px;
}

/* Responsive Design */
@media (max-width: 1025px) {
    body {
        margin-left: 0;
        min-height: max-content;
    }

    .sidebar {
        transform: translateX(-120vw);
        height: max-content;
        width: 100vw;
    }

    .sidebar.visible {
        transform: translateX(0);
    }

    .sidebar li a {
        margin-top: 10px;
    }

    .menu-toggle {
        display: flex;
    }

    .logo img {
        max-width: 40%;
    }

    .cards {
        max-width: fit-content;
    }
}

/* Footer transition. Courtesy of https://shapedividers.com/ */

.shapedividers_com-8977 {
    overflow: hidden;
    position: relative;
}

.shapedividers_com-8977::before {
    content: '';
    font-family: 'shape divider from ShapeDividers.com';
    position: absolute;
    bottom: -1px;
    left: -1px;
    right: -1px;
    top: -1px;
    z-index: 3;
    pointer-events: none;
    background-repeat: no-repeat;
    background-size: 100% 90px;
    background-position: 50% 0%;
    background-image: url('data:image/svg+xml;charset=utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35.28 2.17" preserveAspectRatio="none"><path d="M0 .5c3.07.55 9.27-.42 16.14 0 6.88.4 13.75.57 19.14-.11V0H0z" fill="%23201b2a"/><path d="M0 1c3.17.8 7.29-.38 10.04-.55 2.75-.17 9.25 1.47 12.67 1.3 3.43-.17 4.65-.84 7.05-.87 2.4-.02 5.52.88 5.52.88V0H0z" opacity=".5" fill="%23201b2a"/><path d="M0 1.85c2.56-.83 7.68-.3 11.79-.42 4.1-.12 6.86-.61 9.58-.28 2.73.33 5.61 1.17 8.61 1 3-.19 4.73-.82 5.3-.84V.1H0z" opacity=".5" fill="%23201b2a"/></svg>');
}


@media (min-width:1025px) {
    .shapedividers_com-8977::before {
        bottom: -0.1vw;
        left: -0.1vw;
        right: -0.1vw;
        top: -0.1vw;
        background-size: 118% 183px;
        background-position: 50% 0%;
        background-image: url('data:image/svg+xml;charset=utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35.28 2.17" preserveAspectRatio="none"><path d="M0 .5c3.07.55 9.27-.42 16.14 0 6.88.4 13.75.57 19.14-.11V0H0z" fill="%23201b2a"/><path d="M0 1c3.17.8 7.29-.38 10.04-.55 2.75-.17 9.25 1.47 12.67 1.3 3.43-.17 4.65-.84 7.05-.87 2.4-.02 5.52.88 5.52.88V0H0z" opacity=".5" fill="%23201b2a"/><path d="M0 1.85c2.56-.83 7.68-.3 11.79-.42 4.1-.12 6.86-.61 9.58-.28 2.73.33 5.61 1.17 8.61 1 3-.19 4.73-.82 5.3-.84V.1H0z" opacity=".5" fill="%23201b2a"/></svg>');
    }
}

@media (min-width:2100px) {
    .shapedividers_com-8977::before {
        background-size: 118% calc(2vw + 183px);
    }
}