index.css

*{
    margin: 0px;
    padding: 0px;
    font-family: BentonSans,Arial,Noto Sans,sans-serif;
}

.tnc{
    color: #2b2c2d;
}


#match_box_body{
    margin-top: 10px;
    display: grid;
    grid-template-columns: repeat(4,250px);
    
    gap:10px;

}
.match_box{
   
    height: 170px;
    width: 100%;
    background-color: #ffffff;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}
#a{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20px;

}
#a>#tamil{
    height: 170px;
    width: 250px;
    background-color: azure;
    border-radius: 20px;
}
#tamil>.a{
    font-size: 13px;
    padding: 10px;
}
#tamil>.b{
   
    height: 30px;
    margin-left: 5px;
    margin-right: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
   
}
#tamil>.b>.aa{
    display: flex;
}
#tamil>.b img,#tamil>.c img{
    height: 25px;
    width: 25px;
    padding-left: 5px;
}
#tamil .bbb{
    padding-left: 4px;
    padding-top: 5px;
    text-align: center;
    font-size: 14px;
}#tamil .c{
    margin-left: 5px;
    margin-right: 5px;
    height: 30px;
   
    display: flex;
    justify-content: space-between;
}
#tamil .c>.bb{
    display: flex;

}
#tamil .c>.bb img{
    height: 25px;
    width: 25px;
}
#tamil .cc>p{
    font-size: 14px;
}
#tamil .dd>p{
    font-size: 16px;
}
#tamil .ccc{
    font-size: 16px;
}
#tamil .ee{
    padding-left: 10px;
    font-size: 14px;
}
#tamil .d{
display: flex;
justify-content: space-around;
font-size: 14px;
padding-top: 8px;
}

.nav_info{

display: flex;
list-style-type: none;
justify-content: center;

}


#e{
justify-content: center;
display: flex;
align-items: center;
margin-top: 60px;
}

.match_headline{
    font-size: 12px;
    margin-top: 13px;
    margin-left: 15px;
}
.team_1{
   
    display: flex;
    justify-content: space-between;
    padding-top: 5px;
   width: 92%;
   margin: auto;
}
.team1_split{
    display: flex;
  
   
    
}
.team_logo>img{
    height: 15px;
}
.team_name{
    height: 20px;
    margin-left: 15px;
    font-size: 15px;
    padding-top: 5px;
    font-weight: bold;
}
.team1_live_score{
    padding-top: 8px;
    font-size: 17px;
    font-weight: bold;
}
.bottom_table{
    display: flex;
}
.bottom_table>p{
    margin-left: 15px;
    padding-top: 10px;
    margin-right: 5px;
    font-weight: 600;
    font-size: 13px;
}
.bottom_table>p:hover{
        border-bottom: 2px black solid;
        cursor: pointer;
}
.bottom_table_p{
    font-size: 12px;
    margin-left: 15px;
    margin-bottom: 8px;
}
.bottom_table_hr{
    width: 92%;
    margin: auto;
}

.nav_info >a{
display: block;
width: 200px;
}
.nav_info>span{
color: white;
margin-right: 20px;
font-size: 16px;
}
.nav_info>span:hover{
cursor: pointer;
}



body{
    background-color: aliceblue;
}

#add-image{
    display: block; 
    margin: auto;
    box-sizing: border-box; 
    
    margin-top: 20px;   
    border-radius: 5px; 
    width: 70%;
}

#add-image:hover{
    transform: scale(1.01);
    
}

#sub-nav-bar{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
    height: 56px;
    position: sticky;
    top: 50px;
    
    background-color: #ffffff;
}
#list{
    width: 85%;
    height: 40px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
   
    list-style: none;  
    overflow:auto;
}  
a{
    text-decoration: none; 
    color: #48494A;
    margin-right: 25px;
    font-size: 14px;
}

#ipl{
    font-weight: bold;
    color: black;
}
#main-cont{
    display: grid;
    width: 85%;
    margin: auto;
    grid-template-columns: 21% 52% 23%;
    gap:15px;
    margin-top: 20px;
    
}
#left-box{
    border: .1px solid rgb(235, 232, 232);
    padding: 20px;
    background-color: white;;
    border-radius: 10px;
    height: fit-content;
}
#mid-box-inside{
    border: .1px solid rgb(235, 232, 232);
    background-color: white;;
    border-radius: 10px;
    margin-bottom: 15px;
}
#mid-img{
    border-radius: 15px;
    transition: all 0.3s;
   
}
#mid-img:hover{
    transform: scale(1.05);
}

