@charset "utf-8";
/* CSS Document */
<style>
* {
  box-sizing: border-box;
}

body {
  font-family: Georgia, Times, serif;
  padding: 10px;
  background: #f1f1f1;
}
.poudarek {
	color: #A3443E;
}
/* Pripravljen slog glava */
.header {
  background: white;
  text-align: center;
  padding:20px;
  background: #E0E0E0;
  color: #000000;
  font-family:Georgia, Times, serif;
  text-align: center;
  }

/* v glavi slog H1*/
.header h1 {
  font-size: 50px;
  color:#292929;
 }
/* v glavi slog odstavka p*/
.header p{
	margin-top:-20px;
    font-size:20px;
    color:#4A4A4A;
  }

/* Slog navigacije*/
.topnav {
  overflow: hidden;
  background-color: #E0E0E0;
  font-size:16px;
  text-align:center;
  text-transform:uppercase;
  border-top:2px double #999999;
  border-bottom:2px double #999999;
  padding-top:10px;
  padding-bottom:10px;
}

/* Slog povezav v navigaciji*/
.topnav a {
  float:left;
  display: block;
  text-align: center;
  text-decoration: none;
  color: #000000;
  padding: 14px 20px;
  text-decoration: none;
}

/* Slog povezave ob prehodu miške*/
.topnav a:hover {
  background-color:#CCC;
  color: black;
}

/* Dva neenaka stolpca, ki lebdita drug poleg drugega */
/* Levi stolpec */
.leftcolumn {   
  float: left;
  width: 25%;
}

/* Desni stolpec*/
.rightcolumn {
  float: left;
  width: 75%;
  background-color: #f1f1f1;
  padding-left: 20px;
}

/* Učinek kartice efekta za članke */
.card {
  background-color: white;
  padding: 20px;
  margin-top: 20px;
  font-size:12px;
  font-family:Georgia, Times, serif;
  color:#787878;
  background-color:#E0E0E0;
}
.card h2 {
  font-size: 16px;
  color:#292929;
  font-family:Georgia, Times, serif;
 }

/* Počisti učinek lebdebja za stolpci */
.row::after {
  content: "";
  display: table;
  clear: both;
}

/* noga */
.footer {
  padding:15px 0;
  font-size:8px;
  border-top:1px solid #999999;
  border-bottom:1px solid #999999;
  color:#787878;
  font-style:italic;
  background-color:#E0E0E0;
}

/* Odzivna postavitev – ko je zaslon širok manj kot 800 slikovnih pik, naj se stolpca naložita drug na drugega namesto drug ob drugem */
@media screen and (max-width: 800px) {
  .leftcolumn, .rightcolumn {   
    width: 100%;
    padding: 0;
  }
}

/* Odzivna postavitev – ko je zaslon širok manj kot 600 slikovnih pik, naj se navigacijske povezave nalagajo ena na drugo namesto ena poleg druge
 */
@media screen and (max-width: 600px) {
  .topnav a {
    float: none;
    width: 100%;
  }

}
</style>