body
{
    background-color: #27232E;
    margin: 0;
}

.header
{
    background-color: #27232E;
    height: 330px;
    padding: 50px 0;
}

.footer
{
    background-color: #27232e;
    height: 250px;
}

.header-navbar
{
    text-align: center;
}

.sticky-navbar
{
    background-color: #3C325AE5;
    width: 50%;
    height: 25px;
    opacity: 0;
    border-radius: 35px 25px;

    position: fixed;
    top: 0;
    left: 50%;
    padding: 20px;
    text-align: center;

    transform: translateX(-50%) translateY(-100%);
    transition: 0.3s ease;

    pointer-events: none;
}

.sticky-navbar.active
{
    opacity: 1;
    box-shadow: 0 0 100px 15px #A969F3;
    display: block;

    transform: translateX(-50%) translateY(0);
    transition: 0.3s ease opacity, 0.3s ease transform;

    pointer-events: auto;
}

.main-content
{
    background-color: #e4dfec;
    height: 500px;
    border-radius: 15px;

    padding: 50px 200px;
}