#container {
display:flex; 
}

#wrapper{
width:850px;
display:inline-block;
background-color:white;
}

#left {
width:301px;
float:left;
margin-right:50px;
}

#right {
width:301px;
float:right;
margin-left:50px;
}
#zik {
position:fixed;
margin-top:30px;
width:301px;
height:601px;
}
#zak {
position:fixed;
margin-top:30px;
width:301px;
height:601px;
}



div#header{
background-color:black;
border-top:5px solid white;
border-left:5px solid;
border-right:5px solid;
border-bottom:5px solid white;

}


h1{
 font-family: Impact, fantasy;   
font-size: 40px;
 padding-left: 8px;
padding-right: 8px;
  -webkit-text-fill-color:#646464;
  -webkit-text-stroke: 1px white;
}
  
#headline {

background-color:#25F;
font-size:28px;
text-align:left;
padding-top: 8px;
padding-bottom:5px;
text-align:center;
font-weight:bold;
}
div#blank p {
font-size:18px;
  text-align:left;
    padding-top: 20px;
    padding-right: 20px;
    padding-bottom: 0px;
    padding-left: 15px;

}

p {
font-size:18px;
 text-align:left;	
	
}
.white{
    color: white; 
}
div#blank {

background-color:white;
font-weight:bold;
border-top:		2px solid lightgray;
border-left:		2px solid #4f6267;
border-right:   2px solid #4f6267;
border-bottom:  2px solid #4f6267;
width:99%;
color:black;
display: inline-block;
}

#block {	
background-color:white;
font-weight:bold;
color:black;
font-size:19px;
width:100%;
height:auto;
float:left;
display: inline-block;

}

#max {
    padding:10px;
}
#max:hover {
    background-color:#FAEBD7;
}
#basic {
	width:190px;
	height:75px;
	border:1px solid;
	display:inline-block;
	border-radius:1px;
	margin:5px;
}
#basic:hover{
    border-radius:25px;
}
#oko {
width:100%;
float:left;
text-align:center;
border-top:		2px solid lightgray;
border-left:		2px solid #4f6267;
border-right:   2px solid #4f6267;
border-bottom:  2px solid #4f6267;
margin-left:1px;
margin-right:1px;
}
#adsense {
  width:99%;
  height:auto;
  margin-top:10px;
  margin-bottom: 10px;
  display:inline-block;
 
}

#similar {
background-color:#F0F8FF;
border:5px ridge lightgray;
}
#similar p {
font-size:18px;
  text-align:left;
    padding-top: 10px;
    padding-right: 30px;
    padding-bottom: 0px;
    padding-left: 30px;
}
#similar h2{
font-family: fantasy, cursive, Serif;
font-size: 30px;
  -webkit-text-fill-color:#646464;
  -webkit-text-stroke: 1px lightgray;  
}
div#similar a{
width:99%; 
padding-left:30px;
padding-right:15px;
font-size: 21px;
color:#2d525d;
}
#similar a:hover {  
background:#28597a;
color:white;
text-decoration:underline;
   }

#content {
width:100%;
height:auto;
background-color:white;
display:inline-block;
}

#link {
width:99%;
border-style:groove;
border-width:2px;
}
.link {
    background-color:black;
    border:2px solid white;
	display:inline-block;
	color:white;
	font-size:15px;
	font-weight:bold;
	padding:2px 4px;
	text-decoration:none;
	margin:2px;

border-top:		9px solid white;
border-left:		9px solid lightgray;
border-right:		9px solid lightgray;
border-bottom:		9px solid #4f6267;


}

.link:hover {
 border-top:		9px solid #4f6267;
border-left:		9px solid lightgray;
border-right:		9px solid lightgray;
border-bottom:		9px solid white;
      
}


table {
width:80%;    
font-family: verdana,arial,sans-serif;
	font-size:11px;
	color:#333333;
	border-width: 1px;
	border-color: #999999;
}
table th {
	background-color:#68898E;
	border-width: 2px;
	padding: 8px;
	border-style: solid;
	border-color: #a9c6c9;
}
table tr {
	background-color:#d4e3e5;
}
table td {
	border-width: 1px;
	padding: 8px;
	border-style: solid;
	border-color: #a9c6c9;
}
.frame {
    width:560px;
    height:315px;
}

a {
    text-decoration:none;
}
#logo {
	border-bottom: 45px solid blue;
	border-left: 50px solid;
	border-right: 50px solid;
	height:0px;
	color:white;
        -webkit-text-fill-color:#3b4251;
        -webkit-text-stroke: 1px white;
	font-size:45px;
	background-color:white;
	text-align:center;
	font-weight:bold;
}


#nav{
background-color:black;
}
	

#footer img {
height:40px;
width:40px;
margin-top:5px;
border:3px ridge lightgray;
border-radius:5px;
}
#footer img:hover {
height:40px;
width:40px;
border:3px solid white;
border-radius:5px;
}
#footer{
width:100%;
height:60px;
background-color:#25F;
color:white;
font-size:25px;
}


@media only screen and (max-device-width: 1540px) {
   
#left {
width:301px;
float:left;	
margin-right:1px;
}
#right {
margin-left:1px;
width:301px;
float:right;
}
}
@media only screen and (max-device-width: 1455px) {
#left {
display:none;
}
}


@media only screen and (max-device-width: 1190px) {
 body {
    display: flex;
    justify-content: center;
}   
    
  #wrapper {
    
    display: block; /* inline-block može ometati centriranje */
    background-color: white;
    margin: 0 auto; /* Automatski centriranje */
}  

 h1{
 font-size: 40px;
font-weight:bold;
 padding-left: 8px;
padding-right: 8px;
} 

