.hidden {
    display: none !important;
}

.background {
    overflow: hidden;
    background-image: var(--bg-image);
    background-position: center;
    background-size: cover;
    /* background-repeat: repeat;    */
    /* background-size: contain; */
    width: 100dvw;
    height: 100dvh;
    position: fixed;
    z-index: -999;
    filter: blur(5px);
}

body {
    font-family: "Open Sans";
    margin: 0px;
}

button {
    border-radius: 5px;
    /* baseline, can get overriden by more specific css rules */
}

.center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

/* glass effect used for divs and stuff */
.glass,
.page-content,
.msg,
input {
    background-color: var(--glass);
    backdrop-filter: blur(6px);
    border: 2px rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* just the glass shadow */
/* .glass-shadow {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
} */

input {
    color: var(--text-color);
    border-radius: 4px;
    filter: opacity(0.85);
}

input:focus {
    outline: none;
}