body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: Arial, sans-serif;
    background-color: rgb(1, 186, 189); 
    color: darkturquoise;
    text-align: center;
    

}


.container {
    display: grid;
    grid-template-columns: repeat(3, 250px); /* 3 kolumny po 250px */
    grid-template-rows: auto;                /* automatyczna wysokość wierszy */
    gap: 20px;                               /* odstęp między kartami */
    justify-content: center;                  /* wyśrodkowanie poziome całej siatki */
    align-items: center;                      /* wyśrodkowanie pionowe w siatce */
    padding: 50px 20px;
}


.card {
    background-color: darkblue;
    border: 2px solid darkblue;
    border-radius: 15px;
    padding: 20px;
    text-align: center;
    box-shadow: 0 0 15px darkblue;
}


.card h2 {
    color: cyan;
    margin-bottom: 10px;
}


a {
    color: lightskyblue;
    text-decoration: none;
    font-weight: bold;
}


a:hover {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff;
}


#clock {
    font-size: 1.5em;
    font-weight: bold;
}


#weather {
    font-size: 1.2em;
    margin-top: 5px;
}

h1 {
    color: indigo
}