html { /* Fuck */
    background-color: #161616;
    scroll-behavior: smooth;
}

.container {
    max-width: 100rem;
    margin-inline: auto;
    padding-inline:2rem;
}

body {
    padding: 2rem 0;
}

.items {
    display: grid;
    grid-template-columns:
        repeat(auto-fit,minmax(15rem,1fr));
    grid-row: auto / span 2;
    grid-auto-flow: row dense;
    gap: 1rem;
}

.card {
    transition: transform 0.3s ease, box-shadow 0.2s ease;
    box-shadow: rgba(73, 73, 77, 0.2) 0px 7px 29px 0px;
    border-radius: 1vh;
    padding-right: 15px;
    padding: 15px;

}


* {
    font-family: Arial, Helvetica, sans-serif;
}

.card_image {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 1vh;
    box-shadow: rgba(73, 73, 77, 0.2) 0px 7px 29px 0px;
    opacity: 1;
    transition: opacity 0.25s;
}
img,picture {
    max-width: 100%;
    display:block;
    object-fit: cover;
}

p,h1,h2,h3,h4,h5,h6 {
    color: white;
}

.gameplay {
    grid-column: auto / span 2;
    grid-row: auto / span 2;
}

.gameplay .card_image {
    aspect-ratio: 16/9;
}

.gif .card_image {
    aspect-ratio: 16/9;
}

.gif {
    grid-column: auto / span 2;
    grid-row: auto / span 2;
}

.card:hover{
    transform: translateY(-1vh);
    box-shadow: rgba(100, 100, 111, 0.8) 0px 7px 29px 0px;
}

.download {
    grid-row: auto / span 2;
}

.logo {
    grid-row: auto / span 2;
}

.themes .card_image {
    aspect-ratio: 16/9;
}

.themes {
    grid-column: auto / span 2;
    grid-row: auto / span 2;
}

.svg {
    filter: invert(100%) sepia(21%) saturate(74%) hue-rotate(72deg) brightness(107%) contrast(104%);
}

.card_content_download {
    height:90%;
    text-align: center;
    align-items: center;
}

.card_button{ /* source: https://getcssscan.com/css-buttons-examples (24)  */
    background-color:#272727;
    transition: box-shadow 0.2s ease;
    border-radius: 4%;
    width:90%;
    border-width: 0px;
    height:8vh;
    color:white;
    font-size: 1rem;
    display:block;
    margin-left: auto;
    margin-right: auto;
    box-shadow: rgba(73, 73, 77, 0.2) 0px 7px 29px 0px;
    border:solid #ffffff 0px;
    font-size:auto;
    text-align: center;
    align-items: center;
}

.download {
    grid-row: auto / span 2;
}



.card_button:hover {
    border-width: 1px;    
    box-shadow: rgba(100, 100, 111, 0.3) 0px 7px 29px 0px;
}