:root {
    --pagecolor: #f4e1bc;
}
body { 
    background-color: var(--pagecolor); 
    font-family: sans-serif;
}

/* center content on screen */
#wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

/* scaling content to screen size */
#wrapper { width: 80vw; margin: 2vh 0; } /* default (mobile optimized) */
@media screen and (min-width:500px)  { #wrapper { width: 40vw; } }
@media screen and (min-width:1000px) { #wrapper { width: 400px; } } /* stop scaling once window is wide enough */

#content {
    display: flex;
    flex-direction: column;
    gap: 2vh;
}
#photo img {
    width: 100%;
    display: block;
}
#buttons {
    display: flex; 
    flex-direction: row;
    gap: 1em;
}
.button {
    background-color: var(--pagecolor);
}
.button img {
    width: 100%;
    height: 100%;
}
.button:hover img {
    filter: brightness(0) saturate(100%) invert(85%) sepia(23%) saturate(395%) hue-rotate(345deg) brightness(106%) contrast(91%);
    /* create the above color filter: https://angel-rs.github.io/css-color-filter-generator/ */
    /* convert png pixel art to svg: https://www.scalablepixels.com/ */
    /* compress svg file size: https://vecta.io/nano */
}
.button:hover {
    background-color: black;
}
.button, #photo, #annoucement {
    border: 4px solid black;
    box-shadow: 6px 6px black;
}
#annoucement {
    margin: 2vh 0;
    padding: 0 0.5em;
    background: white;
    font-weight: bold;
    font-size: small;
}