/*@import url('https://fonts.googleapis.com/css?family=Varela+Round');
@import 'VarelaRound-Regular.ttf'; */
@media (orientation:portrait){
}
@font-face {
  font-family: 'Varela-Round'; /*You can use whatever name that you want*/
  src: url('VarelaRound-Regular.ttf');

}

body, html {
  width: 100%;
	background-image: url("gra1_1920.jpg") ;
	background-size:cover;
	background-position: center,center;
	background-repeat align-self: auto;
	background-repeat: no-repeat;
	
	/*background-color: #FFBA48;*/

  font-family: 'Varela-Round', sans-serif;
  font-size: 8vmin;
	font-weight: 600;
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
  padding: 0;
  margin: 0;

}
	

button {
	display:block;
	
	margin-top: 10%;
	margin-bottom: 5%;
    position: center;
    height: 40vmin;
    width: 80vmin;
  	border-radius: 1.2em;
    
	font-family: 'Segoe UI';
  	font-weight: 900;
	font-size: 10vmin;
  	font-style: italic;
    color: rgba(16,25,2,0.88);
  
  /* padding defines the width of the red gradient background (2) */
  padding: .25em;
  /* border-width defines the width the blue gradient background (3) */
  border: .15em solid transparent;
  background: 
    /* (1) most inner gradient */
    linear-gradient(to bottom, rgba(69,168,36,0.54), rgba(148,146,146,0.57)) content-box,
    /* (2) red gradient */
    linear-gradient(to right, rgba(62,154,19,0.62), rgba(171,90,35,0.47)) padding-box,
    /* (3) blue gradient */
    linear-gradient(to right, rgba(166,101,7,0.61), rgba(110,138,25,0.67)) border-box;
	
  animation-name: naslov;
  animation-duration: 8s;
  animation-timing-function: linear;
  animation-delay: 2s;
  animation-iteration-count: infinite;
  animation-direction: both;
}
button:hover {

  }	

button2 {
	display:block;
	background-color: rgba(30,54,27,0.69);
	border-radius: 0.4em;
	}

p {
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 1024px;
  height: 25%;
  margin: 0 auto;
  font-style: oblique;
  font-size: 10vw;
  font-weight: 900;
color: rgba(28,42,5,1.00)
}

nav {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
	
  max-width: 1024px;
  margin: 0 auto;
	
}

nav a {
  text-decoration: none;
  max-width: 1024px;
  font-size: 1em;
  color: rgba(28,42,5,1.00);
  position: relative;
  margin-bottom: 5vw;
  transition: all .2s;
  overflow: hidden;
  border-radius: 0.4em;
}
nav a:hover {
  color: rgba(181,75,11,1.00)#;
}
nav a:last-child {
  margin-bottom: 0px;
}

nav a::before {
  content: "";
  position: absolute;
  top: 0px;
  left: -100%;
  width: 100%;
  height: 100%;
  background: #e28a25;
  z-index: 99;
  transition: all .6s cubic-bezier(0.7, 0, 0.3, 1);
}
nav a:hover::before {
  left: 100%;
}

nav a::after {
  content: "";
  position: absolute;
	top: 50%;
  margin-top: -2px;
  left: 100%;
  width: 100%;
  height: 4px;
  background: #996f38;
  transition: all .5s;
  transition-delay: .5s;
}
nav a:hover::after {
  left: 0%;
	border-radius: 0.4em;
}


span {

  	letter-spacing: 0.03em;
  	padding: .325em .4em .325em .4em;
	  display: block;
	  margin: auto;
  	text-shadow: 0 0 80px rgba(255,255,255,.5);


/* Animate Background Image */

	  -webkit-text-fill-color: transparent;
	  -webkit-animation: aitf 80s linear infinite;
/* Activate hardware acceleration for smoother animations */
	  -webkit-transform: translate3d(0,0,0);
	  -webkit-backface-visibility: hidden;
  }

.class1
{  background: url("animated-text-fill.png") repeat-y;
	  -webkit-background-clip: text;
	  background-clip: text;}
.class2
{ background: url("animated-text-fill3.png") repeat-y;
	  -webkit-background-clip: text;
	  background-clip: text; }
.class3
{text-shadow: 0 0 0.5px rgba(0,0,0,1)
}

.classa
{
	padding: inherit;
	margin: inherit;
	font-size: 0.8rem;
}

@-webkit-keyframes aitf {
	0% { background-position: 0% 50%; }
	100% { background-position: 100% 50%; }
}

@keyframes naslov {
 
  0%   {background-color:; }
  50%  {background-color:blue;}
  75%  {background-color:green;}
  100% {background-color:;}