body {
    width:100%;
    height:100%;
    background-color: black;
    z-index: 0;
    Position:absolute;
}

.bg {
    width:100%;
    height:100%;
    /* background-image: url('images/Screenshot 2023-07-31 134059.png'); */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    Position:absolute;
    z-index: 1;
}

.box {
    display:none;
    Position:absolute;
    /* background-image: inherit; */
    background-color: rgba(0,0,0,.5);
    color: rgba(255,255,255,1);
    /* filter: invert(10%);
    -webkit-filter: invert(10%); */
    max-width:40%;
    padding: 10px;
    z-index: 2;
    border-radius: 2.5%;
}

.var {
    display:none;
}

.boxContent {
    word-spacing: 2px;
    z-index: 2;
}

.box.bottomLeft {
    bottom: 20px;
    left: 20px;
}

.box.bottomRight {
    bottom: 20px;
    right: 20px;
}

.box.topLeft {
    top: 20px;
    left: 20px;
}

.box.topRight {
    top: 20px;
    right: 20px;
}

#quote {
    font-size:20px;
    /* color: pink; */
}

#author {
    font-size:30px;
    /* color: white; */
}

#funfact {
    font-size:20px;
    /* color: pink; */
}

#date {
    font-size:40px;
    /* color: pink; */
}

#time {
    font-size:30px;
    /* color: white; */
}

.settings {
    position: fixed;
    bottom: 5px;
    right: 5px;
    padding: 5px;
}