#mid-img1{
    border-radius: 15px;
    transition: all 0.3s;
    width: 100%;
    height: auto;
   
}
#mid-img1:hover{
    transform: scale(1.02);
}

#right-box{
    border: .1px solid rgb(235, 232, 232);
    /* padding: 20px; */
    background-color: white;;
    border-radius: 10px;
    margin-bottom: 15px;
}
#right-box-table{
    border: .1px solid rgb(235, 232, 232);
  
    background-color: white;;
    border-radius: 10px;
    margin-bottom: 15px;
}
#span-click1{
color: white;
margin: auto;

}
#span-click2{
color: #03a9f4;
margin: auto;

}

.match_box1{
width: 100%;
background-color: #ffffff;
}
.match_headline1{
color: #6c6d6f;
font-size: 12px;
margin-top: 10px;
}
.team_1_1{
display: flex;
justify-content: space-between;
padding-top: 10px;
width: 100%;
margin: auto;
}
.team1_split1{
display: flex;   
}
.team_logo1>img{
height: 20px;
}
.team_name1{
height: 10px;
margin-left: 15px;
font-size: 12px;
padding-top: 5px;
}
.team1_live_score1{
padding-top: 8px;
font-size: 12px;
color: #2b2c2d;
font-weight: bold;
}
.bottom_table1{
display: flex;
}
.bottom_table1>p{
margin-left: 15px;
padding-top: 10px;
margin-right: 15px;
}
.bottom_table1>p:hover{
border-bottom: 2px black solid;
cursor: pointer;
}
.bottom_table_p1{
font-size: 12px;
margin-top: 8px;
margin-bottom: 10px;
}
.bottom_table_hr1{
width: 100%;

margin-top: 10px;
}
h6{
margin-top: 15px; 
margin-bottom: 8px;
}

@media(max-width:998px){
html{
    font-size: 150%;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    grid-template-rows: auto;
}
 #match_box_body{
    width: 55%;
} 

}
@media(max-width:768px){
html{
    font-size: 150%;
    margin: auto;
    align-items: center;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
}
#match_box_body{
    width: 45%;
}

}





.box-2 {

margin-top: 40px;
width: 80%;
margin-left: 150px;
display: flex;
}




.box-2-left {
width: 25%;
}

.left1 {
box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
border-radius: 10px;
padding: 5px;
}

.left1 hr {
font-weight: 600px;
}

.series {
width: 100%;
height: 40px;
}

.left1 a {
text-decoration: none;
color: rgb(88, 82, 82);
/*font-family: 'Bree Serif', serif;*/
}

.left1 a:hover {
background-color: rgb(207, 190, 190);
display: block;
color: rgb(88, 82, 82);
/*font-family: 'Bree Serif', serif;*/
}

#hr {
height: 0.50px;
color: black;
background-color: grey;
}

.left1 h4 {
font-weight: 800;
/*font-family: 'Bree Serif', serif;*/
}




.mid-1 {
background-image: url("https://img1.hscicdn.com/image/upload/f_auto,t_gn_w_656/lsci/db/PICTURES/CMS/328100/328183.6.jpg");
}

.box-2-mid {
width: 45%;

border-radius: 5px;
margin-left: 10px;
margin-right: 10px;
}

.mid {
width: 100%;

}

.right1 {
box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
border-radius: 10px;
padding: 10px;
color: black;
}
.right1 a{
color: black;
}

.box-2-right {
width: 30%;
}

.right1 h4 {
font-weight: 800;

}

.left2 h4 {
font-weight: 800;

}

.right1 a {
text-decoration: none;
color: rgb(88, 82, 82);

}

.right1 a:hover {
background-color: rgb(207, 190, 190);
display: block;
color: rgb(88, 82, 82);

}

.left2 {
box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
border-radius: 10px;
padding: 5px;
margin-top: 10px;
}

