@import url(https://fonts.bunny.net/css?family=delius:400|delius-swash-caps:400);

:root {
    --font-size	    : calc(1rem + (5vw / 12));
    --font-main     : 'Delius', sans-serif;
    --font-heading  : 'Delius Swash Caps', handwriting;

    --border-1      : url("img/border.png");
    --border-2      : url("img/border2.png");
    --bg-1          : url("img/gray-floral.png");
    --bg-2          : url("img/mocha-grunge.png");
}

html, body {
    background-color: black;
    background-image: var(--bg-1), var(--bg-2);
    background-attachment: fixed;
    font-size: var(--font-size);
    font-family: var(--font-main);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
}

h1, h2 { margin: 0; }

hgroup p { margin: 0 0 .5em 0; }

.center { text-align: center; }

.top-padding { margin-top: .5em; }

.bordered-1 {
    border-image: var(--border-1)  28 fill /  28px / 0 round;
    border-width:  28px;
    border-style:  solid;
    margin: 5px 0;
}

.bordered-2 {
    border-image: var(--border-2)  28 fill /  28px / 0 round;
    border-width:  28px;
    border-style:  solid;
}

header {
    text-align: center;
}

.twogrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    grid-gap: 5px;
}

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

summary { cursor: pointer; }


/* Postcards */
.examples {
    display: grid;
    grid-template-rows: auto auto 1fr;
    grid-gap: 1em;
}

.stamps {
    display: flex;
    margin: .5em;
}
.stamps img {
    image-rendering: pixelated;
    display: block;
    margin: auto;
    min-width: 25%;
    max-width: 250px;
}


article.val-postcard {
    display: block;
    margin: auto;
    aspect-ratio: 6 / 4 !important;
    width: 400px;
    box-sizing: border-box;
    transform: rotateY(0deg);
    font-size: 20px;
}

article.val-postcard:hover > .back,
article.val-postcard:focus > .back {
    transform: rotateY(0deg);
}
article.val-postcard:hover > .front,
article.val-postcard:focus > .front {
    transform: rotateY(180deg);
}

article.val-postcard > * {
    z-index: 1;
	margin: 0;
    perspective: 600px;
    transition: transform 0.5s;
    transform-style: preserve-3d;
    backface-visibility: hidden;
}

article.duplex::before,
article.duplex::after {
	display: block;
	z-index: -1;
}

article.val-postcard .front {
    position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	box-sizing: border-box;

    background: pink;
}

article.val-postcard .back {
    position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
    transform: rotateY(180deg);

    display: grid;
    grid-template-columns: 55% 20% 25%;
    grid-template-rows: 25% 1fr;
    grid-template-areas: "msg x stamp"
                         "msg adr adr";

    background: ivory;
}

article.val-postcard .message,
article.val-postcard .address,
article.val-postcard .stamp {
    width: 100%;
    height: 100%;
}

article.val-postcard .message {
    grid-area: msg;
    border-right: solid #00000044 2px;
}

article.val-postcard .stamp {
    grid-area: stamp;
    display: flex;
    justify-content: end;
}

article.val-postcard .stamp img {
    display: block;
    image-rendering: pixelated;
    height: 100%;
    margin: 5px 5px;
}

article.val-postcard .address {
    grid-area: adr;
    padding-left: 5px;
}