:root {
    /* --light: #f2d5ac; */
    --light: #f4e1bc;
    --dark: #f1cb7f;
}
body { background-color: var(--light); }
#wrapper {
    font-family: sans-serif;

    /* center on screen */
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);

    width: 80vw;
    /* margin: auto; */
    margin: 2vh 0;
    
}

/* mobile layout (default) */
#content {
    display: flex;
    flex-direction: column;
    gap: 2vh;
    
}
#photo img {
    width: 100%;
    display: block;

}
.button {
    padding: 0.5em;
    text-align: center;
    
    font-size: 150%;
    background-color: var(--dark);
    color: black;
    text-decoration: none;
    font-weight: bold;
}
.button:hover {
    cursor: pointer;
    color: var(--dark);
    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;
}

/* windowed desktop */
@media screen and (min-width:500px) {
    #wrapper { 
        width: 40vw; 
    }
}

/* maximized desktop */
@media screen and (min-width:800px) {
    #wrapper { 
        margin: auto;
        width: 20vw; 
    }
}