html, body {
    height: 100%;       /* Definiujemy wysokość na sztywno dla obu elementów */
    margin: 0;
    padding: 0;
}

body { 
    display: flex;
    flex-direction: column; 
    justify-content: center; /* Wyśrodkuje kontener w pionie na monitorze */
    align-items: center;     /* Wyśrodkuje w poziomie */
    min-height: 100vh;    /* Strona zawsze zajmuje całą wysokość ekranu */
         background: transparent;
        
         font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
         text-align: center; 
         transition: 0.5s; 
        }
.img-profile {
    text-align: center;
    /* Ujemny margines (MINUS) przyciąga to, co pod spodem */
    margin:20px !important; 
    position: relative;
    z-index: 2;
}
h1 {
    margin-top: 0 !important; /* Kasuje wielką dziurę nad napisem */
    padding-top: 0 !important;
}
.container { 
    /* Usuwamy wszelkie marginesy górne, żeby nie walczyły z ujemnym marginesem zdjęcia */
    margin-top: 0 !important; 
    border: 1px solid #444; 
    padding-top: 10px;
    display: inline-block;
    border-radius: 15px; 
    background: #222; 
    position: relative;
    z-index: 1;
}
button { 
        padding: 10px 20px; 
        font-size: 16px; 
        cursor: pointer; 
        background: #007bff; 
        color: white; 
        border: none; 
        border-radius: 5px; 
        margin-bottom: 20px;
       }

        button:hover { background: #0056b3; }

#clock { font-size: 48px; 
         font-weight: bold; 
         color: #00ff00; 
         margin: 20px 0; 
        }