/* czcionka z google fonts */
@import url('https://fonts.googleapis.com/css2?family=Dosis:wght@300&display=swap');

/* zmiana metody ustalania wielkości elementów na border box */

html {
box-sizing: border-box;
}

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

img.small {
height: 100px;
float: left;
margin-bottom: 24px;
margin-right: 24px;
border: 2px solid skyblue;
}
img.medium {
max-width: 260px;
width: 50%;
}
img.large {
width: 100%;
}

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

html {
background-color: gray;
}

body {				/* przeklejone z pierwszy.css */
background-color: thistle;
border: 2px solid yellow;	/* ramka grubość, ciągła, kolor*/
border-radius: 20px;		/* zaokrąglenie */
font-family: 'Dosis', sans-serif;
color: #111111;
margin-left: auto;
margin-right: auto;
max-width: 1024px;
min-width:256px;
padding-top: 0px;	
padding-left: 24px;
padding-right: 24px;
padding-bottom: 0px;
}

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

header h1{
font-size: 16px;
text-align: right;
color: yellow;
}

header {
/*background-color: #f45556;*/
}

nav {
background-color: #ffcab68;
}

article {
/*background-color: #ffd239;*/
}

section {
background-color: white;
margin-bottom: 24px;
min-height: 220px;
padding-left: 24px;
padding-right: 24px;
}

aside {
/*background-color: #1eaddf;*/
}

footer {
/* background-color: #ba99c0; */
border: 2px yellow;
}

footer p.copyright {
float: left;
margin-top: 0px;
}

footer p.contact {
text-align: right;
}

section, img, iframe {		/*po przecinku, czyli dotyczy każdego z elementów */
border: 2px solid gray;
border-radius: 16px;
}

@media all and (min-width: 600px)	/*all mogłoby byc print, albo screen */
{					/*and - ma spełniać 2 warunki */
article {
float: left;
width: 66%;
}
aside {
float: left;
padding-left: 24px;
padding-top: 24px;
width: 34%;
}
footer {	/* żeby stopka była na środku, a nie po lewej, jak w poleceniu float */
clear: both;
}
}