#container {
position:relative;
width:570px;
}

header {
	display:block;
	margin-left:1px;
	margin-right:1px;
	height:0px;
	border-bottom: 60px solid blue;
	border-left: 50px solid;
	border-right: 50px solid;
	color:white;
	text-align:center;
}
h1 {
font-size:50px;
font-family: 'Alfa Slab One';
-webkit-text-fill-color:tomato;
-webkit-text-stroke: 2px yellow;
}
		   
 #content {
margin-top:0px;
border:10px solid #00BFFF;
border-bottom-left-radius: 25px;
border-bottom-right-radius:25px;
background:#E6E6FA;
}

#installApp {
    border-radius:10px;
    background:royalblue;
    color:white;
    font-weight:bold;
    padding:5px;
    font-size:17px;
    text-decoration:none;
}
section {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 100%;
  height: 95px; /* Visina sekcije */
  box-sizing: border-box;
}



#ugao-jedan {
  box-sizing: border-box; 
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center; /* Vertikalno centriranje za ugao-jedan */
}

#ugao-dva {
  display: flex;
  align-items: center; /* Vertikalno centriranje za ugao-dva */
  justify-content: center;
  height: 100%;
}

#ugao-tri {
  box-sizing: border-box; 
  display: flex;
  justify-content: center;
  align-items: center; /* Vertikalno centriranje za ugao-tri */
  height: 100%;
  margin-left: 50px;
  text-align: left;
}



#tokeni {
width:75px;
height:60px;
border:3px solid gold;
background-image:url(images/token.png);
background-size: 100% 100%;
float:left;
text-align:center;
}



#rade {
  width: 75px;
  height: 50px;
  border: 3px solid orange;
  background-image: url(images/coins.jpg);
  background-size: 100% 100%;
  display: flex; /* Dodato za bolje centriranje */
  justify-content: center;
  align-items: center; /* Centriranje sadržaja unutar #rade */
  font-weight: bold;
  font-size: 45px;
}





   .silver {
  color: red;
  font-family: 'Jockey One', sans-serif;
  font-size: 25px;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center; /* Ovo osigurava vertikalno centriranje za cijelu sekciju */
  box-sizing: border-box; 
  width: 100%;
  height: 75px;
  background-color: #F0F8FF;
  border:1px solid silver;
}




#displej {
font-weight:bold;
color:white;
font-size:33px;
}
#displej p{
color:yellow;
font-family:Lemon;
               font-weight: bold;
               text-shadow: 0 1px 0 #ccc,
               0 2px 0 #c9c9c9,
               0 3px 0 #bbb,
               0 4px 0 #b9b9b9,
               0 5px 0 #aaa,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15);
			   border-color: tomato;
			   -webkit-text-stroke: 2px orangered;
		   
}
   
   #abc {
    width: 100%;
    height: inherit;
    display: flex; /* Flexbox za centriranje */
    justify-content: center; /* Centriranje horizontalno */
    align-items: center; /* Centriranje vertikalno */
    text-align: center;

}

.coinsline {
  width: 100%;
  height: 20px;
  font-size: 17px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  white-space: nowrap; /* Sprečava prelamanje teksta */
  background: red;
  border-top: 2px solid yellow;
  border-bottom: 2px solid yellow;
  margin-bottom: 1px !important;
}

.coinsline p {
  margin: 0;
  padding: 0;
  line-height: 1; /* Osigurava da tekst ne zauzima dodatnu visinu */
  white-space: nowrap; /* Dodatna zaštita za sadržaj unutar paragrafa */
}

.hrline {
    width:100%;
    height:18px;
    font-size:17px;
    display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  background:Mediumpurple;
}

/* Dodatno možete resetirati margin na hr elementu */
.hrline {
  margin: 0;
  padding: 0;
  border: none;
  border-top: 1px solid silver; /* ili boja koju želite */
}




.wellcome {
margin-top:140px;
font-size:55px;    
color:yellow;
font-family:Lemon;
               font-weight: bold;
               text-shadow: 0 1px 0 #ccc,
               0 2px 0 #c9c9c9,
               0 3px 0 #bbb,
               0 4px 0 #b9b9b9,
               0 5px 0 #aaa,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15);
               border-color: tomato;
               -webkit-text-stroke: 2px orangered;

}

