body
{
    background-color: #303030;
    color: #ffffff;
    font-family: "Lato", sans-serif;
    font-size: 20px;
}
.lato-regular {
                    font-family: "Lato", sans-serif;
                    font-weight: 300;
                    font-style: normal;
              }
.josefin-sans{
                font-family: "Josefin Sans", sans-serif;
                font-optical-sizing: auto;
                font-weight: <weight>;
                font-style: normal;
}
    #logo
    {
        margin-top: 10px;
        margin-bottom: 10px;
        float:left;
        font-family: "Josefin Sans", sans-serif;
        font-size: 70px;
        width:600px;
    }
    #zegar
    {
        margin-top: 10px;
        margin-bottom: 10px;
        float:left;
        font-family: "Josefin Sans", sans-serif;
        font-size: 70px;
    }
    #container
    {
        width: 1000px;
        margin-left: auto;
        margin-right: auto;
    }
    .rectangle
    {
        width: 960px;
        padding: 20px;
    }
    .squere
    {
        float: left;
        width: 50%;
    }
    .tile1
    {
        float: left;
        width: 230px;
        height: 142px;
        margin:10px;
        background-color: cornflowerblue;
        text-align: center;
    }
    .tile1:hover
    {
        background-color: rgba(100, 148, 237, 0.473) ;
    }
    .tile2
    {
        float: left;
        width: 230px;
        height: 142px;
        margin:10px;
        background-color: rgb(33, 56, 100); 
        text-align: center;
    }
    .tile2:hover
    {
        background-color: rgba(33, 56, 100, 0.507) ;
    }
    .tile3
    {
        float: left;
        width: 230px;
        height: 142px;
        margin:10px;
        background-color: rgb(33, 56, 100); 
        text-align: center;
    }
    .tile3:hover
    {
        background-color: rgba(33, 56, 100, 0.486) ;
    }
    .tile4
    {
        float: left;
        width: 480px;
        height: 142px;
        margin:10px;
        padding-top: 5px;
        background-color: rgb(4, 17, 41); 
        text-align: center;
    }
    .tile4:hover
    {
        background-color: rgba(4, 17, 41, 0.466) ;
    }
    .tile5
    {
        margin-top:10px;
        font-size:20px;
        width: 480px;
        height:304px;
        background-color: rgba(163, 185, 178, 0.336);

    }
    #zdj
    {
        float: left;
        width: 237px;
        height: 304px;
    }
    #opis
    {
        float: left;
        height: 284px;
        padding:10px;
        width:223px;
        
    }
    .yt
    {
        float:left;
        margin-top:20px;
        margin-right: 20px;
        height: 142px;
        width: 105px;
        background-color: #d94348;
    }
    .yt:hover
    {
        background-color: #d9434880;
    }
    .fb
    {
        float:left;
        margin-top:20px;
        margin-right: 20px;
        height: 142px;
        width: 105px;
        background-color: #4668b3;
    }
    .fb:hover
    {
        background-color: #4669b379 ;
    }
    .gg
    {
        float:left;
        margin-top:20px;
        margin-right: 20px;
        height: 142px;
        width: 105px;
        background-color: #d95333;
    }
    .gg:hover
    {
        background-color: #d9543381 ;
    }
    .tw
    {
        float:left;
        margin-top:20px;
        height: 142px;
        width: 105px;
        background-color: #d8e7f0;
    }
    .tw:hover
    {
        background-color: #d8e7f06e ;
    }
    a.tilelink
    {
        color: #ffffff;
        text-decoration: none;
        display:block;
    }