/* Index and archive styles */

section[name="index"], section[name="archive"] {
    text-align: center;
}

#index, #archive {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr;

    margin-top: 5px;
    margin-bottom: 5px;

}
@media only screen and (max-width: 800px) {
    #archive {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
    }
}

@media only screen and (max-width: 600px) {
    #index {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }
}

@media only screen and (max-width: 500px) {
    #archive {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }
}

/* Cards */
.card {
    width: 95%;
    float: center;
    justify-self: center;

    border-style: solid;
    border-color: #00000000;

    padding: 7px;
}
.card:hover {
    border-color: var(--accent-clr);
}

.card .pic {
    display: block;
    margin: 5px auto;

    width: calc(100% - 15px);
    aspect-ratio: 1 / 1;
    background-size: cover;
}

.card .name {
    padding: 5px;
}

.card a {
    text-decoration: none;
}

.buttons {
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: auto auto auto auto auto auto;

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

    grid-gap: 5px;
}
.button {
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: auto;

    align-items: center;
    justify-content: center;
    grid-gap: 5px;
}
.button img, .buttons img {
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}
.buttonBig img {
    width: calc(81px * 1.5);
}
@media only screen and (max-width: 800px) {
  .buttons { grid-template-columns: auto auto auto; }
}