* {
  margin: 0;
  padding: 0;
}
#container {
position:relative;
width:525px;
}   
header  {
background-image: url('images/blue.jpg');
background-size: cover; /* or contain, depending on your needs */
background-repeat: no-repeat;
width:100%;
padding-top:5px;
color:white;
}



#mag {
background-color: #ffcccc;
display:inline-block;
border:5px lightblue;
width:100%;
}

#oko {
    background:lightcyan;
      width:350px;
      border: 1px solid black;
      border-radius:20px;
      margin:10px;
     } 

#dan {
 background:lime;
 color:white;
 font-weight:bold;
 font-size: 25px;
 border-radius:50px;
 padding:5px;
 margin-top:5px;
 font-family:'Arial Black';
 text-decoration:none;
}
#dan:hover {
    border: 2px solid green;
    
}

input {
    font-size:19px;
    }


.header  {
border-radius:20px;
width:66%;
border:5px ridge gold;
padding-top:5px;
}
h1{
font-family:'Alfa Slab One';
font-size: 50px;
color: Red;
-webkit-text-stroke: 1px yellow;
padding:10px;
}

.win {

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;
padding:10px; 
border-radius:15px;
display: table-cell;
vertical-align: middle;
font-family: 'Alfa Slab One';
-webkit-text-fill-color:red;
-webkit-text-stroke: 1px yellow;
}
.win h1 {
font-size: 50px;
-webkit-text-stroke: 1px white;
}
.win h2 {
font-size: 40px;
-webkit-text-stroke: 1px yellow;
}
     
 .mishit {
width:90%;
margin:10px;
background:red;
border-radius:15px;
display:flex;
vertical-align: middle;

}

.mishit h2 {

display: table-cell; 
font-family:'Alfa Slab One';
font-size: 45px;
-webkit-text-fill-color:Firebrick;
-webkit-text-stroke: 1px white;
}
#bingo img {
    width:200px;
    height:200px;
}

.broj {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 75%;
  border-radius: 50%;
  box-shadow:
    0 0 0 2px navy,
    0 0 0 6px lightblue;
}

.broj:hover {
  box-shadow:
    0 0 0 2px black,
    0 0 0 6px lightblue;
}

.broj p {
  color: yellow;
  font-size: 50px;
  margin: 0;
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; /* A bold and striking font */
} 

    
.klik{
background:Crimson!important;
border-top: 5px solid red!important;
border-left: 5px solid red!important;
border-right: 5px solid maroon!important;
border-bottom:5px solid maroon!important;
}
     .upozorenje {
            margin-bottom: 0!important; 
            color: red;
            font-size: 24px;
            text-align: center;
            display:block;
        } 

      #red {
            margin-bottom: 0;
            display: flex;
            justify-content: center; /* Ovo centrira dugmad horizontalno */
            gap: 10px;
            margin: 20px auto 0;
            padding: 0;
            width: 100%;
            background-color: #ffcccc; /* Dodata pozadina za vizuelnu predstavu */
            display:none;
        }
        .dugme {
            background-color: lime;
            color: white;
            padding: 10px;
            cursor: pointer;
            border-radius: 5px;
            font-weight:bold;
            font-family:arial black;
            border:4px solid Green;
            width:45px;
            display: inline-block;
        }
        .dugme:hover {
            background-color: green;
            border:4px solid Lime;
        }
        
        
        
            .start {
            background-color: #28a745; /* Zelena boja u stilu video igara */
            color: white;
            font-family: 'Arial', sans-serif;
            font-size: 18px;
            font-weight: bold;
            padding: 15px 30px;
            border: none;
            border-radius: 10px;
            cursor: pointer;
            display: block;
            margin: 20px auto;
            text-transform: uppercase;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
            transition: transform 0.2s, background-color 0.2s;
        }

        .start:hover {
            background-color: #218838;
            transform: scale(1.05); /* Blagi zoom efekat na hover */
        }

        .start:active {
            transform: scale(0.95); /* Efekat pritiska */
        }


.blokiranje {
 pointer-events: none;   
}
.lose {
display:block!important;
}
#profil {
width:90%;
border-radius:20px;
background:lightcyan;
font-size:30px;
color:#00688B;
font-family:'Alfa Slab One';
margin-top:5px;
margin-bottom:5px;
}
#profil a {
  text-decoration:none;  
}
#score {
font-size:25px;
color:red;
}


a:hover #profil {
    background: MidnightBlue;
    color: white;
}