.again {
margin-top:35px;
font-size:55px;
font-family:Lemon;
font-weight: bold;
               text-shadow: 0 1px 0 coral,
               0 3px 0 yellow,
               0 4px 0 orange,
               0 5px 0 coral,
               0 6px 1px white,
               0 0 5px white,
               0 1px 3px white,
               0 3px 5px white,
               0 5px 10px white,
               0 5px 5px white,
               0 10px 10px white;
			   -webkit-text-stroke: 2px maroon;
			   color:red;
}
.ahead {
margin-top:35px;
font-size:55px;
font-family:Lemon;
font-weight: bold;
               text-shadow: 0 1px 0 coral,
               0 3px 0 yellow,
               0 4px 0 orange,
               0 5px 0 coral,
               0 6px 1px white,
               0 0 5px white,
               0 1px 3px white,
               0 3px 5px white,
               0 5px 10px white,
               0 5px 5px white,
               0 10px 10px white;
			   -webkit-text-stroke: 2px green;
			   color:lime;
}

#ekran {
  font-size: 75px;
  text-align: center;
  height: inherit;
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 90px;
}

/* Osnovni stilovi za oba dugmeta */
#btn, #btn2 {
  /* Dimenzije i pozicioniranje */
  aspect-ratio: 1 / 1;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size:55px;
  color:green;
  
  /* Prilagodljive veličine */
  width: fit-content;
  height: fit-content;
  min-width: min-content;
  min-height: min-content;
  
  /* Padding i box model */
  padding: 0.1em;
  box-sizing: border-box;
  
  /* Okvir i pozadina */
  border: 6px solid tomato; /* Promijenjeno iz gold u tomato po vašem stilu */
  border-radius: 10px;
  background: #FFFACD;
  
  /* Tekst stilovi */
  text-shadow: 0px 3px 0px maroon;
  -webkit-text-stroke: 2px orangered;
  
  /* Interaktivnost */
  cursor: pointer;
}
#btn:active, #btn2:active {
  border: 6px solid yellow;
  background:tomato;
  
}


/* Stilovi za paragraf unutar dugmadi */
#btn p, #btn2 p {
  margin: 0;
  padding: 0;
  
}

 .no-select {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#razmak {
 width: 20%; 
}
#razmak p {
  margin: 0;              /* Uklanja default margin paragrafa */
  padding: 0;   
  font-size:25px;
    font-family: 'Alfa Slab One';
      text-shadow: 0 1px 0 coral, 0 2px 0 yellow, 0 3px 0 orange, 0 4px 0 coral, 0 6px 1px white, 
      0 0 5px white, 0 1px 3px white, 0 3px 5px white, 0 5px 10px white, 0 5px 5px white, 0 10px 10px white;
    -webkit-text-stroke: 2px maroon;
    color: red;
  
} 



  /* Resetiranje margin i padding na sekcijama */
section.strela, 
section.top {
  margin: 0;
  padding: 0;
  margin-bottom:10px;
}


/* Postavke koje ste već imali */
section {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 100%;
  height: 95px;
  box-sizing: border-box;
}

#buttons {
  display: flex;
} 
   
   




#mix {
width:190px;
height:85px;
border:5px solid lime;
background-image: url("images/blesak.jpg");
    background-size: cover;  /* Pokriva ceo element */
    background-position: center; /* Centrirana slika */
    background-repeat: no-repeat;
  
border-radius:15px;
margin-top:3px;
display: table-cell;
vertical-align: middle;
font-family: 'Alfa Slab One';
-webkit-text-fill-color:red;
-webkit-text-stroke: 1px yellow;
}

#max {
width:190px;
height:85px;
border:5px solid orange;
background:Darkred;
border-radius:15px;
margin-top:3px;
display: table-cell;
vertical-align: middle;
font-family:sans-serif;
}
#label {
margin-top:10px;
width:506px;
height:67px;
background-color:yellow;
}

#rezultat {
margin-top:5px;
border:3px ridge maroon;
width:500px;
text-align:left;
background-image: url(images/desetka.png), url(images/sablon.png);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
background-size: 50px 50px;
}

#rezultat button {
width:10%;
height:50px;
padding:0px;
background:green;
color:white;
border:2px solid silver;
text-align:center;
font-size:35px;
font-weight:bold;
}


