@font-face {
    font-family: 'Bromello';
    src: url(/img/bromello.ttf) format('truetype');
}

* {
	margin: 0;
	padding: 0;
}

body {
	overflow-x: hidden;
    font-size: 16px;
}

.thankyou {
	position: absolute;
	width: 100%;
	height: 100%;
    padding-top: 100px;
	background: #000 url(/image.php?id=49) center center no-repeat;
	background-size: cover;
	color: #FFF;
	font-size: 4rem;
	text-align: center;
	vertical-align: center;
}

.thankyou.hidden {
	display: none;
}

.thankyou .button {
	display: inline-block;
	text-decoration: none;
	line-height: 50px;
}

.thankyou input,
.thankyou .button {
	width: 200px;
	height: 50px;
	border: none;
	border-radius: 5px;
    font-family: sans-serif;
	font-size: 1.25rem;
	text-align: center;
}

.thankyou input[type="submit"] {
	background: #FFDAB9;
	color: #CD5C5C;
	cursor: pointer;
}

.thankyou .button {
	background: #CD5C5C;
	color: #FFF;
	cursor: pointer;
    margin-bottom: 20px;
}

.thankyou h1 {
    font-family: 'Bromello', serif;
    font-weight: normal;
}

.thankyou .text p {
    font-family: monospace;
    font-weight: normal;
    font-size: 1rem;
}

.container {
	display: grid;
}

.box img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Tablet and desktop breakpoint */
@media (min-width: 600px) {

}

/* Tablet breakpoint */
@media (min-width: 600px) and (max-width: 899px) {
	.thankyou {
		font-size: 5rem;
	}

	.container {
		grid-template-columns: 50% 50%;
		grid-gap: 10px;
		margin-bottom: 10px;
	}

	/* Default, no vertical images in set */
	.a {
		grid-column: 1;
		grid-row: 1;
	}

	.b {
		grid-column: 2;
		grid-row: 1;
	}

	.c {
		grid-column: 1;
		grid-row: 2;
	}

	.d {
		grid-column: 2;
		grid-row: 2;
	}

	.e {
		grid-column: 1;
		grid-row: 3;
	}

	.f {
		grid-column: 2;
		grid-row: 3;
	}

	/* One vertical image in set, left aligned */
	.v1l.a {
		grid-column: 1;
		grid-row: 1 / 3;
	}

	.v1l.b {
		grid-column: 2;
		grid-row: 1;
	}

	.v1l.c {
		grid-column: 2;
		grid-row: 2;
	}

	.v1l.d {
		grid-column: 1;
		grid-row: 3;
	}

	.v1l.e {
		grid-column: 2;
		grid-row: 3;
	}

	/* One vertical image in set, centered */
	.v1m.a {
		grid-column: 1;
		grid-row: 1;
	}

	.v1m.b {
		grid-column: 1;
		grid-row: 3;
	}

	.v1m.c {
		grid-column: 2;
		grid-row: 1 / 3;
	}

	.v1m.d {
		grid-column: 1;
		grid-row: 2;
	}

	.v1m.e {
		grid-column: 2;
		grid-row: 3;
	}

	/* One vertical image in set, right aligned */
	.v1r.a {
		grid-column: 1;
		grid-row: 1;
	}

	.v1r.b {
		grid-column: 1;
		grid-row: 2;
	}

	.v1r.c {
		grid-column: 1;
		grid-row: 3;
	}

	.v1r.d {
		grid-column: 2;
		grid-row: 3;
	}

	.v1r.e {
		grid-column: 2;
		grid-row: 1 / 3;
	}

	/* Two vertical images in set, left aligned and centered and left and right aligned */
	.v2lr.a, .v2lm.a {
		grid-column: 1;
		grid-row: 1 / 3;
	}

	.v2lr.b, .v2lm.b {
		grid-column: 2;
		grid-row: 1;
	}

	.v2lr.c, .v2lm.c {
		grid-column: 1;
		grid-row: 3;
	}

	.v2lr.d, .v2lm.d {
		grid-column: 2;
		grid-row: 2 / 4;
	}

	/* Two vertical images in set, centered and right aligned */
	.v2mr.a {
		grid-column: 1;
		grid-row: 1;
	}

	.v2mr.b {
		grid-column: 2;
		grid-row: 3;
	}

	.v2mr.c {
		grid-column: 2;
		grid-row: 1 / 3;
	}

	.v2mr.d {
		grid-column: 1;
		grid-row: 2 / 4;
	}

	/* Three vertical images in set */
	.v3.a {
		grid-column: 1 / 3;
		grid-row: 1 / 3;
	}

	.v3.b {
		grid-column: 1;
		grid-row: 3 / 6;
	}

	.v3.c {
		grid-column: 2;
		grid-row: 3 / 6;
	}
}