a:hover #profil #score {
    background: transparent; /* ili `background: none;` */
    color: white;
}

 


#tok {
background: #FFFA70;
font-size:30px;
color:red;
font-weight:bold;
border-top: 5px solid Gold;
border-left: 5px solid tomato;
border-right: 5px solid tomato;
border-bottom:5px solid orangered;
}

#a {
font-size:25px;
color:maroon;
font-weight:bold;   
}
#aa {
font-family:'Alfa Slab One';
font-size: 45px;
color:maroon;
-webkit-text-stroke: 2px white;  
    
}


#abc {
color:maroon; 
font-weight:bold;
}
.saopstenje {
   display:flex;
   min-width:250px;
   max-width:450px;
   color:red;
   border-radius:10px;
   margin:10px;
   font-size:25px;
   font-weight:bold;
   background:white;
   font-family:sans-serif;
   text-align:center;
}



#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:25px;
font-size:20px;
background:red;
padding: 1px 15px 1px 15px;
}

   #name {
    color: red;
    display: inline;
    margin: 0;
    vertical-align: middle;
    -webkit-text-fill-color: red;
    -webkit-text-stroke: 1px yellow;
    font-size: 20px;
    font-family: sans-serif;
    font-weight:bold;
   }


#name:hover {
color: red;
background:blue;
}

@media only screen and (max-width: 501px) {
 #container {
width:99%;
}
#mag { 
border:3px solid lightblue; 
 width:98%;   
} 
h1{
font-size: 40px;
}
#mishit h2 {
font-size: 35px;
-webkit-text-stroke: 1px white;
}
#blok {
width:100%;
} 
#bingo img {
margin-top:50px;
}


.broj {
 box-shadow:
    0 0 0 1px navy,
    0 0 0 3px lightblue;
}

.broj p{
font-size:44px;
}
 .saopstenje {
   min-width:250px;
   max-width:405px;
   border-radius:7px;
   margin:7px;
   font-size:25px;
} 

 }
@media only screen and (max-width: 451px) {
  
 .saopstenje {
   min-width:250px;
   max-width:400px;
   border-radius:5px;
   margin:5px;
   font-size:22px;
} 

#mag { 
border:2px solid lightblue; 
 width:98%;   
} 
#bingo img {
margin-top:50px;
}  
#mishit h2 {
font-size: 30px;
-webkit-text-stroke: 1px white;
}
.broj {
 box-shadow:
    0 0 0 2px lightblue;
}

.broj p{
font-size:39px;
}
    
}
 @media only screen and (max-width: 420px) { 
    #mishit h2 {
font-size: 25px;
-webkit-text-stroke: 1px white;
}
 
 .saopstenje {
   min-width:250px;
   max-width:400px;
   border-radius:5px;
   margin:5px;
   font-size:20px;
} 
     #oko {
    width:100%;
    }  
     input {
    font-size:17px;
    }  
     
#mishit h2 {
font-size: 40px;
}
#mishit p {
 font-size:25px;
}
.broj p{
font-size:37px;
}
 }
@media only screen and (max-width: 375px) {

.uvod {
border:8px solid white;
border-radius:30px;
}    
    #mishit h2 {
font-size: 22px;
-webkit-text-stroke: 1px white;
}
#mishit p {
 font-size:24px;
}
 #footer a {
 font-weight: normal; 
}  
 #footer p {
 font-weight: normal; 
}   
.broj p{
font-size:35px;
}
}
@media only screen and (max-width: 351px) { 

.uvod {
border:7px solid white;
border-radius:30px;
}  
   img {
        width:90%;
    }
    input {
    font-size:17px;
    } 
.broj {
box-shadow:
0 0 0 3px lightblue;
}
.broj p{
font-size:34px;
}
    #mishit h2 {
    font-size: 20px;
   -webkit-text-stroke: 0;
}
#mishit p {
 font-size:20px;
}
   } 
@media only screen and (max-width: 321px) {

.uvod {
width:95%;
border:6px solid white;
border-radius:20px;
}
  input {
    font-size:16px;
    }   
.broj p{
font-size:32px;
}
#tok {
font-size:25px;
}
#mishit h2 {
font-size: 19px;
}
#mishit p {
 font-size:16px;
}
}
@media only screen and (max-width: 290px) { 
.uvod {
width:99%;
border:5px solid white;
border-radius:10px;
}
input {
    font-size:15px;
    } 
#tok {
font-size:25px;
}
.broj {
 box-shadow: none;
 background:navy;
}

 }