@import "tailwindcss";

@layer base {
    body {
        font-family: "Open Sans" sans-serif;
        background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url("https://unsplash.it/1920/1080?landscape");
        background-size: cover;
        background-blend-mode: overlay;
        background-position: center;
        backdrop-filter: blur(20%);

    }

    #help-box {
        display: none;
        position: absolute;
        bottom: 20vh;
        right: 20px;
        width: 30%;
        height: auto;
        padding: 12px;
        background-color: #ffffff;
        color: black;
        border-radius: 4px;
        transition: all 0.5s ease;
    }
}