@media screen and (min-width: 2000px) {
    .display_website {
        width: calc(100% / 3 - 3.8rem);
    }
}

@media screen and (max-width: 1500px) {
    
    .explain {
        margin: 0 12rem;
    }

}

@media screen and (max-width: 1250px) {
    
    .explain {
        margin: 0 9rem;
    }

}


@media screen and (max-width: 1100px) {
    
    .explain {
        margin: 0 5rem;
    }

}


@media screen and (max-width: 1000px) {
/* 
    :root {
        --border:  3px solid var(--black);

       } */

    .hero_heading {
        font-size: 4rem;
        color: var(--red);
        margin: 5rem 0 4rem 0;
    }

    .hero {
        border-bottom: 1.5px solid var(--black);
        height: 100vh;
    }

    .hero img {
        height: 34%;
    }

    .row1, .row3 {
  height: 25%;
    }

    .row2 {
        height: 50%;
    }


    .b2 { width: 50%; }
    .b3 { 
        width: 0%;

    }

    .b4 { width: 50%;}
    .b5 { width: 100%;
        border-radius: 0;}
.b5:hover { width: 100%;}
.b6 { width: 0;}
.b7 { width: 0%; }
.b8 { width: 50%; }
.b9 { width: 0%;}
.b11 { width: 50%;}
.b12 {width: 50%;}
.b13 {width: 50%;}

.b5:hover .hero_heading {
    filter: drop-shadow(6px 6px 0px var(--black));
    font-size: 4rem;
    color: white;
}

.row1 .b3, .row2 .b6 , .row3 .b9{ 
    border: none;  
}

.b9 .arrow {
    display: none;
}

.b5 .arrow {
    display: block;
}

.b5 {
    display: flex;
    flex-direction: column;
    /* align-items: center; */
}

.arrow img{
    height: 4rem;
}
.arrow img:hover {
    height: 4rem;
}




    .main {
        padding: 3rem 1.5rem;
    }


    .explain-container {
        padding: 3rem 0;
    }

    .explain {
        margin: 0 1.5rem;
    }

    .explain-info {
        padding: 2rem;
    }

    .explain-top {
        height: 3rem;
        padding: 0 1.5rem;
    }

    .explain-top span {
        height: 1rem;
        margin-right: .8rem;
    }

    .website-nav {
        width: 100%;
        margin: 0;
        padding-bottom: 2.8rem;
        align-items: normal;
    }
    .year_navigation {
        display: flex; 
    }

    .nav-total {
        justify-content: start;
        margin-top: 1rem;
    }

    button {
        font-size: .9rem;
   margin-right: .6rem;
   margin-left: 0;
    padding: .6rem .9rem ;
    color: var(--black);

    }


    .all_2023, .all_2022 {
        margin-top: 1rem;
    }
    

    .display_website {
        width: 100%;
        padding: .6rem;
        margin-bottom: 1rem;
    }

    .card-info {
        padding: 0.5rem ;
    }

    .heading_year {
        font-size: 1.5rem;
    }

    .team_names {
        font-size: .9rem;
    }

    .heading_intro , .explain_heading {
        font-size: 2.7rem;
        -webkit-text-stroke-width: 2.5px;
    }

    .container_imp_dat h1 {
        font-size: 2rem;
        -webkit-text-stroke-width: 2px;
    }

    .nav-container span {
        display: none;
    }

    .container_imp_dat {
        margin: 2rem 2rem;
        padding: 2rem 2rem;
        margin-top: 0;
    }

    .back {
        margin: 2rem 2rem 1rem 2rem;
    }

    
}