@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap');

html {
    font-family: 'Poppins', sans-serif;
    --grid-columns: 3;
}

h1 {
    color: white;
    text-align: center;
}

body {
    --primary-color: #643102c2;
    background-color: var(--primary-color);
}

*,*::before,*::after {
    box-sizing: border-box;
}

a {
    text-decoration: none;
}

a:visited {
    color: rgb(80, 80, 80);
}
a:hover {
    color: black;
}

h3,p {
    margin: 0;
}

p {
    line-height:1.5rem;
}

h3 {
    font-size: 1.2em;
    line-height: 1.2em;
}

.tag-container {
    margin: 0.5em 0;
    display: inline;
}

.tag {
    background-color: rgba(0, 0, 0, 0.514);
    color: white;
    padding: 0.25em 0.5em;
    border-radius: 1em;
    font-size: 0.75em;
}

.tag:hover {
    cursor: help;
}

.card-container {
    display: grid;
    grid-template-columns: repeat(var(--grid-columns),1fr);
    row-gap: 1em;
    column-gap: 1em;
    margin: auto;
    max-width: min(95vw, 1366px);
}

.description {
    line-height: 1.5em;
    min-height: 4.5em;
    margin: 1.5em 0;

}

.card {
    border: 2px solid black;
    padding: 1em;
    border-radius: 1em;
    background-color: white;
}
.card-header {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: space-between;
    row-gap: 1em;
    padding-bottom: 1em;
}




.card-header .heading {
    flex: 1 0 100%;
    text-align: center;
    min-height: 2.4em;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 0.2em;
}

.card-header .year {
    font-weight: bold;
}

.card-header .publisher {
    flex-shrink: 1;
}
.card-header .players {
    flex-shrink: 1;
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
}

.players .icon {
    font-size: 1.5em;
    font-weight: bold;
}
.reduced {
    font-size: 0.75em;
}

.card .thumbnail {
    width: 100%;
    height: 200px;
    display: flex;
    justify-content: center;
}

.rating-container {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 0.5em;
    margin: 1em 0;
    grid-template-rows: min-content;
    text-align: center;
}

.rating {
    padding: 1em;
    display: flex;
    justify-content: center;
    color: white;
    border-radius: 0.7em;
    flex-direction: column;
    align-items: center;
    gap: 0.5em;
    border: 2px solid black;
    box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.459);
}

.dif{
    background: var(--primary-color);
}



.dif.d1{
    background: linear-gradient(hsl(207, 93%, 46%),hsl(207, 93%, 30%));
    
}

.dif.d2{
    background: linear-gradient(hsl(125, 93%, 46%),hsl(130, 93%, 30%));

}

.dif.d3{
    background: linear-gradient(hsl(51, 96%, 49%),hsl(51, 100%, 35%));
    
}

.dif.d4{
    background: linear-gradient(hsl(29, 93%, 55%),hsl(20, 93%, 40%));
    
}

.dif.d5{
    background: linear-gradient(hsl(2, 93%, 56%),hsl(2, 93%, 40%));
    
}

.bgg {
    background: linear-gradient(#FF5100,hsl(19, 100%, 35%));
}

.mrt {
    background: linear-gradient(#3B3561,hsl(248, 29%, 19%));

}
.rating .score {
    background-color: rgba(255, 255, 255, 0.192);
    width: 55px;
    max-width: 100%;
    height: 55px;
    display: grid;
    place-items: center;
    border-radius: 100%;

}

img {
    height: 100%;
    object-fit: contain;
}