.top-bar, .title-bar {
    background-color: #8EA7E9;
    color: #191919;
}

.menu-icon.dark::after {
    transition: all 0.3s ease;
}

.menu-icon.dark::before {
    transition: all 0.3s ease;
}

.menu-icon.dark.active {
    transition: all 0.3s ease;
}

.menu-icon.dark.active::after {
    transition: all 0.3s ease;
    background: #0a0a0a;
    box-shadow: none;
    transform: rotate(45deg);
    top: 12px;
}

.menu-icon.dark.active::before {
    transition: all 0.3s ease;
    position: absolute;
    top: 12px;
    left: 0;
    display: block;
    width: 100%;
    height: 2px;
    background: #0a0a0a;
    box-shadow: none;
    transform: rotate(-44deg);
    content: "";
}

.menu-icon.dark.active::before:hover {
    opacity: 0.9;
}

.menu-icon.dark.active::after:hover {
    opacity: 0.9;
}

.textMenu {
    font-size: 1.1rem;
    font-weight: 600;
}

li p {
    color: #191919;
}

.top-bar ul {
    background-color: #8EA7E9;
}

.sideTitle {
    font-size: 1.2rem;
    color: #191919;
    font-weight: 700;
}

/*.button {
    background-color: #FFF2F2;
    color: #191919;
    font-size: 1.2rem;
    font-weight: bold;
    box-shadow: 0 4px 6px #E5D9D9;
}*/

.pink {
    margin-right: 1.5rem;
    background-color: #FFF2F2;
    color: #191919;
    font-size: 1.2rem;
    font-weight: bold;
    box-shadow: 0 4px 6px #E5D9D9;
}

.pink:hover,
.pink:focus {
    background-color: #E5E0FF;
    color: #191919;
    box-shadow: 0 4px 6px #cec9e5;
}

.blue {
    margin-left: 1.5rem;
    background-color: #e2f0f6;
    color: #191919;
    font-size: 1.2rem;
    font-weight: bold;
    box-shadow: 0 4px 6px #E5D9D9;
}

.blue:hover,
.blue:focus {
    background-color: #aad3e4;
    color: #191919;
    box-shadow: 0 4px 6px #cec9e5;
}



/*.button:hover,
.button:focus {
    background-color: #E5E0FF;
    color: #191919;
    box-shadow: 0 4px 6px #cec9e5;
}*/

.pageTitle {
    padding-top: 1rem;
}

.githubPage {
    font-size: 1.5rem;
}

.callout.secondary.footer {
    background-color: #7286D3;
}

.footerMenu a {
    color: #191919;
}

.footerMenu a:hover {
    font-weight: bold;
}
.topHeaderContainer {
    height: 300px; /* Set the desired height for the container */
    width: 100%;
    background-image: url('images/header.png');
    background-size: cover;
    background-position: center;
}