*{
    margin:0;
    padding:0;
}

body{
    width:100vw;
    background-color:rgb(248, 246, 218);
}



header{
    font-size: 1.2em;
    padding: 8px 0 2px 0px;
    height:19vh;
    max-width: 100vw;
    display: flex;
    align-items: center;
    justify-content:space-between;

    z-index: 3;
    
    font-weight: 500;
    box-shadow: 0px 3px 5px 2px rgb(175, 175, 175);
    background-color: rgba(241, 54, 54, 0.856);
    font-family: monospace;
    text-align: center;


}
header a{
    height: 100%;
    border:0px black dotted;
    font-size: 0.9em;
    color:rgb(0, 0, 0);
    text-align: none;
    text-decoration: none;
}

header a:hover{
    color:rgb(255, 255, 255);
}

#badge{
    max-height: 100%;
    height: 100%;

}

#badge a{
    background-color: rgb(88, 29, 29);
    margin:0;
    padding:0;
    width: 100%;
    outline: solid 0px rgb(60, 218, 94);
    max-height:100%;
}

#badge a img{
    margin: 0;
    padding: 0;
    height: 95%;
    max-width: 100%;
    display: block;

    outline:0px solid red;


    filter: drop-shadow(0 0 8px rgb(0, 0, 0));
}
#navigation{
    /*justify-self: right;*/
    height:fit-content;
    width: 100%;
    outline:purple 0px solid;
    display:grid;
    grid-template-columns: repeat(6,1fr);
}

#navigation a{
    margin:1.8em 0px;
    outline: 0px grey dotted;
    height:fit-content;

}

#title.hover{
    cursor:crosshair;
}


.navbar{
    display:flex;
    flex-direction: column;
}



#recent-games-header{
    padding:  0;
    margin-bottom: 1em;
    width: 100%;
    text-align: center;
    border-top: black 3px solid;
    border-bottom: black 3px solid;
    font-family:monospace ;
}

#team-pan{
    width: 100%;
    margin: 0;
    padding: 0;
}

#recent-games{

    margin: auto;
    width: 88%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    margin-bottom: 100px;
}
.match-card{
    width: 90%;
    margin: auto;
}
.match-card:hover{
    animation-name: grow;
animation-duration: 0.3s;
animation-direction:normal;
animation-fill-mode: forwards;
z-index: 1;
}


.match-card img{
    filter: drop-shadow(0 0 2px rgb(187, 132, 132));
    width:100%;
}

@keyframes grow {

    from{
        filter: drop-shadow(0 0 0px rgba(237, 250, 121, 0.705));

    }
    to{transform: scale(1.35);
        filter: drop-shadow(0 0 6px rgba(237, 250, 121, 0.705));

    }
}


@media screen and (max-width:500px){
    #recent-games{
        grid-template-columns: repeat(2,1fr);
    }

    #navigation{

        grid-template-columns: repeat(3, 1fr);
    }


    @keyframes grow {

        from{
            filter: drop-shadow(0 0 0px rgba(237, 250, 121, 0.705));
    
        }
        to{transform: scale(1.45);
            filter: drop-shadow(0 0 6px rgba(237, 250, 121, 0.705));
    
        }
    }
}

/*---------------------MATCH



#recent-games{
    width: 100%;
    display: flex;
    flex-direction: column-reverse;
    flex-flow: reverse;
    background-color: rgb(240, 238, 238);
    outline: 0px cyan solid;
}

.match-card{
    --scale-factor: 1;
    font-family: 'Courier New', Courier, monospace;
    width:300px;
    height: 300px;
    display:grid;
    grid-template-rows: 1fr 5fr 1fr;


    border-radius: 5%;
    background-color:white;
    filter: drop-shadow(0 0 8px rgb(104, 99, 99));

    text-align: center;
    color:black;
    transform: scale(0.8);
}
.match-card:hover{
    animation-name: grow;
    animation-duration: 0.3s;
    animation-direction:normal;
    animation-fill-mode: forwards;
    z-index: 1;
}
.date{
    width:100%;
    display:flex;
    justify-content: center;
    align-items: center;
    text-align: left;

    background-color: rgb(241, 102, 102);
    border-radius: 15px 15px 0 0;

    box-shadow: 0px 0px 0px 0px rgba(151, 11, 11, 0.13);

    font-weight: 550;
    
}
.date .big-number{
    
    font-size:1.5em;
    padding:3%;
}
.competition-label{
    margin:12px 0 2px 0;
    display: flex;
    justify-content: center;
    align-items: center;
}


.inner{
    width:100%;
    display: flex;
    flex-direction: column;
}
.clubs-container{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;


}
.clubs-container p{
    font-weight: 600;
    font-size: large;
    border-top: 3px black solid;
    border-bottom:3px black solid;
}
.clubs-container img{
    height:110px;
    width: 110px;
    display: block;

    padding: 2%;
}
#home-logo{
    display: block;
}
#away-logo{
    border-radius: 18%;
}
.clubs-container p{
    margin:3px;
}
.description p{
    padding:6px;
}

.description #description-location{
    color:rgb(114, 114, 114);
}
.match-report-button{
    width:100%;

    display: flex;
    justify-content: center;
    align-items: center;

    border-top: 0px grey dotted;
}
.match-report-link{
    text-decoration: none;
    color: inherit;

}

#date-2-games-ago, #date-1-games-ago{
    background-color: rgb(155, 221, 155);
}

#date-next-game{
    background-color: rgb(185, 185, 185);
}