@charset "UTF-8";
/* zmiana metody ustalania wielkości elementów na border box */

html {
box-sizing: border-box;
}

*, *:before, *:after {
box-sizing: inherit;
}

/* style dla różnych elementów strukturalnych */

html {
background-color: gray;
}

body {
background-color: White;
    color: #111111;
    font-family: sans-serif;
    margin-left: auto;
    margin-right: auto;
    max-width: 1024px;
    min-width: 256px;
    padding-left: 24px;
    padding-right: 24px;
}

header {
background-color: #f45556;
}

header p {
    float: left;
font-size: 16px;
font-weight: bold;
margin-top: 0px;
}

header h1 {
    font-size: 16px;
    text-align: right;
}
nav {
background-color: #ffcab68;
}

nav ul {
list-style-type:none;
background-color:#B577B5;
border: 4px solid #111111;
border-radius: 10px;
font-family:sans-serif;
font-weight:bold;
padding: 16px;
}
nav ul li {
display:inline;
border-right: 2px solid #111111;
padding-right: 8px;
padding-left: 8px;
}
nav ul li:last-child {
border-right:none;
}
nav ul li a {
text-decoration:none;
color:#111111;
}
nav li.selected {
    color: #606060;
}
nav li a:hover {
    text-decoration: underline;
}

article {
background-color: #ffd239;
}

section {
background-color: #88bb75;
    margin-bottom: 24px;
    min-height: 320px;
    padding-left: 24px;
    padding-right: 24px;
}

aside {
background-color: #1eaddf;
}

footer {
background-color: #ba99c0;
}
footer p.copyright {
    float: left;
    margin-top: 0px;
}
footer p.contact {
    text-align: right;
}
img.small {
    float: left;
    height: 200px;
    margin-bottom: 24px;
    margin-right: 24px;
}
img.medium {
    max-width: 360px;
    width: 50%;
}
img.large {
    width: 100%;
}