body {
    header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 5;

        display: flex;
        justify-content: flex-end;
        align-items: center;

        padding: .75%;

        @media screen and (max-width: 480px) {
            padding: 2%;
        }

        #batteryDiv {
            width: 7%;
            margin: 0 .5%;
            display: flex;
            justify-content: flex-end;
            align-items: center;

            @media screen and (max-width: 1200px) {
                width: 8%;
                margin: 0 .75%;
            }

            @media screen and (max-width: 979px) {
                width: 10%;
            }

            @media screen and (max-width: 767px) {
                width: 15%;
            }

            @media screen and (max-width: 480px) {
                width: 20%;
                margin: 0 1%;
            }

            #chargingStatus {
                display: none;
                aspect-ratio: 1/1;
                width: 12.5%;
                flex-shrink: 0;
                margin: 0 1%;
            }

            #battery {
                aspect-ratio: 1/1;
                width: 25%;
                flex-shrink: 0;
                margin: 0 6% 0 2%;
            }
        }
    }

    #form {
        position: fixed;
        top: 50%;
        left: 50%;
        width: 100%;
        height: 100%;
        transform: translate(-50%, -50%);

        #login-form {
            width: 100%;
            height: 100%;
            position: relative;

            img {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                object-fit: cover;
            }

            fieldset {
                border: none;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }
        }
    }

    #startscreen {
        position: fixed;
        top: 50%;
        left: 50%;
        width: 100%;
        height: 100%;
        transform: translate(-50%, -50%);
        transition: 1.5s ease;

        #inner-startscreen {
            width: 100%;
            height: 100%;
            position: relative;

            img {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                object-fit: cover;
            }

            #content {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                text-align: center;

                #time {
                    font-weight: bold;
                    font-size: 5em;
                    margin-bottom: 5%;
                }

                #day {
                    font-size: 1.5em;

                    @media screen and (max-width: 480px) {
                        font-size: 1.25em;
                    }
                }
            }
        }
    }
}