html {
    width: 100%;
    height: 100%;
    color: #000000;
    overflow: hidden;
}

body {
    background-position: center;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-image: url("/hut8_login.png");
    background-size: cover;
    font-family: "Open Sans", sans-serif;
}

button {
    width: 100%;
    /* margin-bottom: 50px; */
}

form {
    color: #000000;
}

footer {
    height: 0px;
}

div {
    border-radius: 10px;
}

.btn:hover {
    color: #ffffff;
    background-color: #008080;
    transition: 1000ms;
    text-transform: uppercase;
}

.btn {
    color: #008080;
    transition: 1000ms;
    border-radius: 3px;
    text-transform: uppercase;
}

img {
    size: 100px;
    align-items: flex-start;
}

.sigin {
    margin-left: 24px;
    margin-top: 20px;
}

.headerimg {
    width: 200px;
    max-width: 75%;
    margin: 24px;
}

#snackbar {
    visibility: hidden;
    /* Hidden by default. Visible on error */
    background-color: #da8986;
    /* React's error red background color */
    color: #fff;
    /* White text color */
    text-align: center;
    /* Centered text */
    border-radius: 10px;
    /* Rounded borders */
    padding: 16px;
    /* Padding */
    position: fixed;
    /* Sit on top of the screen */
    bottom: 30px;
    /* 30px from the bottom */
    inline-size: auto;
    /* Same width as login */
}

#snackbar.show {
    visibility: visible;
    /* Show the snackbar */
    /* Add animation: Take 0.5 seconds to fade in and out the snackbar.
  However, delay the fade out process for 2.5 seconds */
    -webkit-animation:
        fadein 0.5s,
        fadeout 0.5s 4.5s;
    animation:
        fadein 0.5s,
        fadeout 0.5s 4.5s;
}

#billboard {
    visibility: hidden;
    /* Hidden by default. Visible on ? */
    text-align: center;
    /* Centered text */
    inline-size: 25%;
    /* Same width as login */
    overflow-wrap: break-word;
    background-color: #90caf9;
    /* Primary pallete main background color */
    color: #000000;
    /* Black text color */
    border-radius: 10px;
    /* Rounded borders */
    padding: 16px;
    /* Padding */
}

#billboard.show {
    visibility: visible;
    /* Show the billboard */
}

/* Animations to fade the snackbar in and out */
@-webkit-keyframes fadein {
    from {
        bottom: 0;
        opacity: 0;
    }

    to {
        bottom: 30px;
        opacity: 1;
    }
}

@keyframes fadein {
    from {
        bottom: 0;
        opacity: 0;
    }

    to {
        bottom: 30px;
        opacity: 1;
    }
}

@-webkit-keyframes fadeout {
    from {
        bottom: 30px;
        opacity: 1;
    }

    to {
        bottom: 0;
        opacity: 0;
    }
}

@keyframes fadeout {
    from {
        bottom: 30px;
        opacity: 1;
    }

    to {
        bottom: 0;
        opacity: 0;
    }
}