@charset "utf-8";
* {
	box-sizing: border-box;
	margin:0;
	padding:0;
	}
@font-face {
  font-family: myHeaderFont;
  src: url(/images/DelaGothicOne-Regular.ttf);
}
html, body{
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	color: #000000;
	background-color: #0099FF;
	}

#wrapper {
	background: #0099FF; 
	border: 1px solid #000000;	
	display:grid;
	width: 100vw;
	height: 100vh;
	grid-template-areas:
		"header"
		"anim"
		"content"
		"footer" ;
	gap:0px;
/*        grid-template-columns: 195px 1fr;*/
	grid-template-rows: 152px 80px minmax(350px, 1fr) 40px;
	min-height:625px;

	}
#header {
	grid-area:header;
	border-bottom:1px solid #000;
	display:flex;
	justify-content: center;
	align-items: center;
	box-shadow: 2px 2px 10px 0px rgba(0,0,0,0.75);	
	}
#header1 {
	display:grid;
	grid-template-areas:
		"levo centar desno";
	color:#fff;
	text-align:right;
	font-family: myHeaderFont;
	font-weight:bold;
	font-style:italic;
	text-shadow: 2px 2px 2px #000;
	height:100%;

}
#header_levo {
	height:100%;
	padding-top:10px;
	margin-right:50px;
	grid-area:levo;
	display:flex;
	justify-content: center;
	align-items: center;
	flex-direction:column;
	}
#header_centar {
	height:100%;
	grid-area:centar;
	display:flex;
	justify-content: center;
	align-items: flex-start;
	}
#header_centar img {
	height:140px;
	filter: drop-shadow(3px 3px 5px rgba(0, 0, 0, 1));
	animation: horizontalSpin 5s linear infinite;
/*	transform-origin: center center; */
	transform-origin: center bottom; 
	}
#header_desno {
	height:100%;
	padding-top:10px;
	margin-left:50px;
	display:flex;
	flex-direction:column;
	justify-content: center;
	align-items: flex-end;
	grid-area:desno;
	}
.header_naslov_1 {
	font-size:36px;
	transform: scale(1.1, 1.4);
/*	flex-grow:1; */
	height:75px;
	}

#header_naslov_2 {
	margin-top:5px;
	font-size:28px;
	transform: scale(1, 1.4);
	letter-spacing: 5px;
	}

#content {
	background-image:url(/images/srceritam.png);
	background-position:center center;
	background-repeat:repeat-x;
	background-size:70px auto;	
	grid-area:content;
	display:flex;
	justify-content: center;
	align-items: center;
	flex-direction:column;
	min-height: 350px;
	animation: animatedBackground 50s linear infinite;
	}
@keyframes animatedBackground {
  0% {
    background-position: 0 50%; /* Start position */
  }
  100% {
        background-position: 100% 50%; /* End position (100% horizontally) */
  }
}

#footer {
	grid-area:footer;	
	border-top:1px solid #000;
	display:flex;
	justify-content: center;
	align-items: center;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:18px;
	text-shadow: 1px 1px 2px #000;
	color:#fff;
	font-weight:bold;
	box-shadow: -2px -2px 10px 0px rgba(0,0,0,0.75);	
	}
#div_menu {
	display:grid;
	grid-template-columns: repeat(3, 1fr);
/*	grid-template-rows: 300px 200px;*/
	gap: 0px;
	}
.div_slika {
/*	grid-area:slika;*/
	display:flex;
	justify-content: center;
	align-items: center;
	}
.div_slika img {
	height:150px;
/*	filter: drop-shadow(3px 3px 5px rgba(0, 0, 0, 0.5)); */
	filter: drop-shadow(3px 3px 5px rgba(0, 0, 0, 1));
	opacity: 0.8; 
	}
@keyframes horizontalSpin {
  0% {
   /* transform: rotateY(0deg);  Start at 0 degrees */
  transform: rotate(0deg);
  }
  50% {
  transform: rotate(0deg);
  }
  60% {
  transform: rotate(-8deg);
	}
  75% {
  transform: rotate(0deg);
  }
  90% {
  transform: rotate(8deg);
  }
100% {
   transform: rotate(0deg);
  }
}
.div_slika img:hover {

	}
#menu  {
	gap: 20px;
	flex-direction:column;
	display:flex;
	justify-content: center;
	align-items: center;
	padding:10px;
	}
#div_menu a{
	flex-grow:1;
	display:block;
	color:#fff;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-style:italic;
	font-weight:bold;
	text-shadow: 2px 2px 4px #000;
	font-size:50px;
	text-decoration:none;	
	padding:10px;
	padding-left:20px;
	padding-right:20px;
	border:2px solid #fff;
	border-radius: 10px 30px;
	width:100%;
	background: radial-gradient(circle,rgba(0, 153, 255, 1) 50%, rgba(0, 102, 170, 1) 100%);
	box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.75);	
	}
#div_menu a:hover{
	color:#000;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-style:italic;
	font-weight:bold;
	text-shadow: 2px 2px 4px #fff;
	font-size:50px;
	text-decoration:none;
	border:2px solid #000;
	background: radial-gradient(circle,rgba(0, 102, 170, 1) 50%, rgba(0, 153, 255, 1) 100%);
	box-shadow: none;	
	}