/* Desktop breakpoint */
@media (min-width: 900px) {
	.thankyou {
		font-size: 5rem;
	}

	.container {
		grid-template-columns: 33% 33% 33%;
		grid-gap: 10px;
		margin-bottom: 10px;
	}

	/* Default, no vertical images in set */
	.a {
		grid-column: 1;
		grid-row: 1;
	}

	.b {
		grid-column: 2;
		grid-row: 1;
	}

	.c {
		grid-column: 3;
		grid-row: 1;
	}

	.d {
		grid-column: 1;
		grid-row: 2;
	}

	.e {
		grid-column: 2;
		grid-row: 2;
	}

	.f {
		grid-column: 3;
		grid-row: 2;
	}

	/* One vertical image in set, left aligned */
	.v1l.a {
		grid-column: 1;
		grid-row: 1 / 3;
	}

	.v1l.b {
		grid-column: 2;
		grid-row: 1;
	}

	.v1l.c {
		grid-column: 3;
		grid-row: 1;
	}

	.v1l.d {
		grid-column: 2;
		grid-row: 2;
	}

	.v1l.e {
		grid-column: 3;
		grid-row: 2;
	}

	/* One vertical image in set, centered */
	.v1m.a {
		grid-column: 1;
		grid-row: 1;
	}

	.v1m.b {
		grid-column: 3;
		grid-row: 1;
	}

	.v1m.c {
		grid-column: 2;
		grid-row: 1 / 3;
	}

	.v1m.d {
		grid-column: 1;
		grid-row: 2;
	}

	.v1m.e {
		grid-column: 3;
		grid-row: 2;
	}

	/* One vertical image in set, right aligned */
	.v1r.a {
		grid-column: 1;
		grid-row: 1;
	}

	.v1r.b {
		grid-column: 2;
		grid-row: 1;
	}

	.v1r.c {
		grid-column: 1;
		grid-row: 2;
	}

	.v1r.d {
		grid-column: 2;
		grid-row: 2;
	}

	.v1r.e {
		grid-column: 3;
		grid-row: 1 / 3;
	}

	/* Two vertical images in set, left and right aligned */
	.v2lr.a {
		grid-column: 1;
		grid-row: 1 / 3;
	}

	.v2lr.b {
		grid-column: 2;
		grid-row: 1;
	}

	.v2lr.c {
		grid-column: 2;
		grid-row: 2;
	}

	.v2lr.d {
		grid-column: 3;
		grid-row: 1 / 3;
	}

	/* Two vertical images in set, left aligned and centered */
	.v2lm.a {
		grid-column: 1;
		grid-row: 1 / 3;
	}

	.v2lm.b {
		grid-column: 2;
		grid-row: 1 / 3;
	}

	.v2lm.c {
		grid-column: 3;
		grid-row: 1;
	}

	.v2lm.d {
		grid-column: 3;
		grid-row: 2;
	}

	/* Two vertical images in set, centered and right aligned */
	.v2mr.a {
		grid-column: 1;
		grid-row: 1;
	}

	.v2mr.b {
		grid-column: 1;
		grid-row: 2;
	}

	.v2mr.c {
		grid-column: 2;
		grid-row: 1 / 3;
	}

	.v2mr.d {
		grid-column: 3;
		grid-row: 1 / 3;
	}

	/* Three vertical images in set */
	.v3.a {
		grid-column: 1;
		grid-row: 1 / 3;
	}

	.v3.b {
		grid-column: 2;
		grid-row: 1 / 3;
	}

	.v3.c {
		grid-column: 3;
		grid-row: 1 / 3;
	}
}