div{bor1der:2px, solid red;box-sizing: border-box;}
.sports_menu a.active {
    font-weight: bold;
    color: red;
    font-size: 1.2em;
    border-bottom: outset 3px blue;
}

a{
    text-decoration: none;
    color: black;
}

.sports_menu a, .vip a, .market a{
    color: black;
    text-decoration: none;

}
.sports_menu, .vip, .market{
  background-color: rgb(255, 255, 255);
  border: 2px outset wheat;
}

.sports_menu:hover, .vip:hover, .market:hover{
    background-color: rgb(250, 176, 176);
}
.act{
    font-weight: bold;
    color: gold;
}



body{
    background-color: rgba(28, 37, 31, 0.822);
    position: relative;
    min-height: 100%;
}

.header{
    height: 50vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-bottom: 10vh;
    background-image: url('../images/topimage.jpeg');

    background-position: bottom;
    background-repeat: no-repeat;
    background-size: cover;
    
} 


  


.current{
    margin: 10px 0px;
    text-align: center;
    padding: 10px;
    font-size: 1.3em;
    text-decoration: underline;
    color: white;
    font-family: Georgia, 'Times New Roman', Times, serif;

}
.top_menu{
    display: flex;
    justify-content: space-between;
    margin: 10px;
    align-items: center;
}

.logo{

    margin: 10px;
    width: 15%;
    height: 25vh;
}

.logo a{
    display: block;
    height: 100%;
    width: 100% ! important;
    background-color: rgb(0, 255, 191);
}
.logo a img{width: 100%;height: 100%;}
.sports_selection{
    flex-basis: 75%;
    display: flex;
    margin: 10px;
    justify-content: space-evenly;
    height: fit-content;
}

.sports_menu{
    margin: 10px;
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;

}

.market_menu a{
    display: inline;
} 
.market_menu{
    display: flex;
    justify-content: space-evenly;
    background-color: rgba(0, 0, 0, 0.39);
    flex-wrap: wrap;

}


.market{
    padding: 10px;
    margin: 10px;
}


.structure{
    display: flex;
    justify-content: space-between;
    background-image: linear-gradient(to right,rgba(180, 243, 180, 0.671),rgba(62, 107, 62, 0.178),rgba(67, 68, 67, 0.158),rgba(10, 121, 79, 0.17));
}

.square{
    margin: 15px 5%;
    height: fit-content;
    width: 78%;

}

.guide{
    margin: 20px 0px;
    font-size: 24px;
    font-weight: bold;
}
.option_menu{
    display: flex;
    flex-direction: column;
    max-height: 100vh;
    overflow-y: auto;
    margin: 5px 10px;
    background-color: rgba(116, 214, 116, 0.295);
    width: 18%;
    position: sticky;
    margin: 20px 0px;
    top: 0; /* Adjust this if you have a navbar */
   
     
}

.option_menu>*{
    text-align: center;
    padding: 5px;
    margin: 5px 10px;
 
}
.option a{
    text-decoration: none;
    color: black;
}

.option{box-shadow: 5px 5px 5px 2px rgba(80, 133, 2, 0.575); }
.option:hover{box-shadow: 5px 5px 5px 2px rgba(3, 69, 122, 0.925);
     background-color: rgb(31, 186, 247);
     font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;}

.match_info_type{
text-align: center;
padding: 10px;
margin-bottom: 20px;
}

.match_info{
    background-color: rgba(134, 158, 29, 0.178);
    display: flex;
    justify-content: space-evenly;
    padding: 10px 5px;
    align-items: center;
    margin: 0px 20px;
    height: 100%;

}

.teamvs{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 50px;
    height: 50vh;

}

.home_info,.away_info{
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2.5em;
    background-color: rgba(128, 255, 0, 0.438);
    color: white;
    font-weight: bold;
    font-family: 'Times New Roman', Times, serif;
    box-shadow: 5px 5px 5px 5px black;
    margin-bottom: 10px;
    margin: 10px;
    text-align: center;
}

