:root {
    --blue-color: #2b93d1;
    --white-color: #fff;
    --yellow-color: #ffcc4e;
    --brown-color: #65081e;
    --paragraph-color: #a6a6a6;
}
body {
    font-family: "Jost", serif;
}
.btn {
    background-color: var(--yellow-color);
    color: var(--brown-color);
    border-radius: 10px;
    padding: 10px 18px;
    font-weight: 500;
}
header {
    position: fixed;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 10px 0;
    z-index: 99;
    background: linear-gradient(
        rgb(255, 255, 255) 44%,
        rgba(255, 255, 255, 0.03) 105%
    );
    /* transition: background-color 0.3s, box-shadow 0.3s; */
    transition: ease-in-out 0.3s;
}
.background-head {
    background-color: #231f20;
}
header .navbar {
    margin-bottom: 0;
    justify-content: end;
}
header ul li {
    list-style: none;
    margin-left: 20px;
}
header ul li a {
    color: var(--blue-color);
    text-decoration: none;
    text-transform: capitalize;
    font-size: 15px;
    font-family: "Jost", serif;
    transition: 0.3s ease;
}
header ul li a:hover {
    color: var(--primary-color);
}
/* .main-tool-bar--scrolled {
    position: fixed;
    animation: slideout 0.3s ease-in-out;
    width: 100%;
    background-color: #fff;
}

@keyframes slideout {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
} */

.close .button {
    position: absolute;
}
.close .button {
    position: absolute;
    right: 100px;
    top: 34px;
    width: 43px;
    height: 43px;
    border: none;
    background: rgb(255 204 76 / 47%);
    border-radius: 5px;
    transition: background 0.5s;
    display: flex;
    align-items: center;
}

.close .button:hover {
    background-color: var(--yellow-color);
}
.close .button:hover > .close {
    animation: close 0.2s forwards 0.25s;
}

@keyframes close {
    100% {
        opacity: 1;
    }
}
.humburger-menu {
    display: none;
}