* {box-sizing:border-box; font-family:Montserrat, sans-serif;}
body {background:#000; text-align:center; color:#fff; padding:0; font-size:24px; text-shadow:0 0 10px rgba(0,0,0,.5)}

html:before {
  content: ' ';
  display: block;
  background-image: url('/images/lights.jpg');
  background-position: center;
  background-size: cover;
  height: 100vh;
  width: 100vw;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  position: fixed;
  z-index: -10;
  background-size:cover;
}

.page {z-index:2; padding:75px 20px;}
a {text-decoration:none;}

.text-kindly {letter-spacing:8px; font-weight:bold;}
.text-wedding {margin-bottom:40px;}
.text-wedding span {font-size:72px; font-family:'Alex Brush'; margin:0 10px; text-align:center; display:inline-block;}

.text-main-name {font-size:62px; font-family:'Old Standard TT'; text-transform:uppercase;}
.text-other-name {text-transform:uppercase; letter-spacing:5px; font-size:16px; margin-bottom:30px;}
.text-and {font-size:72px; font-family:'Alex Brush'; margin-bottom:10px;}

.text-date {font-size:18px; margin-bottom:40px; letter-spacing:2px; text-transform:uppercase;}

.rsvp-button {
	font-weight:bold;
	padding:20px 40px; 
	border:10px solid #fff; 
	display:inline-block; 
	font-size:36px; 
	background:transparent;
	color:#fff;
	display:block;
	width:100%;
	margin-bottom:75px;
}

@media (min-width: 900px) {
	.rsvp-button {position:fixed; top:20px; left:20px; width:auto;}
}


@keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}

.stars, .twinkling, .page {position:absolute; top:0; left:0; right:0; bottom:0; display:block;}
.stars {background:#000 url(/images/stars.png) repeat top center;}
.twinkling {background:transparent url(/images/twinkling.png) repeat top center; animation:move-twink-back 200s linear infinite;}



#explode {position:fixed; top:0; right:0; bottom:0; left:0; background:url(/images/explode-med.gif) center; background-size:cover; z-index:4; display:flex; align-items:center; justify-content:center;}
.modal {width:440px; background:#000; animation:zoom .5s; padding:20px;}
@keyframes zoom {
	0% {transform:scale(0); opacity:0;}
	70% {transform:scale(1.5)}
	100% {transform:scale(1); opacity:1;}
}

.modal input {background:#000; color:#fff; border:5px solid #fff; display:block; width:100%; font-size:24px; margin-bottom:20px; padding:8px 10px;}
.modal button {display:block; width:100%; font-weight:bold; padding:20px 40px; border:5px solid #fff; display:inline-block; font-size:24px; color:#fff; background:transparent;}

.text-form-header {margin-bottom:10px; letter-spacing:4px;}
.text-form-header span {font-size:48px; font-family:'Alex Brush'; letter-spacing:0;}

table {border:2px solid #fff; text-align:left; width:100%;}
table th, table td {padding:5px 10px;}
table th {border-bottom:2px solid #fff;}
table td {font-size:14px; border-bottom:2px solid rgba(255,255,255,.2);}
table tr:last-child td {border-bottom:none;}