@import url("https://fonts.googleapis.com/css?family=Raleway");

#app {
    background-position: center;
}

#app #sortable,
#app main {
    padding: 25px;
}

#config-buttons {
    bottom: 50%;
    transform: translateY(50%);
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    box-shadow: rgba(255, 255, 255, 0.1) -1px 1px 1px 0,
                rgba(255, 255, 255, 0.1) 0 -1px 1px 0,
                rgba(0, 0, 0, 0.1) -1px 0 20px 5px;
    background-color: rgba(40, 40, 40, 0.25);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

#config-buttons a {
    background: none;
}

#config-buttons a svg {
    transition: all 0.1s linear;
    color: rgba(255, 255, 255, 0.5);
}

#config-buttons a:hover svg {
    transform: scale(1.1);
    color: rgba(255, 255, 255, 0.95);
}

.black {
    color: black !important;
}

.item {
    box-shadow: rgba(0, 0, 0, 0.1) -1px -1px 3px 0,
                rgba(0, 0, 0, 0.2) 0px 10px 10px -3px,
                rgba(0, 0, 0, 0.04) 0px 10px 10px -3px !important;
    border-radius: 12% / 45%;
    border: none;
    outline: none;
    height: 75px;
    width: 275px;
    margin: 1rem;
    padding: 1rem 1rem 1rem 1rem !important; /* fixed */
    transition: all 1s ease-in-out;
    transition-property: transform, box-shadow, background-color;

    /* Less transparent black */
    background-color: rgba(0, 0, 0, 0.50) !important;

    font-family: 'Raleway', sans-serif;
    font-size: 14px;
}

.item:hover {
    background-color: rgba(0, 0, 0, 0.70) !important;
    box-shadow: rgba(66, 66, 66, 0.1) 0px 30px 30px -17px !important;
}

/* Remove arrow icon visuals */
.item svg {
    display: none !important;
}

/* Remove arrow container + shadows */
.item .col-auto,
.item .fa,
.item .fas,
.item i {
    display: none !important;
}

/* Remove any arrow's pseudo-element shadow */
.item::after {
    display: none !important;
    content: none !important;
}