@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Condensed:wght@300;600&display=swap');

html {
    /* The image used */
    background: url(bg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-color: #000;

    height: 100%;
    margin: 0;
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 300;
    line-height: 3em;
    /*font: 400 15px/1.8 "Lato", sans-serif;*/
    color: rgb(196, 196, 196);

}

#logo {
    
    position: fixed;
    top: 45px;
    left: 45px;

    font-size: 3.5em;
    font-family: 'IBM Plex Sans Condensed', sans-serif;
    font-weight: 300;

    color:white;
}

#logo img {
    position: relative;
    top: -6px;
}

#logo b {
    font-weight: 600;
}


#centercode {
    position: fixed;
    text-align: center;
    font-size: 1.5em;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color:rgb(187, 187, 187);
}

#user {
    color: rgb(224, 224, 224);
}

#code {
    color:white;
    font-size: 4em;
    position: relative;
    top: -0.25em;
}

.fixed-bottom {
    background-color: rgba(0, 0, 0, 0.8);
    font-size: 1.5em;
    padding: 2em;
    text-align: center;
    max-height: 33%;
}

.instructions {
    margin-top: 0.3em;
    display: inline-block; vertical-align: top;
    color: rgb(138, 138, 138);
    text-align: left;
}

.instruction-img {
    display: inline-block; vertical-align: top;
    margin-left: 2em;
}

@media only screen and (max-device-width: 820px) {
    .fixed-bottom {
        max-height: 33%;
        padding: 1em;
    }
}