@media screen and (max-width: 435px)  {
    *{
        padding: 0;
        margin: 0;
        font-family: "Poppins", sans-serif;
        font-weight: 300;
        font-style: normal;
        zoom: 100%;
    }
    body{
        overflow-x: hidden
    }
    .menu-button-container {
        display: flex;
        z-index: 1;
      }
      .menu {
        position: absolute;
        top: 0;
        margin-left: 0px;
        margin-top: 80px;
        left: 0;
        flex-direction: column;
        width: 100%;
        justify-content: center;
        align-items: center;
        z-index: 1;
      }
      #menu-toggle ~ .menu a {
        height: 0;
        margin: 0;
        padding: 0;
        border: 0;
        
        transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
      }
      #menu-toggle:checked ~ .menu a {
        border: 1px solid #333;
        height: 2.5em;
        padding: 0.5em;
        transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
        z-index: 1;
        width: 95.9%;
      }
      .menu > a {
        display: flex;
        justify-content: center;
        margin: 0;
        padding: 0.5em 0;
        width: 100%;
        color: white;
        background-color: #222;
      }
      .menu > a:not(:last-child) {
        border-bottom: 1px solid #444;
      }
      #LogoN{
        margin: 0px -5px;
      }
    .Top{
        display: flex;
    }
    #linkM{
        color: white;
        font-weight: 500;
        position: relative;
        top: 0px;
        padding: 15px 13px;
        transition: 0.4s;
    }
    #linkM:hover{
        top: 0px;
        text-shadow: 0px 0px 15px white;
    }
    .Headlines{
        margin: 10px 10px;
    }
    #Greet{
        font-size: 35px;
        line-height: 1;
        font-weight: 500;
        color: rgb(98, 98, 98);
    }
    #Message{
        position: relative;
        top: -5px;
        font-weight: 500;
        font-size: 15px;
    }
    .box{
        border-radius: 10px;
        opacity: 1;
        transition-duration: 0.3s;
    }
    .box:hover{
        opacity: 0.79;
    }
    .ImagesH{
        display: grid;
        grid-template-columns: repeat(2,200px);
        grid-template-rows: repeat(4, 140px);
        gap:4px;
    }
    .box{
        background-size: cover;
        color: white;
    }
    #Box1{
        grid-column: 1/3;
        grid-row: 1/3;
        display: flex;
        align-items: end;
        justify-content: left;
        background-position: -40px;
    }
    #Text1{
        padding: 10px 15px;
        padding-top: 50px;
        font-weight: 500;
        line-height: 1;
        font-size: 20px;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        background-image: linear-gradient(to top, rgba(0, 0, 0, 0.954), rgba(128, 128, 128, 0));
    }
    #Box2{
        grid-row: 3/4;
        grid-column: 1/2;
        background-position: -40px -0px;
        display: flex;
        align-items: end;
        justify-content: left;
    }
    #Text2{
        padding: 10px 10px;
        padding-top: 50px;
        line-height: 1;
        font-weight: 500;
        font-size: 13px;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        background-image: linear-gradient(to top, rgba(0, 0, 0, 0.986), rgba(0, 0, 0, 0));
    }
    #Box3{
        grid-column: 1/2;
        grid-row: 4/5;
        background-position: -40px;
        display: flex;
        align-items: end;
        justify-content: left;
    }
    #Text3{
        padding: 10px 5px;
        padding-top: 90px;
        font-weight: 500;
        line-height: 1;
        font-size: 13px;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        background-image: linear-gradient(to top, rgba(0, 0, 0, 0.986), rgba(0, 0, 0, 0));
    }
    #Box4{
        grid-column : 2/3;
        grid-row: 3/5;
        display: flex;
        align-items: end;
        justify-content: left;
        background-position: 0px;
    }
    #Text4{
        padding: 15px 10px;
        padding-top: 30px;
        width: 435px;
        font-weight: 500;
        line-height: 1;
        font-size: 18px;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        background-image: linear-gradient(to top, rgba(0, 0, 0, 0.986), rgba(0, 0, 0, 0));
    }
    #hrn{
        margin-top: 40px;
    }
    .News{
        margin: 10px 10px;
    }
    #Nps{
        color: rgb(238, 42, 42);
        font-weight: 400;
        font-size: 40px;
        position: relative;
        top: 4px;
    }
    #NewH{
        font-size: 30px;
        font-weight: 500;
        color: rgb(84, 84, 84);
        padding-bottom: 5px;
    }
    .ContentN{
        display: grid;
        gap: 5px;
        grid-template-columns: repeat(2,195px);
        grid-template-rows: repeat(3, 140px);
    }
    #News1{
        background-position: -30px 0px;
    }
    #News2{
        grid-column: 1/2;
    }
    #News3{
        grid-column: 1/2;
    }
    .NewsT1{
        grid-column: 2/3;
        grid-row: 1/2;
    }
    .NewsT2{
        grid-column: 2/3;
        grid-row: 2/3;
    }
    .NewsT3{
        grid-column: 2/3;
        grid-row: 3/4;
    }
    .News1{
        border-radius: 12px ;
        background-size: cover;
        transition-duration: 0.3s;
        opacity: 1;
    }
    #newsT{
        font-size: 13px;
        font-weight: 400;
        padding: 5px 10px;
        line-height: 1.2;
    }
    #Italic{
        font-style: italic;
    }
    .SportsC{
        margin: 10px 10px;
    }
    #SportH{
        font-size: 30px;
        font-weight: 500;
        color: rgb(84, 84, 84);
        padding-bottom: 5px;
    }
    #Sps{
        color: rgb(24, 137, 230);
        font-weight: 400;
        font-size: 40px;
        position: relative;
        top: 4px;
    }
    .ContentS{
        display: grid;
        gap: 5px;
        grid-template-columns: repeat(2,192px);
        grid-template-rows: repeat(3, 140px);
    }
    .Sports1{
        background-size: cover;
        background-position: -30px 0px;
        border-radius: 12px;
        transition-duration: 0.3s;
        opacity: 1;
    }
    #Sports1{
        grid-column: 1/2;
    }
    #Sports2{
        grid-column: 1/2;
        grid-row: 2/3;
    }
    #Sports3{
        grid-column: 1/2;
        grid-row: 3/4;
    }
    .News1:hover, .Sports1:hover{
        opacity: 0.79;
    }
    #Title{
        padding: 5px 10px;
        font-weight: 500;
        font-size: 20px;
        line-height: 1;
    }
    #SportsT{
        font-size: 13px;
        font-weight: 400;
        padding: 5px 10px;
        line-height: 1;
        margin-bottom: 30px;
    }
    .footer{
        background-color: #141414;
        color: white;
        font-size: 30px;
    }
    .ContentF{
        margin: 0px 20px;
        padding-top: 20px;
        padding-bottom: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: 15px;
        font-weight: 300;
    }
    #hrF{
        margin-top: 10px;
        margin-bottom: 7px;
    }
}
@media screen and (max-width: 410px){
    .MainC{
        overflow-x: hidden;
        max-width: 100%;
    }
    .ImagesH{
        grid-template-columns: repeat(2,188px);
        grid-template-rows: repeat(4, 135px);
        gap:4px;
      }
        .ContentN{
            grid-template-columns: repeat(2,190px);
            grid-template-rows: repeat(3, 140px);
        }
        .ContentS{
            grid-template-columns: repeat(2,190px);
        }
}
@media screen and (max-width: 390px){
    .ImagesH{
        grid-template-columns: repeat(2,183px);
        grid-template-rows: repeat(4, 130px);
        gap:4px;
      }
        .ContentN{
            grid-template-columns: repeat(2,183px);
            grid-template-rows: repeat(3, 130px);
        }
        .ContentS{
            grid-template-columns: repeat(2,183px);
            grid-template-rows: repeat(3, 130px);
        }
}
@media screen and (max-width: 375px){
.menu {
        position: absolute;
        top: 0;
        margin-left: 0px;
        margin-top: 80px;
        left: 0;
        flex-direction: column;
        width: 100%;
        justify-content: center;
        align-items: center;
        z-index: 1;
      }
      #menu-toggle:checked ~ .menu a {
        width: 95%;
      }
      .ImagesH{
        display: grid;
        grid-template-columns: repeat(2,175px);
        grid-template-rows: repeat(4, 125px);
        gap:4px;
      }
        .ContentN{
            display: grid;
            gap: 5px;
            grid-template-columns: repeat(2,175px);
            grid-template-rows: repeat(3, 140px);
        }
        .ContentS{
            grid-template-columns: repeat(2,175px);
        }
        
}
@media screen and (max-width: 320px){
    
    .menu {
            position: absolute;
            top: 0;
            margin-left: 0px;
            margin-top: 80px;
            left: 0;
            flex-direction: column;
            width: 100%;
            justify-content: center;
            align-items: center;
            z-index: 1;
          }
          #menu-toggle:checked ~ .menu a {
            width: 94.6%;
          }
          .ImagesH{
            grid-template-columns: repeat(2,150px);
            grid-template-rows: repeat(4, 100px);
            gap:4px;
          }
          #Text2{
            font-size: 10px;
          }
          #Text3{
            font-size: 10px;
          }
          #Text4{
            font-size: 13px;
          }
            .ContentN{
                grid-template-columns: repeat(2,150px);
                grid-template-rows: repeat(3, 140px);
            }
            #Title{
                font-size: 17px;
            }
            .ContentS{
                grid-template-columns: repeat(2,150px);
            }
            #Box1{
                background-position: -12px;
            }
            #Box3{
                background-position: -40px;
            }
            #News1 , #News2 , #News3{
                background-position: -50px;
            }
            #Sports1 , #Sports2 , #Sports3{
                background-position: -50px;
            }
            
    }
    @media screen and (max-width: 300px){
        .MainC{
            overflow-x: hidden;
            max-width: 100%;
        }
        #menu-toggle:checked ~ .menu a {
            width: 94%;
          }
        #Message{
            line-height: 1;
            font-size: 14px;
        }
        .ImagesH{
            grid-template-columns: repeat(2,140px);
            grid-template-rows: repeat(4, 100px);
            gap:4px;
          }
          #Box1{
            background-position: -20px;
          }
            .ContentN{
                grid-template-columns: repeat(2,140px);
                grid-template-rows: repeat(3, 100px);
            }
            .ContentS{
                grid-template-columns: repeat(2,140px);
            }
    }