.game_info>*{
    display: block;
}
.game_info{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: whitesmoke;
    height: 100%;
    padding: 10px;
}

.match_info_market{
    display: flex;
    justify-content: center;
    align-items: center;
}

.match_info_market table{
    width: 50%;
    margin: 10px 0px;
}

.table-header th {
    position: sticky;
    top: 0;
    background-color: #ffd1d1;
    z-index: 1;
}
.square_table thead tr{
   
    background-color: rgba(128, 255, 0, 0.453);
}

.square_table{
    border-spacing: 10px;
}

.square_table>*{
    text-align: center;
}

.square_table thead tr th{
    gap: 120px;
    padding: 10px;
    border-bottom-style: outset;
    border-bottom-width: 2px;
    border-bottom-color: orangered;    
}

.square_table thead tr th:nth-of-type(2){
    min-width: 100px;
}

.square_table tbody tr td:nth-of-type(odd){
  background-color: rgba(255, 166, 0, 0.452);
  min-height: 50px;
  font-weight: bolder;
}

.square_table tbody tr td:nth-of-type(even){
    background-color: rgba(212, 185, 185, 0.541);
    padding: 5px;
    font-weight: bolder;
    
}



.stress {
        background-color: rgba(255, 166, 0, 0.973) !important;
        height: 50px !important;  
      
        font-size: 1.3em !important; 
        color: rgb(21, 53, 2);
        font-weight: 500; 
        font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; 
}

.won{
    /* background-color: green !important; */
    color: rgb(3, 122, 3);
    font-size: 1.2em;
    font-weight: bolder;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}



.lost{
    /* background-color: red !important; */
    color: rgb(138, 15, 15);
    font-size: 1.2em;
    font-weight: bolder;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    
}

