* {
  margin: 0;
  padding: 0;
}
 #container {
position:relative;
width:525px;
}   

#mag {
background: lightskyblue;
display:inline-block;
border:5px lightblue;

}
header  {
background-image: url('images/bingo_table_header.jpg');
background-size: cover; /* or contain, depending on your needs */
background-repeat: no-repeat;
width:100%;
padding-top:5px;
color:white;
}
header p  {
    background:royalblue;
}
.header  {
border-radius:20px;
width:66%;
border:5px ridge gold;
padding-top:5px;
}
h1{
font-family:'Alfa Slab One';
font-size: 60px;
color:Red;
-webkit-text-stroke: 1px yellow;
padding:10px;
}



 #blok {
  background: white;
  width: 500px; 
  aspect-ratio: 1/1; 
  font-weight: bold;
  margin-top:5px;
  border:1px solid lightblue;
}

.dugme {
  position: relative;
  background: Lime;
  border: 4px solid green;
  border-radius: 6px;
  box-sizing: border-box; 
  width: calc((100% - 10px) / 5); 
  height: calc((100% - 10px) / 5); 
  float: left;
  margin: 1px;
  cursor: pointer; 
}


.broj {
  position: absolute;
  background:Limegreen;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  border-radius: 50%;

}

.broj p {
  color:Yellow;
  font-size: 50px;
  margin: 0;
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; /* A bold and striking font */
}
.broj {
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
  -khtml-user-select: none; /* Konqueror HTML */
  -moz-user-select: none; /* Old Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Standard */
}

.pressed { 
    color:yellow;
    background:teal;
    box-shadow:
0 0 0 3px lightblue;
}
.mark{
background:Teal!important;
border-top: 5px solid Lime!important;
border-left: 5px solid Lime !important;
border-right: 5px solid Lime!important;
border-bottom:5px solid Lime !important;
}
.disabled { cursor: not-allowed; }

 .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;
}




#bodovi {
color:Darkslategray;
font-family:'Alfa Slab One';
font-size: 50px;
-webkit-text-stroke: 3px yellow;
}


#big {
font-family:'Alfa Slab One';
font-size: 50px;
-webkit-text-fill-color:Orangered;
-webkit-text-stroke: 3px yellow;
}


#timer {
  background:Maroon;
  width:100%;
  margin-bottom:10px;
  color:white;
}
#stoperica {
 font-family:'Tahoma';   
  font-size:50px;
  color:Dodgerblue;

}


.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;
}

#mishit {
  display: none;
  background: red;
  border-radius: 20px;
  margin: 10px;
}

.mishit-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#mishit h2 {
  color: maroon;
  font-family: 'Alfa Slab One';
  font-size: 50px;
  -webkit-text-stroke: 1px white;
}

#mishit p {
  color: white;
  font-size: 30px;
  font-weight: bold;
}

#again {
  border-radius: 5px;
  font-weight: bold;
  color: Teal;
  font-size: 20px;
  padding: 10px;
}

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

#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: 40px;
-webkit-text-stroke: 1px white;
}
#blok {
width:100%;
} 
#bingo img {
margin-top:50px;
}
#broj p{
font-size:45px;
}
 .saopstenje {
   min-width:250px;
   max-width:405px;
   border-radius:7px;
   margin:7px;
   font-size:25px;
} 

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

#big {

font-size: 45px;
-webkit-text-fill-color:Orangered;
-webkit-text-stroke: 3px yellow;
}

 }
@media only screen and (max-width: 451px) {
    #mishit h2 {
font-size: 35px;
-webkit-text-stroke: 1px white;
}
 #again {
    border-radius:5px;
    font-weight:bold;
    color:Darkslateblue;
    font-size:19px;
    padding:9px;
}   
 .saopstenje {
   min-width:250px;
   max-width:400px;
   border-radius:5px;
   margin:5px;
   font-size:22px;
} 
.uvod {
border-radius:45px;
}   
#mag { 
border:2px solid lightblue; 
 width:98%;   
} 
#bingo img {
margin-top:50px;
}  
.broj p{
font-size:40px;
}
#tok {
background: #FFFA70;
font-size:28px;
color:red;
font-weight:bold;
border-top: 4px solid orangered;
border-left: 4px solid tomato;
border-right: 4px solid tomato;
border-bottom:4px solid orange;
}

  #big {

