:root {
    --text-color: #2E3641;
    --sidebar-color: rgb(241, 154, 56);
    --sidebar-gradient-start: rgba(241, 154, 56, 1);
    /* --sidebar-gradient-end: rgba(254, 250, 158, 1); */
    --sidebar-gradient-end: var(--logo-red);
    /* --body-gradient-start: rgba(255, 255, 255, 1); */
    /* --body-gradient-end: rgba(254, 250, 158, 1); */
    --body-gradient-start: #d1efee;
    --body-gradient-end: white;

    --logo-red: #B11F24;
    --logo-purple: #613E98;
    --logo-green: #1BB1AC;

    --highlight-color: var(--logo-green);
    --second-highlight-color: var(--logo-purple);
  }

h1,
h2,
h3,
h4,
h5 {
    font-family: "Amatic SC", sans-serif;
    font-weight: bold;
}

body {
    font-family: "Poppins", sans-serif;
    font-size: 18px;
    color: var(--text-color);
}

a {
    color: var(--highlight-color);
    text-decoration: none;
    font-weight: 500;
}

.highlight-color {
    color: var(--highlight-color);
}

.second-highlight-color {
    color: var(--second-highlight-color);
}

hr {
    width: 50px;
    border: 5px solid var(--second-highlight-color);
}

hr.highlight-color {
    border: 5px solid var(--highlight-color);
}

hr.thin {
    border: 3px solid;
}

#mySidebar, header {
    color: white;
    background: var(--sidebar-color);
    background: linear-gradient(160deg, var(--sidebar-gradient-start) 20%, var(--sidebar-gradient-end) 100%);
    font-weight: normal !important
}

.w3-button {
    background-color: transparent;
}

.w3-button:hover {
    background-color: white !important;
    color: black !important;
}

#logo {
    width: 100%;
    padding-bottom: 2rem;
}

#logo-mobile {
    display: block;
    width: 50%;
    max-width: 250px;
    margin: auto;
}

.w3-overlay {
    z-index: 3;
}

.menu-anchor {
    margin-top: 75px;
}

w3-hide-small {
    display: block;
}

/* Media query for small screens */
@media only screen and (max-width: 992px) {
    .menu-anchor {
        padding-top: 100px;
        margin-top: -55px;
    }

    body {
        background: var(--body-gradient-start);
        background: linear-gradient(255deg, var(--body-gradient-start) 10%, var(--body-gradient-end) 100%);
    }

    .w3-xxxlarge {
        font-size: 42px !important;
    }

}