:root {
  --color1: #ffff55;
  --color2: #aa55ff;
  --color3: #55ff55;
  --color4: #ff55aa;
  --color5: #55ffff;
}

body {
	background-color: black;
	background-image: url('../img/bg-voidonon-px.png');
	/* pozadinu napraviše voidonon (crtež na papiru), obrada by Tomi */
    background-size: calc(max(1080px, 100vw));
    /* background-repeat: no-repeat; */
    background-position: center top; 
	color: #fff;
	text-align: center;
	font-family: "Jersey 20", "Segoe UI", "Helvetica Neue", "Noto Sans", "Arial", sans-serif;
	text-shadow: -1px 0 black, 0 2px black, 2px 0 black, 0 -1px black;
}
.container {
	text-align: center;
	margin: auto;
	margin-bottom: 0;
	max-width: 40em;
}
.quote {
    width: 75%;
    margin-left: auto;
    margin-right: auto;
    border-style: dotted;
}
.quote p {
    text-align: left;
    display: block;
    margin-left: 20px;
}
/*.colorchanger {
    -webkit-animation: filter-animation 15s infinite;
    animation: filter-animation 15s infinite;
}*/
.naslov {
    display: block;
	width: 100%;
	padding: 10px 0;
}
.color1 {
    color: var(--color1);
}
.color2 {
    color: var(--color2);
}
.color3 {
    color: var(--color3);
}
.color4 {
    color: var(--color4);
}
.color5 {
    color: var(--color5);
}

/*
@-webkit-keyframes filter-animation {
  0% {
    -webkit-filter: hue-rotate(0deg);
  }
  
  50% {
    -webkit-filter: hue-rotate(180deg);
  }
  
  100% {
    -webkit-filter: hue-rotate(0deg);
  }
}

@keyframes filter-animation {
  0% {
    filter: hue-rotate(0deg);
  }
  
  50% {
    filter: hue-rotate(180deg);
  }
  
  100% {
    filter: hue-rotate(0deg);
  }
}
*/

p {
    font-size: 1.2em;
	line-height: 1.5em;
	max-width: fit-content;
	margin-left: auto;
	margin-right: auto;
	margin-top: 0px;
	margin-bottom: 0px;
}
h1,h2,h3,h4,h5 {
    font-weight: normal;
    max-width: fit-content;
	margin-left: auto;
	margin-right: auto;
}
h1 {
    color: var(--color4);
    font-size: 2.8em;
}
h2 {
    color: var(--color1);
    font-size: 2em;
}
h3 {
    color: var(--color4);
    font-size: 1.5em;
}
.bijelirub {
    text-shadow: -1px 1px white, 0px 1px white, 1px 1px white, -1px -1px white, 0px -1px white, 1px -1px white, 
    -2px 2px black, -1px 2px black, 0px 2px black, 1px 2px black, 2px 2px black, 3px 3px black, -2px 3px black, -1px 3px black, 0px 3px black, 1px 3px black, 2px 3px black, 3px 3px black, 
    -2px -2px black, -1px -2px black, 0px -2px black, 1px -2px black, 2px -2px black, 3px -3px black, -2px -3px black, -1px -3px black, 0px -3px black, 1px -3px black, 2px -3px black, 3px -3px black;
}
.container > img {
	display: block;
	width: 100%;
	padding: 10px 0;
}
hr {
	width:50%;
}
a:link, a:visited {
	color: aqua;
}
a:hover {
    color: #8ff;
}
.countwrap {
  max-width: 320px;
  margin: auto;
}
.countwrap img {
  width: 10%;
}
button {
 background-color: #e7e7e7; 
 color: black;
 border: none;
 padding: 15px 32px;
 text-align: center;
 text-decoration: none;
 display: inline-block;
 font-size: 16px;
 border-radius: 5px;
 box-shadow: 0 5px #999;
}
button:hover {background-color: #f7f7f7;}
button:active {
  background-color: #e0e0e0;
  box-shadow: 0 2px #666;
  transform: translateY(4px);
}