.strela {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 100%;
  height: 75px;
  border: 1px solid silver;
  box-sizing: border-box;
}

#abc {
    width: 100%;
    height: inherit;
    display: flex; /* Flexbox za centriranje */
    justify-content: center; /* Centriranje horizontalno */
    align-items: center; /* Centriranje vertikalno */
    text-align: center;

}

.abcd {
    background: red;
    border-radius: 5px;
    border: 3px solid maroon;
    width: 90%;
    height: 80%;
    /* Dodajte ovo za centriranje: */
    display: flex;
    justify-content: center;
    align-items: center;
}

.abcde {
    color: lime;
    font-size: 50px; 
    /* Ovo možete pojednostaviti: */
    display: flex;
    justify-content: center;
    align-items: center;
    height:80%;
    width:20%;
    border-radius: 5px;
    border: 3px solid lime;

}


.congratulations{
font-size:50px;
background:#32CD32;
color:yellow;
font-family:Lemon;


               font-weight: bold;
               text-shadow: 0 1px 0 #ccc,
               0 2px 0 #c9c9c9,
               0 3px 0 #bbb,
               0 4px 0 #b9b9b9,
               0 5px 0 #aaa,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15);
               border-color: tomato;
               -webkit-text-stroke: 2px orangered; 


}





.x {
outline: 5px solid #FF4500; 
box-shadow:
0 0 0 10px #FF8C00,
0 0 0 20px yellow;
}

@-webkit-keyframes shake {
    0% { -webkit-transform: translate(5px, 1px); } 
    10% { -webkit-transform: translate(-1px, -2px); }
    20% { -webkit-transform: translate(-5px, 0px); }
    30% { -webkit-transform: translate(0px, 5px); }
    40% { -webkit-transform: translate(1px, -1px); }
    50% { -webkit-transform: translate(-1px, 5px); }
    60% { -webkit-transform: translate(-5px, 1px); }
    70% { -webkit-transform: translate(2px, 1px); }
    80% { -webkit-transform: translate(-1px, -1px); }
    90% { -webkit-transform: translate(2px, 5px);}
    100% { -webkit-transform: translate(1px, -2px); }
}
.shake {
    -webkit-animation-name: shake;
    -webkit-animation-duration: 1.0s;
    -webkit-transform-origin:50% 50%;
    
}
.top {
   height:90px;
}

.ne{
	visibility: hidden;
}

.yellow {
background-color:yellow;	
}

footer {
  background-color:Midnightblue;
  display:inline-block;
  width:100%;
}
 footer p {
 color:white;   
 font-weight:bold;   
}
footer a {
color:white;  
text-decoration:none;
}

 span{
    margin:10px!important;
    border:1px solid white;
    border-radius:5px;
    padding:5px;
    background:transparent;
    cursor:pointer;
    font-weight:bold;
    font-family:sans-serif;
 }



#izlog {
    background: Azure;
}

#naslovnica {
    background: Lightcyan;
}

#naslovnica a {
    text-decoration: none !important;
}

#naslovnica h3 {
    font-size: 50px;
    font-family: 'Alfa Slab One';
    -webkit-text-fill-color: orange;
    -webkit-text-stroke: 2px Orangered;
    margin-bottom: 0; /* Uklanjanje donje margine */
}

#naslovnica p {
    margin-top: 0; 
    font-family: Rockwell, Georgia, "Times New Roman", Times, serif;
    font-size:25px;
    color: red;
    text-shadow: -1px -1px 1px black;
}
#icon {
    background: blue;
    width: 200px;
    height: 230px;
    margin: 45px;
    outline: 5px solid blue;
    box-shadow: 0 0 0 10px #2D86D1, 0 0 0 15px #98bacd;
}
#icon:hover {
  outline: 5px solid white;
    box-shadow: 0 0 0 10px #98bacd, 0 0 0 15px #2D86D1;  
    border:0;
}
#icon img {
    width: 100%;
    height: 200px;
}
#icon a {
    text-decoration: none !important;
}



 
#name {
    text-align: center;
    font-weight: bold;
    color: white;
    margin-top: 10px;
    font-size: 20px;
    background: red;
}  
   
   
   
   
   
   #name:hover {
