html,
body,
#root {
    min-height: 100%;
}

body {
    background-color: #6f604e !important;
    background-image:
        linear-gradient(rgba(34, 28, 22, 0.18), rgba(34, 28, 22, 0.38)),
        url("/rennekoven-background.png") !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-attachment: fixed !important;
}

#root,
#root > div {
    background-color: transparent !important;
}

.MuiPaper-root,
.MuiCard-root {
    background-color: rgba(255, 252, 247, 0.94) !important;
    border: 1px solid rgba(255, 255, 255, 0.68) !important;
    box-shadow: 0 20px 60px rgba(37, 27, 16, 0.28) !important;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.MuiInputBase-root {
    background-color: rgba(255, 255, 255, 0.78);
}

@media (max-width: 700px) {
    body {
        background-position: 58% center !important;
        background-attachment: scroll !important;
    }

    .MuiPaper-root,
    .MuiCard-root {
        margin-left: 12px !important;
        margin-right: 12px !important;
    }
}

@media (prefers-reduced-transparency: reduce) {
    .MuiPaper-root,
    .MuiCard-root {
        background-color: #fffdf9 !important;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}