* { padding: 0; margin: 0; transition: all 0.3s; user-select: none;}

html, body {
    width: 100%;
    height: 100%;
}

body {
    /* texture taken from https://polyhaven.com/a/wood_table_large */
    background-image: url("./wood_table_large_diff_1k.jpg");
    background-position: 25% 25%;
    background-color: #362614;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: wheat;
    font-family: "Dela Gothic One", sans-serif;
}

main {
    width: 75%;
    min-height: max-content;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    padding-bottom: 2em;
}

img {
    width: 65%;
    margin: 1.5em;
    transform: rotateZ(-2deg);
    filter: drop-shadow(0.5em 0.5em 0px rgba(0, 0, 0, 0.25));
}

img:hover {
    transform: rotateZ(-2deg) scale(1.01);
    filter: drop-shadow(1em 1em 0px rgba(0, 0, 0, 0.25));
}

h2 {
    place-self: start;
    margin: 1em 0em 0.25em 1.5em;
    font-size: xx-large;
    filter: drop-shadow(0.2em 0.2em 0px rgba(0, 0, 0, 0.25));
}

footer {
    padding-bottom: 1em;
    background: linear-gradient(180deg,rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 50%);
    width: 90%;
    justify-items: center;
}