@import url('https://fonts.googleapis.com/css2?family=Bitcount+Prop+Single:wght@100..900&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

*{
    margin:0;
    padding:0;
    box-sizing: border-box;
    font-family: "Bitcount Prop Single",Arial;
}
header{
    background-color: black;
    color: white;
    display: flex;
    flex-direction: row;
    align-items: center;
    width:100%;
    justify-content: space-between;
    padding:20px;
    font-size:1em;
}
/*
.bitcount-prop-single-<uniquifier> {
  font-family: "Bitcount Prop Single", system-ui;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-variation-settings:
    "slnt" 0,
    "CRSV" 0.5,
    "ELSH" 0,
    "ELXP" 0;
}
*/
body{
    background-image: url("Assets/light-bg.jpg");
    background-size: cover;
}
#page-1{
    display:grid;
    font-family: "Bitcount Prop Single",Arial;
    text-align: center;
    margin-top: 20px;
    margin-left: 20px;
    column-gap: 10px;
    row-gap: 20px;
    grid-template-columns: repeat(8,1fr);
}

#page-2{
    display:none;
    font-family: "Bitcount Prop Single",Arial;
    text-align: center;
    margin-top: 20px;
    margin-left: 20px;
    column-gap: 10px;
    row-gap: 20px;
    grid-template-columns: repeat(8,1fr);   
}
img{
    width:64px;
    height:64px;
}
#time_display{
    width:100px;
    height:30px;
    text-align: center;
    font-size: 1rem;
    background-color: black;
    color: white;
    margin:0;
    border:0;
}
#battery img{
    width:32px;
    height:32px;
}

#time,#signal{
    margin-right:20px;
}
#signal img{
    width:32px;
    height: 32px;
}

#head{
    font-family: "Bitcount Prop Single",Arial;
    flex:1;
    text-align: center;
    font-size: 40px;
    color:red;
}
#bgBox{
    margin-right: 20px;
}

footer{
    position: fixed;
    bottom:0;
    width:100%;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    text-align: center;
    font-family: "Bitcount Prop Single",Arial;
}
.dark-mode {
    background-image: url("Assets/dark-bg.jpg");
    background-size:cover;
    color: white;
}


#page-change{
    border:none;
}


@media (max-width: 480px) {
    #jio,#signal,#battery{
        font-size:0.4rem;
    }
    #time{
        display: none;
    }
    img{
        width:32px;
        height: 32px;
    }
    header{
        width:100%;
    }
    #page-1{
        display:grid;
        margin-top: 20px;
        margin-left: 20px;
        column-gap: 10px;
        row-gap: 20px;
        font-size: 0.8rem;
        grid-template-columns: repeat(4,1fr);
    }
    #page-2{
        display:none;
        margin-top: 20px;
        margin-left: 20px;
        column-gap: 10px;
        row-gap: 20px;
        font-size: 0.8rem;
        grid-template-columns: repeat(4,1fr);    
    }
    footer{
        position: fixed;
        bottom:0;
        width:100%;
        display: grid;
        grid-template-columns: repeat(4,1fr);
        row-gap: 40px;
        justify-content: space-around;
        text-align: center;
    }
}