.team_link{
    /* line-height: 1.5em; */

}
.team_link a{
    color: black;
    text-decoration: none;
    font-weight: 400;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.team_link a:hover{
  color: rgb(88, 3, 3);
  text-decoration: underline;
}
.match_time{
font-variant: small-caps;
font-size: 14px;
}




.match_vs{
    font-size: 3em;
    font-family: 'Courier New', Courier, monospace;
    color: white;
    font-weight: bolder;
}

.game_info .match_time{
    color: white;
}

.toprar{
    width: 50px;
    height:50px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: aqua;
    font-size: 2em;
    font-weight: bolder;
    position: fixed;
    top: 90vh;
    right: 30px;
    z-index: 100;
}


.footer {
    background-color: rgba(255, 253, 115, 0.753);
    display: flex;
    padding: 10px;
    align-items: center;         
    justify-content: space-evenly; 
    width: 100%;   
    margin: 0px;                
}

.contact_ic> *{
    display: block;
}

.contact_ic{
    display: flex;
    justify-content: space-evenly;
}

.icc{
    font-size: 2em;
    margin: 5px;
    color: rgb(1, 92, 97);
}
.adamu{
    text-align: center;
    padding: 5px;
}
.scoreshow{
    color: white;
    font-size:2.5em;
    font-weight:bold;
    background-color: indigo;
    padding:5px 10px;
}
.footer_div{
    height: fit-content;
    text-align: center;

}

.yest{
    display: flex;
    width: 100%;
    justify-content: space-around;
    padding: 5px;
}
.yest div a{
    color: white;
}
.yest{
    display: none;

}
.t_badge{
    height: 100px; width: 100px; text-align: center;
}
@media screen and (max-width: 291px){
    /*for whatches */
    /* body{background-color:white;} */
    .scoreshow{
        color: white;
        font-size:1.3em;
        font-weight:bold;
        background-color: indigo;
        padding:3px 5px;
    }
    .teamvs{
      
        margin-bottom: 50px;
        height: 85vh;
        
    }

    .logo{

        margin: 10px;
        width: 40%;
        height: 20vh;
    }
    
}
    @media screen and (max-width: 550px) and (min-width:291.1px) {
        /* body {background-color:red;} */
        .yest{
            display: flex;
        
        }
        .sports_selection{
            flex-wrap: wrap;
            width: 75%;
        }


        
        .header{
            height: fit-content;  
            margin-bottom: 20px;          
        }

        .sports_menu{
            margin: 5px;
            padding: 5px;

        }


        .logo{

            margin: 10px;
            width: 40%;
            height: 20vh;
        }
        
        .market{
            padding: 3px;
            margin: 3px;
        }

        .footer {
              flex-wrap: wrap; 
              justify-content: space-between;
              padding: 0px;
        }
        
        .scoreshow{
            color: white;
            font-size:2em;
            font-weight:bold;
            background-color: indigo;
            padding:5px 8px;
        }
     
        .footer_div{
            margin: 10px;        
        }
        .option_menu{
           display: none;
        }
        .square{
        margin: 3px 0px;
        height: fit-content;
        width: 100%;
        overflow-x: auto;

        
    }


.square_table{
    border-spacing: 3px;
}


.square_table thead tr th{
    gap: 3px;
    padding: 3px;
    border-bottom-style: outset;
    border-bottom-width: 2px;
    border-bottom-color: orangered;    
}

.square_table thead tr th:nth-of-type(2){
    min-width: 10px;
}


.square_table tbody tr td:nth-of-type(even){
    padding: 3px;

              }
    
            
    .square_table {
    font-size: 12px;   /* Reduce text size on small screens */
}
.table-cell, .team_link, .stress, .resut {
    padding: 4px;
}


.match_info{

    justify-content: space-around;
    flex-direction: column;
    padding: 3px 2px;
    align-items: center;
    margin: 0px 5px;
    height: 100%;

}
.teamvs{
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px 0px;
    height: 60vh;

    }

    .home_info,.away_info{
        padding: 3px;
        font-size: 1.5em;
        margin: 5px 10px;
    }
    .t_badge{
        height: 80px; width: 80px; text-align: center;
    }
    .match_vs{
        font-size: 1.5em;
    }
    .game_info>*{
        font-size: 12px;
   
    }
    .game_info{
        padding: 0px;
    }

    
    .match_info_market table{
        width: 100%;
    }
}
    
    @media screen and (max-width: 770px) and (min-width: 550.1px) {
    
        /* body {background-color:black} */
        .yest{
            display: flex;
        
        }
        .sports_selection{
            flex-wrap: wrap;
            width: 75%;
        }
        .logo{
            margin: 10px;
            width:40%;
            height: 25vh;
            
        }
      
        .header{
            height: fit-content;  
            margin-bottom: 20px;          
        }


        .market{
            padding: 5px;
            margin: 5px;
        }

        .footer {
            flex-wrap: wrap; 
            justify-content: space-between;
            padding: 0px;
      }
      
  
   
      .footer_div{
          margin: 10px;        
      }


      .option_menu {
        display: none;
    }
    .square{
    margin: 3px 0px;
    height: fit-content;
    width: 100%;
    overflow-x: auto;

    }


    .square_table{
    border-spacing: 3px;
    }


    .square_table thead tr th{
    gap: 3px;
    padding: 3px;
    border-bottom-style: outset;
    border-bottom-width: 2px;
    border-bottom-color: orangered;    
    }

    .square_table thead tr th:nth-of-type(2){
    min-width: 10px;
    }


    .square_table tbody tr td:nth-of-type(even){
    padding: 3px;

            }

            
    .square_table {
    font-size: 12px;   /* Reduce text size on small screens */
    }
    .table-cell, .team_link, .stress, .resut {
    padding: 4px;
    }
    

.match_info{

    justify-content: space-around;
    flex-direction: column;
    padding: 7px 5px;
    align-items: center;
    margin: 0px 5px;
    height: 100%;

}
.teamvs{
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px 0px;
    height: 50vh;

    }

    .home_info,.away_info{
        padding: 5px;
        font-size: 1.8em;
        margin: 5px 10px;
    }
    .t_badge{
        height: 100px; width: 100px; text-align: center;
    }
    .match_vs{
        font-size: 1.8em;
    }
    .game_info>*{
        font-size: 14px;
   
    }
    .game_info{
        padding: 0px;
    }

    
    .match_info_market table{
        width: 100%;
    }


    }
    
    
    
    @media screen and (max-width: 992px) and (min-width: 770.1px) {
        /* body {background-color:yellow} */
        .sports_selection{
            flex-wrap: wrap;
            width: 75%;
        }
        .logo{
            margin: 10px;
            width:24%;
            height: 25vh;     
            
            
        }
        .header{
            height: fit-content;  
            margin-bottom: 20px;          
        }
        .footer {
            flex-wrap: wrap; 
            justify-content: space-between;
            padding: 0px;
      }
      
  
   
      .footer_div{
          margin: 10px;        
      }

      .option_menu{
        margin: 5px 5px;
        width: 22%;
    }
    .square{
    margin: 0px 0px;
    height: fit-content;
    width: 78%;

    }


    .square_table{
    border-spacing: 5px;
    }


    .square_table thead tr th{
    gap: 3px;
    padding: 3px;
    border-bottom-style: outset;
    border-bottom-width: 2px;
    border-bottom-color: orangered;    
    }

    .square_table thead tr th:nth-of-type(2){
    min-width: 10px;
    }


    .square_table tbody tr td:nth-of-type(even){
    padding: 3px;

            }

            
    .square_table {
        font-size: 12px;   /* Reduce text size on small screens */
    }
    .table-cell, .team_link, .stress, .resut {
        padding: 5px;
    }



    .match_info{

        justify-content: space-around;
        flex-direction: column;
        padding: 10px 5px;
        align-items: center;
        margin: 0px 5px;
        height: 100%;
    
    }
    .teamvs{
        display: flex;
        align-items: center;
        justify-content: space-around;
        margin: 20px 0px;
        height: 50vh;
    
        }
    
        .home_info,.away_info{
            padding: 5px;
            font-size: 1.8em;
            margin: 5px 10px;
        }
        .t_badge{
            height: 100px; width: 100px; text-align: center;
        }
        .match_vs{
            font-size: 1.8em;
        }
        .game_info>*{
            font-size: 14px;
       
        }
        .game_info{
            padding: 5px;
        }
    
        
        .match_info_market table{
            width: 80%;
        }
    

    }
    
    
    
    @media screen and (max-width: 1199px) and (min-width: 992.1px) {
        /* body {background-color:fuchsia} */
        .sports_selection{
            flex-wrap: wrap;
            width: 75%;
        }
        .logo{
            margin: 10px;
            width:22%;
            height: 30vh;     
            
        }
        .header{
            height: fit-content;  
            margin-bottom: 20px;          
        }

        .footer {
            flex-wrap: wrap; 
            justify-content: space-between;
            padding: 0px;
      }
      
  
   
      .footer_div{
          margin: 10px;        
      }



    
      .option_menu{
        margin: 5px 5px;
        width: 22%;
    }
    .square{
    margin: 0px 0px;
    height: fit-content;
    width: 78%;

    }


    .square_table{
    border-spacing: 5px;
    }


    .square_table thead tr th{
    gap: 3px;
    padding: 3px;
    border-bottom-style: outset;
    border-bottom-width: 2px;
    border-bottom-color: orangered;    
    }

    .square_table thead tr th:nth-of-type(2){
    min-width: 10px;
    }


    .square_table tbody tr td:nth-of-type(even){
    padding: 3px;

            }

            
    .square_table {
        font-size: 15px;   /* Reduce text size on small screens */
    }
    .table-cell, .team_link, .stress, .resut {
        padding: 5px;
    }


    .teamvs{
        display: flex;
        align-items: center;
        justify-content: space-around;
        margin: 20px 0px;
        height: 55vh;
    
        }
    }
    
    
    @media screen and (min-width: 1450px) {
        body {width: 1450px;}
    }