body
{
background-color: #303030;
color:#ffffff;
    font-family: 'Gotu', sans-serif;

}

#container
{
    width: 1000px; /*sprawdzić jak by to wyglądało gdyby tu było auto zamiast 1000px*/
    margin-left: auto;
    margin-right: auto;

}

.rectangle
{
    width: 960px; /* było 1000px ale zmieniliśmy na 960 przez to, że margin wynosi 20px a wymiary musza się zgadzać */
    margin: 20px; /* dzięki temu rectangle nie będzie dotykał container tylko będzie 20px przerwy z każdej strony*/
    text-align: center;


}

 .square
{
    width: 50%;
    float:left;

}

#logo
{
    float:left;
    font-family: 'Gotu', sans-serif;
    font-size:70px;
    width: 600px;
    text-align: left;
}

#zegar
{
    float:left;
    font-family: 'Gotu', sans-serif;
    font-size:70px;
    text-align: left;

}
.tile1
{
    margin:10px;
    width:230px;
    height: 142px;
    background-color: #3095d3;
    float:left;
    text-align: center;

}

.tile1:hover
{
    background-color: #2084c2;
}

.tile2
{
    margin:10px;
    width:230px;
    height: 142px;
    background-color: #666666;
    float:left;
    text-align: center;
}

.tile2:hover
{
    background-color: #555555;
}

.tile3
{
    margin:10px;
    width:230px;
    height: 142px;
    background-color: #93c748;
    float:left;
    text-align: center;
}

.tile3:hover
{
    background-color: #82b637;
}

.tile4
{
    margin:10px;
    width:420px;/* było 480 ale dałam padding. 480-2*30=420. Jak się tego nie zorbi to kafelki się rozlatują */
    height: 82px; /* 142-2*30=82 */
    background-color: #ee5342;
    text-align: center;
    font-size: 26px;
    padding: 30px;
    line-height: 150%; /* to sprawia że odstęp pionowy pomiędzy następnymi liniami tekstu będzie większy. Działa to jak interlinia w edytorze tekstu */
}

.tile5
{
    margin:10px;
    width:420px;
    height: 244px;
    background-color: #666666;
    text-align: justify;
    padding: 30px;
}

.yt
{
    margin:10px;
    width:105px;
    height: 142px;
    background-color: #b94348;
    float:left;
}

.yt:hover
{
    background-color: #c83237;
}

.fb
{
    margin:10px;
    width:105px;
    height: 142px;
    background-color: #4668b3;
    float:left;
}

.fb:hover
{
    background-color: #3557a2;
}

.gplus
{
    margin:10px;
    width:105px;
    height: 142px;
    background-color: #d95333;
    float:left;
}

.gplus:hover
{
    background-color: #c84222;
}

.tt
{
    margin:10px;
    width:105px;
    height: 142px;
    background-color: #3095d3;
    float:left;
}

.tt:hover
{
    background-color: #2084c2;
}

a.tilelink
{
    color: white; /* zmienienie koloru niebieskiego na biały */
    text-decoration: none; /*usuniecie podkreślenia */
    display:block; /* żeby klasa mogła się zachowywać jak blok. Dzięki temu możemy przejśc do następnej strony używając całego kafelka nie tylko ikonki */
     width:230px;
    height: 142px;
}

a.tilelinkhtml5
{
    color: white; /* zmienienie koloru niebieskiego na biały */
    text-decoration: none; /*usuniecie podkreślenia */
}

a.tilelink2
{

    color: white;
    text-decoration: none;
}

a.tilelink3
    {
       color: white;
    text-decoration: none;
    }


a.ytlink
{
  color: white;
    text-decoration: none;
}

a.fblink
{
   color: white;
    text-decoration: none;
}

a.googlelink
{
  color: white;
    text-decoration: none;
}

a.ttlink
{
   color: white;
    text-decoration: none;
}


a.main
{
     color: white;
    text-decoration: none;
}