color: red;
background:blue;
}
@media only screen and (max-width:551px) {
#container {
width:100%;
}
header {
    border-bottom: 60px solid blue;
	border-left: 50px solid;
	border-right: 50px solid; 
}

h1 {
font-size:45px;
-webkit-text-fill-color:tomato;
-webkit-text-stroke: 2px yellow;
}


#label {
width:431px;	
}

#rezultat {
border:3px ridge maroon;
width:425px;
background-size: 10% 50px;
}
#rezultat button {
width:10%;
height:50px;
background:green;
border:2px solid silver;
font-size:25px;
}
#abc {
color:red;
font-size:80px;
}
#ekran{
font-size:80px;
}
}
@media only screen and (max-width:525px) {
header {

	border-bottom: 55px solid blue;
	border-left: 50px solid;
	border-right: 50px solid;
	
}	
h1 {
font-size:40px;
-webkit-text-fill-color:tomato;
-webkit-text-stroke: 2px yellow;
}
#razmak p {
    color: white;
    text-align: center;

    font-family: 'Alfa Slab One';
    -webkit-text-fill-color: tomato;
    -webkit-text-stroke: 2px yellow;
  
}  

#label {
width:90%;	
}
#rezultat {
border:3px ridge maroon;
width:100%;
background-size: 10% 50px;
}

.wellcome {
margin-top:100px;
font-size:50px;
}
.congratulations{
font-size:48px;
}

.again {
margin-top:40px;
}
.ahead {
margin-top:40px;
}
#ekran{
font-size:65px;
}
}
@media only screen and (max-width:505px) {
h1 {
padding-top:8px;
font-size:35px;
-webkit-text-fill-color:tomato;
-webkit-text-stroke: 2px yellow;
}
  #ugao-tri {
    margin-left:25px;
  }


#rezultat {
border:2px ridge maroon;
background-size: 10% 50px;
}

.wellcome {
margin-top:110px;
font-size:45px;
}
.congratulations{
font-size:36px;
}
.again {
margin-top:45px;
}
.ahead {
margin-top:45px;
}
#ekran{
font-size:70px;
}
}
@media only screen and (max-width:475px) {

#ugao-tri {
    margin-left:10px;
  }

#ekran{
font-size:70px;
}
}
@media only screen and (max-width:450px) {

#ugao-tri {
    margin-left:9px;
    font-weight:normal;
    font-size:19px;
  }

}
@media only screen and (max-width:430px) {
	
h1 {
font-size:31px;
padding-top:10px;
}
.silver {
font-size:20px;
font-weight:normal;
}
.strela {
height:70px;
}


.again {
margin-top:58px;
font-size:53px;
}
.ahead {
margin-top:58px;
font-size:53px;
}
.wellcome {
margin-top:120px;
font-size:41px;
}

.congratulations{
font-size:36px;
}
.abcd {
font-size:75px; 
}

#razmak p {
  margin: 0;              /* Uklanja default margin paragrafa */
  padding: 0;   
  font-size:20px;
    font-family: 'Alfa Slab One';
      text-shadow: 0;
    -webkit-text-stroke: 2px maroon;
    color: red;
  
} 

#rezultat {
	width:99%;
}
.x {
outline: 5px solid #FF4500; 
box-shadow:
0 0 0 10px #FF8C00,
0 0 0 17px yellow;
}
#ekran {
font-size:70px;
}
}
@media only screen and (max-width:400px) {	
h1 {
font-size:30px;
padding-top:10px;
}
#content {
border:8px solid #00BFFF;
}
#ugao-tri  {
    margin-left:8px;
    font-size:18px;
  }

.abcd {
font-size:70px;	
}


.silver {
height:70px;
font-size:18px;
}

.strela {
height:65px;
}
.top {
 height:85px;
}
#tokeni {
width:72px;
height:47px;
border:3px solid orange;
font-size:40px;
}

#rade {
width:72px;
height:47px;
border:3px solid orange;
font-size:40px;
}
#ekran{
font-size:75px;
}
}
@media only screen and (max-width:375px) {	
header {
	border-bottom: 45px solid blue;
	border-left: 50px solid;
	border-right: 50px solid;
}
h1 {
padding-top:7px;	
font-size:27px;
-webkit-text-stroke: 1px yellow;
}
#ugao-tri {
    margin-left:7px;
    font-size:17px;
  }

