@import url('https://fonts.googleapis.com/css?family=Roboto:400,400i,500,500i,600,600i,700,700i');
@import url('https://fonts.googleapis.com/css?family=Sacramento&display=swap');
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap");

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
	background: #333;
    color: #fff;
	font-family: 'Roboto', sans-serif;
}
* {
    box-sizing: border-box;
}
article {
	opacity: 0;
	transition: opacity 2s;
	position: absolute;
}
article.active {
	opacity: 1;
	transition: opacity 2s;
}
main {
  height: 1920px;
  width: 1080px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
main.rotate {
  transform: rotate(90deg);
  transform-origin: bottom left;
  position: absolute;
  top: -100vw;
  left: 0;
  height: 100vw;
  width: 100vh;
}
.full-image {
	position: absolute;
	background-position: center center !important;
	background-size: cover !important; 
	height: 100vh;
	width: 100vw;
}
.center {
    text-align: center;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}

.overlay {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.3);
    height: inherit;
    position: absolute;
    top: 0;
    transition: all 0.5s ease 0s;
    z-index: 99;
    width: 100%;
}
.line-top {
	border-top: 15px solid #fff;
	width: 100%;
	padding-bottom: 40px;
}
.line-bottom {
	border-bottom: 15px solid #fff;
	width: 100%;
	padding-top: 40px;
}
h1 {
	font-size: 100px;
}
.birthday h1 {
	font-family: 'Sacramento', cursive;
	font-size: 200px;
	padding: 60px;
}
.birthday h2 {
	font-family: 'Sacramento', cursive;
	font-size: 100px;
}
.birthday-balloons {
	z-index: 999;
}
.text p {
	height: 80vh;
	width: 80vw;
	white-space: pre-line;
}
.random h2 {
	font-size: 100px;
}
.random h3 {
	font-size: 60px;
}
.random p {
	font-size: 40px;
}

.location {
	max-width: 400px;
	position: absolute;
    bottom: 3%;
    right: 3%;
	display: flex;
	
}
.location .column {
}

.location-icon {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 80px;
    width: 80px;
}
.location-icon img {
	height: 80px;
	width: 80px;
}
.location-text {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	word-break: break-word;
	padding-left: 15px;
}
.location-text p {
	font-size: 30px;
}