/* Ogólne ustawienia czcionki */
body {
    font-family: 'Garamond', serif;
    margin: 0;
    padding: 0;
}

/* Układ ogólny strony */
.wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

/* Nagłówek */
header {
    background: Tomato;
    color: #fff;
    text-align: center;
    flex: 0 0 80%;
    height: 80px;
}

/* Główna sekcja */
main {
    flex: 0 0 80%;
    height: 600px;
}

/* Pasek boczny */
aside#sidebar {
    background: Coral;
    width: 20%;
    height: 680px;
}

/* Stopka */
footer {
    width: 100%;
    background: Tomato;
    color: white;
    text-align: center;
    clear: both;
}

/* Obrazki w kształcie koła */
img.avatar {
    border-radius: 50%;
    margin: 0 10px;
}

/* Stylizacja chatu */
#chat {
    border: 1px solid Tomato;
    margin: 15px;
    height: 470px;
    overflow-y: auto;
}

#chat .message {
    border-radius: 5px;
    width: 90%;
    height: 70px;
    margin: 2% auto;
    padding: 3px;
}

#chat .jolka {
    background: #EEE;
}

#chat .jolka img {
    float: left;
}

#chat .krzysiek {
    background: #CCC;
    text-align: right;
}

#chat .krzysiek img {
    float: right;
}

/* Styl przycisku */
button {
    background: Tomato;
    border: 1px solid DarkRed;
    padding: 5px;
    font-weight: bold;
}

/* Pole tekstowe */
input[type="text"] {
    width: 500px;
}
footer{
    background-color: tomato;
    text-align: center;
    color: white;
    clear:both;
}