*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family:Arial, Helvetica, sans-serif
}
body{
    height: 100vh;
    background: rgb(63, 63, 63);
    background-image: url(images/back_pozadi_basic.jpg);
      background-size: cover;
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-position: center;
}

li{
    list-style: none;
}
a{
    text-decoration: none;
    color: white;
    font-size: 1rem;
}
a:hover{
    color:red;
}

/* HEADER */

header{
    position: relative;
    padding: 0 2rem;
    background: rgba(100, 100, 100, 0.5);
    backdrop-filter: blur(5px);
}
.logo_vardar{
    padding-top: 5px;
    width: 100%;
    display: flex;
    object-fit: contain;
}

.navbar{
    width: 100%;
    height: 60px;
    max-width: 1300px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.navbar .logo a{
width: 100%;
height: 80px;
display: flex;
margin-top: 20px;
position: relative;
}

.navbar .links {
    display: flex;
    gap: 1.2rem;
}

.navbar .toggle_btn{
color: white;
font-size: 1.5rem;
cursor: pointer;
display: none;
}

.action_btn{
    background-color: red;
    color: white;
    padding: 0.5rem 1rem;
    border: none;
    outline: none;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: bold;
    cursor: pointer;
    transition: scale 0.2 ease;
}

.action_btn:hover{
    scale:1.05;
    color: white;
}

.action_btn:active{
    scale:0.95;
}

/* DROPDOWN MENU */

.dropdown_menu{
    display: none;
    position: relative;
    left: 280px;
    margin-bottom: 30px;
    top: 30px;
    height: 0;
    width: 300px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(15px);
    border-radius: 10px;
    overflow:hidden;
    transition: heigh 0.2s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.dropdown_menu.open{
    height: 240px;
}

.dropdown_menu li{
    padding: 0.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dropdown_menu .action_btn{
    width: 100%;
    display: flex;
    justify-content: center;
}

.logo_vardar{ 
    display: flex;
  justify-content: flex-start;
}

    /* RESPONSIVE RULES */

    @media (max-width:767px) {
        .navbar .links,
        .navbar .action_btn{
            display: none;
        }

        .navbar .toggle_btn{
            display: block;
        }

        .dropdown_menu{
            display: block;
        }
    }

    @media (max-width:576px){
        .dropdown_menu{
            left:0rem;
            margin-bottom: 50px;
            width: unset;
        }
    }



/* TEKST PRED IGRACI */

.ttigraci{
    display: flex;
    justify-content: center;
}

.text_web{
    width: 100%;
}



/* IGRACI 0 red */

.text_sef, .text_sef2, .text_sef3{
    width: 100%;
max-width: 1300px;
margin: 0 auto;
    display: flex;
justify-content: start;
background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(15px);
    margin-top: 10px;
    
}

.sef1, .sef2, .sef3{
    font-size: 23px;
    color: white;
    letter-spacing:2px;
    font-style: normal;
    margin-top: 10px;
}

@media (max-width:767px){
    .sef1, .sef2, .sef3{
        font-size: 20px;
    }
    }

    @media (max-width:576px){
        .sef1, .sef2, .sef3{
            font-size: 14px;
        }
    }


  
/* IGRACI 1 red */

.igraci1{
    width: 100%;
max-width: 1300px;
margin: 0 auto;
    display: flex;
justify-content: center;

}

.sliki_igraci1{
    display: flex;
    text-align: center;
    justify-content: center;
    margin-left: 10px;
    margin-right: 10px;
    gap:8px;
}

.igra_red1_1, .igra_red1_2, .igra_red1_3, .igra_red1_4, .igra_red1_5, .igra_red1_6{
    display: inline-block;
    align-content: center;
    align-items: center;
    justify-content: center;
}

.igra1, .igra2, .igra3, .igra4, .igra5, .igra6{
    width: 100%;
}

.igra1:hover, .igra2:hover, .igra3:hover, .igra4:hover, .igra5:hover, .igra6:hover{
box-shadow: 1px 1px 15px white;
transition-duration: 0.4s;
transform:scale(1.03)
}


/* IGARCI 2 red */

.igraci2{
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
    display: flex;
justify-content: center;
}

.sliki_igraci2{
    display: flex;
    text-align: center;
    justify-content: center;
    margin-left: 10px;
    margin-right: 10px;
    gap:8px;
}

.igra_red2_1, .igra_red2_2, .igra_red2_3, .igra_red2_4, .igra_red2_5, .igra_red2_6{
    display: inline-block;
    align-content: center;
    align-items: center;
    justify-content: center;
}

.igra7, .igra8, .igra9, .igra10, .igra11, .igra12{
    width: 100%;
}

.igra7:hover, .igra8:hover, .igra9:hover, .igra10:hover, .igra11:hover, .igra12:hover{
    box-shadow: 1px 1px 15px white;
    transition-duration: 0.4s;
    transform:scale(1.03)
    }


/* IGARCI3 */

.igraci3{
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
    display: flex;
justify-content: center;
}

.sliki_igraci3{
    display: flex;
    text-align: center;
    justify-content: center;
    margin-left: 10px;
    margin-right: 10px;
    gap:8px;
}

.igra_red3_1, .igra_red3_2, .igra_red3_3, .igra_red3_4, .igra_red3_5, .igra_red3_6{
    display: inline-block;
    align-content: center;
    align-items: center;
    justify-content: center;
}

.igra13, .igra14, .igra15, .igra16, .igra17, .igra18{
    width: 100%;
}

.igra13:hover, .igra14:hover, .igra15:hover, .igra16:hover, .igra17:hover, .igra18:hover{
    box-shadow: 1px 1px 15px white;
    transition-duration: 0.4s;
    transform:scale(1.03)
    }


/* IGRACI4 */

.igraci4{
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
    display: flex;
justify-content: center;
}

.sliki_igraci4{
    display: flex;
    text-align: center;
    justify-content: center;
    margin-left: 10px;
    margin-right: 10px;
    gap:8px;
}

.igra_red4_1, .igra_red4_2, .igra_red4_3, .igra_red4_4, .igra_red4_5, .igra_red4_6{
    display: inline-block;
    align-content: center;
    align-items: center;
    justify-content: center;
}
.igra19, .igra20, .igra21, .igra22, .igra23, .igra24{
    width: 100%;
}

.igra19:hover, .igra20:hover, .igra21:hover, .igra22:hover, .igra23:hover, .igra24:hover{
    box-shadow: 1px 1px 15px white;
    transition-duration: 0.4s;
    transform:scale(1.03)
    }


/* IGRACI5 */

.igraci5{
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
    display: flex;
justify-content: center;

}

.sliki_igraci5{
    display: flex;
    text-align: center;
    justify-content: center;
    margin-left: 10px;
    margin-right: 10px;
    gap:8px;
}

.igra_red5_1, .igra_red5_2, .igra_red5_3, .igra_red5_4, .igra_red5_5, .igra_red5_6{
    display: inline-block;
    align-content: center;
    align-items: center;
    justify-content: center;
}

.igra25, .igra26, .igra27, .igra28, .igra29, .igra30{
    width: 100%;
}

.igra30{
    opacity: 0;
}

.igra25:hover, .igra26:hover, .igra27:hover, .igra28:hover, .igra29:hover, .igra30:hover{
    box-shadow: 1px 1px 15px white;
    transition-duration: 0.4s;
    transform:scale(1.03)
    }

/* assistents */


.igraci0{
    width: 100%;
max-width: 1300px;
margin: 0 auto;
    display: flex;
justify-content: center;
margin-bottom: 10px;
margin-top: 10px;
}

.sliki_igraci0{
    display: flex;
    text-align: center;
    justify-content: center;
    margin-left: 10px;
    margin-right: 10px;
    gap:8px;
}

.igra_red0_1, .igra_red0_2, .igra_red0_3, .igra_red0_4, .igra_red0_5, .igra_red0_6{
    display: inline-block;
    align-content: center;
    align-items: center;
    justify-content: center;
}

.igra01, .igra02, .igra03, .igra04, .igra05, .igra06{
    width: 100%;
}

.igra06{
    opacity: 0;
}

.igra01:hover, .igra02:hover, .igra03:hover, .igra04:hover, .igra05:hover, .igra06:hover{
    box-shadow: 1px 1px 15px white;
    transition-duration: 0.4s;
    transform:scale(1.03)
    }

/* trener */

.igraci00{
    width: 100%;
max-width: 1300px;
margin: 0 auto;
    display: flex;
justify-content: center;
margin-bottom: 10px;
margin-top: 10px;
}

.sliki_igraci00{
    display: flex;
    text-align: center;
    justify-content: center;
    margin-left: 10px;
    margin-right: 10px;
    gap:8px;
}

.igra_red00_1, .igra_red00_2, .igra_red00_3, .igra_red00_4, .igra_red00_5, .igra_red00_6{
    display: inline-block;
    align-content: center;
    align-items: center;
    justify-content: center;
}

.igra001, .igra002, .igra003, .igra004, .igra005, .igra006{
    width: 100%;
}

.igra002, .igra003, .igra004, .igra005, .igra006{
    opacity: 0;
}

.igra001:hover, .igra002:hover, .igra003:hover, .igra004:hover, .igra005:hover, .igra006:hover{
    box-shadow: 1px 1px 15px white;
    transition-duration: 0.4s;
    transform:scale(1.03)
    }


/* IGRACI 7 red Fizio */

.igraciF0{
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
    display: flex;
justify-content: center;

}

.sliki_igraciF0{
    display: flex;
    text-align: center;
    justify-content: center;
    margin-left: 10px;
    margin-right: 10px;
    gap:8px;
}

.igra_redF0_1, .igra_redF0_2, .igra_redF0_3, .igra_redF0_4, .igra_redF0_5, .igra_redF0_6{
    display: inline-block;
    align-content: center;
    align-items: center;
    justify-content: center;
}

.igraF01, .igraF02, .igraF03, .igraF04, .igraF05, .igraF06{
    width: 100%;
}

.igraF03, .igraF04, .igraF05, .igraF06{
    opacity: 0;
}

.igraF01:hover, .igraF02:hover, .igraF03:hover, .igraF04:hover, .igraF05:hover, .igraF06:hover{
    box-shadow: 1px 1px 15px white;
    transition-duration: 0.4s;
    transform:scale(1.03)
    }

/* IGRACI 7 red Doktor */

.igraciD0{
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
    display: flex;
justify-content: center;

}

.sliki_igraciD0{
    display: flex;
    text-align: center;
    justify-content: center;
    margin-left: 10px;
    margin-right: 10px;
    gap:8px;
}

.igra_redD0_1, .igra_redD0_2, .igra_redD0_3, .igra_redD0_4, .igra_redD0_5, .igra_redD0_6{
    display: inline-block;
    align-content: center;
    align-items: center;
    justify-content: center;
}

.igraD01, .igraD02, .igraD03, .igraD04, .igraD05, .igraD06{
    width: 100%;
}

.igraD02, .igraD03, .igraD04, .igraD05, .igraD06{
    opacity: 0;
}

.igraD01:hover, .igraD02:hover, .igraD03:hover, .igraD04:hover, .igraD05:hover, .igraD06:hover{
    box-shadow: 1px 1px 15px white;
    transition-duration: 0.4s;
    transform:scale(1.03)
    }


/* IGRACI 7 red Ekonom */

.igraciBAJO0{
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
    display: flex;
justify-content: center;

}

.sliki_igraciBAJO0{
    display: flex;
    text-align: center;
    justify-content: center;
    margin-left: 10px;
    margin-right: 10px;
    gap:8px;
}

.igra_redBAJO0_1, .igra_redBAJO0_2, .igra_redBAJO0_3, .igra_redBAJO0_4, .igra_redBAJO0_5, .igra_redBAJO0_6{
    display: inline-block;
    align-content: center;
    align-items: center;
    justify-content: center;
}

.igraBAJO01, .igraBAJO02, .igraBAJO03, .igraBAJO04, .igraBAJO05, .igraBAJO06{
    width: 100%;
}

.igraBAJO02, .igraBAJO03, .igraBAJO04, .igraBAJO05, .igraBAJO06{
    opacity: 0;
}

.igraBAJO01:hover, .igraBAJO02:hover, .igraBAJO03:hover, .igraBAJO04:hover, .igraBAJO05:hover, .igraBAJO06:hover{
    box-shadow: 1px 1px 15px white;
    transition-duration: 0.4s;
    transform:scale(1.03)
    }

/* RESPONSIVE RULES */

@media (max-width:767px){
    .ttigraci {
        display: block;
    }
}

@media (max-width:576px){
    .ttigraci {
        display: block;
        margin-top: -30px;
    }
    
}

/* FUTER */

footer{
    display: flex;
  text-align: center;
  justify-content: center;
  position: relative;
  
  }
  
  .footer_image{
    width: 100%;
    display: flex;
    justify-content: center;
    text-align: center;
    align-items: center;
    align-content: center;
  }
  
  /* RESPONSIVE RULES */
  
  @media (max-width:767px){
  .footer{
    display: block;
  }
    
  }