/* Resetowanie marginesów i paddingu oraz płynne przewijanie */

* {
margin: 0;
padding: 0;
scroll-behavior: smooth;
}

/* Stylizacja body */
body {
font-family: 'Roboto';
}

/* Stylizacja logo */
.logo img {
height: 40px;
display: block;
margin: 0 auto;
padding: 12px 0;
}

/* Stylizacja wrappera */
.wrapper {
width: 70%;
margin-left: 15%;
}

/* Stylizacja nawigacji */
.nav {
height: 35px;
background-color: #808080;
}

.nav a {
display: block;
float: left;
padding: 9px 12px 10px 12px;
text-align: center;
font-size: 13px;
text-decoration: none;
color: white;
}

.nav a:last-child {
background-color: #B3B3B3;
font-weight: bold;
color: white;
letter-spacing: 1px;
}

.nav a:last-child:hover {
background-color: #EA212D;
color: black;
}

.nav a:hover {
background-color: #595959;
}

a.foc {
 background-color: #595959;
}

/* Stylizacja sekcji głównej */

.main {
background-color: #E6E6E6;
box-shadow: 0px -1px 2px grey;
margin-top: 40px;
height: 1000px;
}

.main h1 {
padding-top: 60px;
font-size: 28px;
text-transform: uppercase;
}

.main h2 {
padding: 15px 20px 0 20px;
font-size: 42px;
}

.main p {
font-size: 73px;
}

/* Stylizacja paragrafów z kategoriami */

p.kat {
font-size: 16px;
text-transform: uppercase;
font-weight: bold;
color: #E60000;
padding: 20px 0 0 20px;
}

p.datetime {
font-size: 10px;
padding-left: 20px;
padding-top: 17px;
color: #808080;
}

p.preview {
width: 86%;
font-size: 26px;
margin-left: 7%;
margin-top: 20px;
}

p.articleText {
width: 86%;
font-size: 16px;
margin-left: 7%;
margin-top: 20px;
}

/* Stylizacja obrazów w artykułach */

.article_image {
width: 95%;
 height: 400px;
object-fit: cover;
padding-left: 20px;
padding-top: 25px;
}

/* Stylizacja artykułów */
article {
height: 300px;
background-color: white;
float: left;
width: 25%;
margin-top: 10px;
margin-bottom: 90px;
padding-bottom: 15px;
}

article:hover {
background-color: #D9D9D9;
cursor: context-menu;
}

.news {
width: 80%;
height: 89%;
padding: 0 10%;
margin-top: 18px;
}

.news_image {
width: 100%;
overflow: hidden;
}

.news_image img {
width: 100%;
}

/* Stylizacja linków w artykułach */

article a {
color: red;
display: block;
margin-top: 10px;
text-decoration: none;
font-size: 15px;
}

article a:hover {
color: #CC0000;
text-decoration: underline;
}

/* Stylizacja nagłówków w artykułach */

article h5 {
margin-top: 15px;
font-size: 13px;
}

/* Stylizacja stopki */
footer {
height: 125px;
margin-top: 40px;
background-color: #808080;
font-size: 13px;
text-align: center;
}

/* Stylizacja logowania (login.php) */

.log {
width: 40%;
margin-left: 30%;
}

.log h2 {
text-align: center;
padding: 0;
margin-top: -10px;
padding-bottom: 30px;
}

.showpass {
position: relative;
width: 16px;
height: 16px;
margin: 8px;
box-shadow: none;
}

.submit {
width: 100%;
height: 40px;
margin-top: 20px;
}

.submit:hover {
background-color: #808080;
color: white;
cursor: pointer;
border: 1px solid black;
}

/* Stylizacja artykułu (createArticle.php) */

@media (max-width: 1024px) {
.main {
height: 920px;
}
article {
height: 100%;
}
.log {
width: 50%;
margin-left: 25%;
}
.article_image {
width: 94%;
height: 100%;
padding-left: 3%;
padding-top: 15px;
 }
}

@media (max-width: 960px) {

.wrapper {
width: 82%;
margin-left: 9%;
}
.main {
height: 1500px;
}
.main h2 {
font-size: 26px;
}
article {
height: 100%;
width: 50%;
margin-bottom: 25px;
}
article a {
margin-top: 10px;
font-size: 15px;
}
.article_image {
height: 100%;
}
}

@media (max-width: 768px) {

.wrapper {
width: 86%;
margin-left: 7%;
}
.nav a {
padding: 10px 9px;
font-size: 12px;
}
.main {
height: 3100px;
}
article {
height: 100%;
width: 100%;
margin-bottom: 10px;
}
article a {
margin-top: 12px;
font-size: 16px;
}
article h5 {
margin-top: 10px;
}
#świat {
text-align: center;
}
#finanse {
text-align: center;
}
footer {
 height: 135px;
font-size: 12px;
}
footer p {
margin-top: 5px;
}
.log {
width: 60%;
margin-left: 20%;
}
.article_image {
height: 100%;
}
}

@media (max-width: 600px) {

.wrapper {
width: 90%;
margin-left: 5%;
}
.nav {
min-height: 221px;
background-color: #808080;
}
.nav a {
width: 100%;
padding: 10px 0;
font-size: 14px;
}
.nav a:last-child {
background-color: transparent;
}
.nav a:last-child:hover {
background-color: #595959;
color: white;
}
.main {
height: 3100px;
}
article a {
margin-top: 10px;
}
.log {
width: 70%;
margin-left: 15%;
}
.article_image {
height: 100%;
}
}