.again {
margin-top:55px;
font-size:50px;
}
.ahead {
margin-top:55px;
font-size:50px;
}
.wellcome {
margin-top:125px;
font-size:39px;
}
.congratulations{
font-size:33px;
}
.top {
 height:80px;
}

.silver {
height:65px;
font-size:17px;
}
.strela {
height:60px;
}

.x {
outline: 5px solid #FF4500; 
box-shadow:
0 0 0 9px #FF8C00,
0 0 0 15px yellow;
}
#ekran{
font-size:70px;
}
}
@media only screen and (max-width:350px) {
#content {
border:6px solid #00BFFF;
border-bottom-left-radius: 20px;
border-bottom-right-radius:20px;
}	
h1 {
padding-top:10px;		
font-size:24px;	
margin-top:15px;
}

#mix {
width:180px;
height:80px;
}
#max {
width:180px;
height:80px;
}
#rezultat button {
padding:-1px;
font-size:30px;
}


.wellcome { 
margin-top:130px;
font-size:35px;
}
.congratulations{
font-size:30px;
-webkit-text-stroke: 1px orangered; 
}
.abcd {	
font-size:65px;
}
#tokeni {
width:55px;
height:40px;
border:3px solid orange;
font-size:35px;
}

#rade {
width:55px;
height:40px;
border:3px solid orange;
font-size:35px;
}


.silver {
height:62px;
font-size:16px;
}
.again {
margin-top:60px;
font-size:45px;
}
.ahead {
margin-top:60px;
font-size:45px;
}


.top {
 height:75px;
}
.strela {
height:55px;
}
.x {
outline: 3px solid #FF4500; 
box-shadow:
0 0 0 7px #FF8C00,
0 0 0 11px yellow;
}
#ekran{
font-size:70px;
}
}
@media only screen and (max-width:325px) {
#content {
border:5px solid #00BFFF;
border-bottom-left-radius: 0px;
border-bottom-right-radius:0px;
}

header {
	border-bottom: 40px solid blue;
	border-left: 40px solid;
	border-right: 40px solid;
}
h1 {
font-size:23px;
font-family: 'Alfa Slab One';
-webkit-text-fill-color:yellow;
-webkit-text-stroke: 1px blue;
}

 #btn {

font-size:45px;
}

#btn2 {
font-size:45px;
}

#tokeni {
font-size:35px;
border:1px solid red;
width:45px;
height:35px;
background-image: none;
background-color:yellow;
}
#rade {
font-size:35px;
border:1px solid red;
width:45px;
height:35px;
background-image: none;
background-color:yellow;
}

#ugao-tri {
    margin-left:6px;
  }
.congratulations{
font-size:25px;

}
#rezultat button {
padding:-2px;
font-size:25px;
}
section {
height:75px;
}
.wellcome {
margin-top:110px;
font-size:33px;
}

.silver {
height:50px;
font-size:15px;
}
.strela {
height:50px;
}
.top {
 height:70px;
}
#mix {
width:150px;
height:60px;
border-radius:15px;
margin-top:5px;
}
#max {
width:150px;
height:60px;
border-radius:15px;
margin-top:5px;
}
#ekran{
font-size:55px;
}
.again {
margin-top:50px;
font-size:40px;
}
.ahead {
margin-top:50px;
font-size:40px;
}

.abcd {	
font-size:60px;
}
.x {
outline: 1px solid #FF4500; 
box-shadow:
0 0 0 1px #FF8C00,
0 0 0 1px yellow;
}
.top {
 height:80px;
}
footer {
border-bottom-left-radius: 0px;
border-bottom-right-radius:0px;	
}
footer p {  
font-weight:normal; 
font-size:12px;
}	
}
@media only screen and (max-width:290px) {
#content {
display:none;
}
h1 {
font-family: "Impact";	
padding-top:5px;
font-size:30px;
-webkit-text-fill-color:yellow;
-webkit-text-stroke: 0px yellow;
}	
	
header {
	border-bottom: 37px solid blue;
	border-left: 30px solid;
	border-right: 30px solid;
}

#ugao-tri {
    margin-left:4px;
    font-size:14px;
  }
}