font-size: 40px;
-webkit-text-fill-color:Orangered;
-webkit-text-stroke: 2px yellow;
}  
}
 @media only screen and (max-width: 420px) { 
    #mishit h2 {
font-size: 30px;
-webkit-text-stroke: 1px white;
}
.uvod {
border:9px solid white;
border-radius:35px;
} 
#again {
    border-radius:5px;
    font-weight:bold;
    color:Darkslateblue;
    font-size:18px;
    padding:8px;
}
 .saopstenje {
   min-width:250px;
   max-width:400px;
   border-radius:5px;
   margin:5px;
   font-size:20px;
} 
   #oko {
    width:98%;
    border-radius:15px;
     }
#mishit h2 {
font-size: 40px;
}
#mishit p {
 font-size:25px;
}
.broj p{
font-size:37px;
}
#tok {
font-size:27px;
font-weight:bold;
border-top: 3px solid orangered;
border-left: 3px solid tomato;
border-right: 3px solid tomato;
border-bottom:3px solid orange;
}
  #big {

font-size: 35px;
-webkit-text-fill-color:Orangered;
-webkit-text-stroke: 2px yellow;
} 
 }
@media only screen and (max-width: 375px) {

.uvod {
border:8px solid white;
border-radius:30px;
}    
    #mishit h2 {
font-size: 25px;
-webkit-text-stroke: 1px white;
}
#mishit p {
 font-size:24px;
}
#again {
 
    font-size:17px;
    padding:7px;
}
 #footer a {
 font-weight: normal; 
}  
 #footer p {
 font-weight: normal; 
}   
.broj p{
font-size:35px;
}
#tok {
font-size:26px;
font-weight:bold;
border-top: 2px solid orangered;
border-left: 2px solid tomato;
border-right: 2px solid tomato;
border-bottom:2px solid orange;
}
  #big {

font-size: 30px;
-webkit-text-fill-color:Orangered;
-webkit-text-stroke: 2px yellow;
}
}
@media only screen and (max-width: 351px) { 
    #mishit h2 {
    font-size: 25px;
   -webkit-text-stroke: 0;
}
.uvod {
border:7px solid white;
border-radius:30px;
}  
   img {
        width:90%;
    }
    input {
    font-size:17px;
    } 
#again {
 
    font-size:16px;
    padding:6px;
}
.broj p{
font-size:34px;
}
#mishit h2 {
font-size: 35px;
}
#mishit p {
 font-size:20px;
}
#tok {
font-size:25px;
font-weight:bold;
border-top: 2px solid orangered;
border-left: 2px solid tomato;
border-right: 2px solid tomato;
border-bottom:2px solid orange;
}
   } 
@media only screen and (max-width: 321px) {

.uvod {
width:95%;
border:6px solid white;
border-radius:20px;
}
  input {
    font-size:16px;
    } 
  #again {
 
    font-size:15px;
    padding:5px;
}  
    
.broj p{
font-size:33px;
}
#tok {
font-size:25px;
}
#mishit h2 {
font-size: 20px;
}
#mishit p {
 font-size:16px;
}
#tok {
font-size:24px;
font-weight:bold;
border-top: 2px solid orangered;
border-left: 2px solid tomato;
border-right: 2px solid tomato;
border-bottom:2px solid orange;
}
}
@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;
}
#tok {
font-size:23px;
font-weight:normal;
border-top: 2px solid orangered;
border-left: 2px solid tomato;
border-right: 2px solid tomato;
border-bottom:2px solid orange;
}
 }