.left2 hr {
font-weight: 600px;
}

.series {
width: 100%;
height: 40px;
}

.left2 a {
text-decoration: none;
color: rgb(88, 82, 82);

}

.left2 a:hover {
background-color: rgb(207, 190, 190);
display: block;
color: rgb(88, 82, 82);

}
.left2-img{
width:100%;
margin-top: 10px;
}

.right2 {
padding: 10px;
box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
border-radius: 10px;
margin: auto;
margin-top: 10px;
}

.zoom-in img {
width: 100%;
border-radius: 10px;
display: block;
transition: transform 1s;
}

.zoom-in {
height: 100%;
width: 100%;
overflow: hidden;

}

.right2 a {
text-decoration: none;

}

.right2:hover img {
transform: scale(1.3);
}

.right2 a:nth-child(2) {
color: black;
font-weight: 600px;
}

.right2:hover a:nth-child(2) {
color: blue;
font-weight: 600px;
}

.mid {

margin-bottom: 10px;
height: 800px;
box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
border-radius: 10px;
}
k:hover>.kk,.kkkkk:hover>.kk{
transform: translate(0,0);
opacity:1;
pointer-events: auto;

}



.mid1 {
padding: 10px;
border-radius: 10px;
margin: auto;
margin-top: 50px;
}

.mid1 a {
text-decoration: none;

font-size: 16px;
font-weight: bolder;
}

.small-case {
text-decoration: none;

color: grey;
font-size: 10px;
}



.mid h5 {

font-weight: 400;
}

.zoom-in:hover img {
transform: scale(1.2);
}

.mid1 a:nth-child(2) {
color: black;
font-weight: 600px;
}




.mid1:hover a:nth-child(2) {
font-size: 40px;
font-weight: 400;
}

.mid h4 {
margin-bottom: 0px;
margin-top: 0px;
}

.mid h5 {
margin-top: 0px;
margin-bottom: 0px;
}

.mid2 {
display: flex;
margin: 10px;
margin-top: 10px;
}

.mid2-1 {
width: 60%;

}

.mid2-2 {
margin-left: 10px;
}

.mid2:hover img {
transform: scale(1.3);
}

.mid2-1 {
color: black;
font-weight: 600px;
}

.mid2:hover a {
font-size: 30px;
font-weight: 600px;
}

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

.mid3 {
display: flex;
gap: 5px;
margin: 5px;
transform: scale(1.0);
}
.mid3>div{
height: 50px;
width: 350px;
padding-left: 10px;
}
.mid3 img{
height: 100px;
width: 170px;
border-radius: 10px;
}


.mid3 p{
font-size: 12px;
font-weight: bold;
}

.mid3 a {
text-decoration: none;
color: black;
/*font-family: 'Bree Serif', serif;*/
}

.mid3 a:hover {
text-decoration: none;
color: rgb(6, 134, 134);

}
.left1_bottom {

border-radius: 10px;
padding: 5px;
width:25%;
}

.left1_bottom hr {
font-weight: 600px;
}

.series {
width: 100%;
height: 40px;
}

.left1_bottom a {
text-decoration: none;
color: rgb(88, 82, 82);

}

.left1_bottom a:hover {
background-color: rgb(207, 190, 190);
display: block;
color: rgb(88, 82, 82);

}

#hr {
height: 0.50px;
color: black;
background-color: grey;
}

.left2_bottom h4 {
font-weight: 800;

}

.left2_bottom {

border-radius: 10px;
padding: 5px;
width:25%;
}

.left1_bottom hr {
font-weight: 600px;
}

.series {
width: 100%;
height: 40px;
}

.left2_bottom a {
text-decoration: none;
color: rgb(88, 82, 82);

}

.left2_bottom a:hover {
background-color: rgb(207, 190, 190);
display: block;
color: rgb(88, 82, 82);

}

#hr {
height: 0.50px;
color: black;
background-color: grey;
}

.left2_bottom h4 {
font-weight: 800;

}
.left1_bottom h4 {
font-weight: 800;

}
.mid{
padding-top: 10px;
padding-left: 3px;
margin-top: 20px;
}
.mid4{
height: 500px;
margin-top: 15px;
/* border: 1px solid; */
box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}