div#blank p {
font-size:22px;
  text-align:left;
    padding-top: 20px;
    padding-right: 12px;
    padding-bottom: 0px;
    padding-left: 10px;

}
#right {
display:none;
}
}
@media only screen and (max-device-width: 855px) {


#wrapper {
width:100%;
}

h1{
 font-size: 35px;

 padding-left: 8px;
padding-right: 8px;
}

#nav{
background-color:black;
}

#blank{
background-color:white;
font-weight:bold;
border-top:		2px solid lightgray;
border-left:		2px solid #4f6267;
border-right:   2px solid #4f6267;
border-bottom:  2px solid #4f6267;
 width:99%;
color:black;

}
div#blank p {
font-size:22px;
  text-align:left;
    padding-top: 20px;
    padding-right: 12px;
    padding-bottom: 0px;
    padding-left: 10px;

}


#duo{
width:99%;
float:left;
text-align:left;
}
.frame {
    width:99%;
    height:auto;

}

.code {
background-color:silver;
font-weight:bold;
border-style:groove;
font-size:10px;
  text-align:left;

    padding-top: 10px;
    padding-right: 30px;
    padding-bottom: 10px;
    padding-left: 3px;
}
#line{
width:33%;
height:350px;
background-color:#1874CD;
display:inline-block;
}





#content {
background-color:#E0EEEE;

}
#headline {
background-color:#25F;
font-size:27px;
text-align:left;
padding-left: 8px;
padding-right: 8px;
padding-top: 8px;
padding-bottom:8px;
}
#link {

width:99%;
border-style:groove;
border-width:2px;
}
.link {
        background-color:black;
        border:2px solid white;
	display:inline-block;
	color:white;
	font-size:15px;
	font-weight:bold;
	padding:2px 4px;
	text-decoration:none;
	margin:2px;

border-top:		9px solid white;
border-left:		9px solid lightgray;
border-right:		9px solid lightgray;
border-bottom:		9px solid #4f6267;


}

.link:hover {
 border-top:		9px solid #4f6267;
border-left:		9px solid lightgray;
border-right:		9px solid lightgray;
border-bottom:		9px solid white;
      
}
}
@media only screen and (max-device-width: 565px) {
 
h1{
 font-size: 29px;
 -webkit-text-fill-color:lightgray;
-webkit-text-stroke: 0px ; 
 padding-left: 7px;
padding-right: 7px;
}

div#blank p {
font-size:21px;
  text-align:left;
    padding-top: 15px;
    padding-right: 7px;
    padding-bottom: 0px;
    padding-left: 7px;

}
}
@media only screen and (max-device-width: 500px) {
div#blank p {
font-size:19px;
  text-align:left;
    padding-top: 15px;
    padding-right: 6px;
    padding-bottom: 0px;
    padding-left: 6px;

}


#logo {
	border-bottom: 35px solid blue;
	border-left: 50px solid;
	border-right: 50px solid;
	height:0px;
	color:white;
        -webkit-text-fill-color:#3b4251;
        -webkit-text-stroke: 1px white;
	font-size:30px;
	background-color:white;
	text-align:center;
	font-weight:bold;
}
}


@media only screen and (max-device-width: 400px) {
   h1{
 font-size: 25px;
 -webkit-text-fill-color:lightgray;
-webkit-text-stroke: 0px ; 
padding-left: 5px;
padding-right: 5px;
}


img {
 width:95%;
  height:auto;
}


div#blank p {
font-size:18px;
  text-align:left;
    padding-top: 12px;
    padding-right: 6px;
    padding-bottom: 0px;
    padding-left: 6px;

}
table {
width:99%;  
}
}
@media only screen and (max-device-width: 320px) {
h1{
 font-size: 20px;
 -webkit-text-fill-color:lightgray;
-webkit-text-stroke: 0px white; 
 padding-left: 3px;
padding-right: 3px;
}
#headline {
background-color:#25F;
font-weight:normal;
font-size:18px;
text-align:left;
padding-left: 4px;
padding-right: 4px;
padding-top: 4px;
padding-bottom:4px;
}



div#blank p {
font-size:15px;
  text-align:left;
    padding-top: 10px;
    padding-right: 5px;
    padding-bottom: 0px;
    padding-left: 5px;

}
.code {
background-color:#708090;
font-weight:normal;
border-style:groove;
font-size:10px;
text-align:left;
padding-top: 5px;
padding-right: 1px;
padding-bottom: 5px;
padding-left: 2px;
}
}
@media only screen and (max-device-width: 250px) {
h1{
 font-size: 16px;
 -webkit-text-fill-color:white;
-webkit-text-stroke: 0px white; 
  line-height: 20px;
 padding-left: 2px;
padding-right: 2px;
}

div#blank p {
font-size:15px;
  text-align:left;
    padding-top: 10px;
    padding-right: 2px;
    padding-bottom: 0px;
    padding-left: 2px;
	font-weight:normal;
}
}
@media only screen and (max-device-width: 200px) {
h1{
-webkit-text-fill-color:white;
-webkit-text-stroke: 0px white;
 font-size: 15px;
 padding-left: 1px;
padding-right: 1px;
} 

div#blank p {
font-size:14px;
  text-align:left;
    padding-top: 10px;
    padding-right: 1px;
    padding-bottom: 0px;
    padding-left: 1px;
	font-weight:normal;
}
}