/* ELEMENTS */
/* collections of all kind of
elements and custom objects */

/* GLOBAL */

#backdrop, .backdrop{
    position:               fixed!important;
    display:                block!important;
    width:                  100vw!important;
    height:                 100vh!important;
    top:                    0;
    left:                   0;
    z-index:                100;
    transform:              translateY(100vh);
    opacity:                0;
    background:             #000000ee;
    backdrop-filter:        blur(3px);
    transition:             opacity 250ms, transform 0ms 250ms;
}

#backdrop.show, .backdrop.show{
    opacity:                1;
    transform:              translateY(0vh);
    transition:             opacity 250ms, transform 0ms;
}

/* inline links */

p > a {
    position:               relative;
    display:                inline-block;
    z-index:                1;
    text-decoration:        none;
    transition:             var(--quick);
}

p > a:hover {
    opacity:                0.5;
}

/* p > a::after{
    content:                '';
    display:                block;
    position:               absolute;
    width:                  calc(100% + 0.5rem);
    height:                 0.1rem;
    bottom:                 0;
    left:                   50%;
    z-index:                -1;
    transform:              translateX(-50%);
    background-color:       var(--lightcolor);
    transition:             var(--quick);
}

p > a:hover::after{
    height: 100%;
} */

/* BUTTON */

a.button, button.button, input.button {
    cursor:             pointer;
    position:           relative;
    display:            inline-flex;
    align-items:        center;
    justify-content:    center;
    font-size:          2rem;
    padding:            1rem 2.5rem;
    background:         var(--accentcolor);
    color:              var(--lightcolor);
    text-decoration:    none;
    transition:         var(--quick);
    border-radius:      3px;
    border:             solid 3px var(--accentcolor);
}

button.button:hover,a.button:hover, input.button:hover{
    background:         transparent;
    color:              var(--accentcolor);
}

#book-now {
    display:            none;
    font-size:          1.8rem;
    font-weight:        400;
    border-radius:      30px;
    padding:            6px 25px;
    margin:             0 20px;
    color:              var(--darkcolor);
    background:         0 0;
    border:             solid 3px var(--darkcolor);
}
@media(min-width: 700px){
    #book-now {
        display: block;
    }
}

#book-now:hover {
    color:              var(--lightcolor);
    background:         var(--darkcolor);
}