/*----------------------------------------------------------------------------*/
/*----------------------------------ANIMATION---------------------------------*/
/*----------------------------------------------------------------------------*/

@keyframes horizontalFlip {
	0% {
		transform: scaleX(1);
	}
	50% {
		transform: scaleX(-1);
	}
	100% {
		transform: scaleX(1);
	}
}

@keyframes polaroidSlideRightToLeft1 {
	0% {
		transform: translateX(100vw) rotate(6deg);
		z-index: 100;
	}
	10% {
		transform: translateX(0vw) rotate(-6deg);
	}
	100% {
		transform: translateX(0vw) rotate(-6deg);
		z-index: 0;
	}
}

@keyframes polaroidSlideRightToLeft2 {
	0% {
		transform: translateX(100vw) rotate(-3deg);
		z-index: 100;
	}
	10% {
		transform: translateX(0vw) rotate(9deg);
	}
	100% {
		transform: translateX(0vw) rotate(9deg);
		z-index: 0;
	}
}

@keyframes polaroidSlideRightToLeft3 {
	0% {
		transform: translateX(100vw) rotate(-20deg);
		z-index: 100;
	}
	10% {
		transform: translateX(0vw) rotate(2deg);
	}
	100% {
		transform: translateX(0vw) rotate(2deg);
		z-index: 0;
	}
}

@keyframes polaroidSlideRightToLeft4 {
	0% {
		transform: translateX(100vw) rotate(5deg);
		z-index: 100;
	}
	10% {
		transform: translateX(0vw) rotate(-9deg);
	}
	100% {
		transform: translateX(0vw) rotate(-9deg);
		z-index: 0;
	}
}

/*----------------------------------------------------------------------------*/
/*----------------------------------ALL SIZES---------------------------------*/
/*----------------------------------------------------------------------------*/

@font-face {
	font-family: "HelveticaNow";
	src: url("../fonts/HelveticaNowDisplay-Bold.otf") format("opentype");
	font-weight: 700;
	font-style: normal;
}

@font-face {
	font-family: "HelveticaNow";
	src: url("../fonts/HelveticaNowDisplay-Regular.otf") format("opentype");
	font-weight: 300;
	font-style: normal;
}

*, *::before, *::after {
	box-sizing: border-box;
}

:root {
	--background-color: #EBF1F3;
	--text-color: #005AFF;
	--desk-font-XL: min(4.1vw, 88px);
	--desk-font-L: min(1.4vw, 28px);
	--desk-font-M: min(1.1vw, 22px);
	--tab-font-XL: 4.4vw;
	--tab-font-L: 1.9vw;
	--tab-font-M: 1.4vw;
	--mob-font-XL: 8vw;
	--mob-font-L: 4.5vw;
	--mob-font-M: 3vw;
}

html {
	scroll-behavior: smooth;
	font-family: "HelveticaNow", sans-serif;
	font-weight: 300;
	font-optical-sizing: auto;
}

body {
	background-color: var(--background-color);
	/*background-image: url('../images/bg-noise.jpg');
	background-repeat: repeat;*/
	color: var(--text-color);
	margin: 0;
	padding: 0;
	height: 100vh;
	height: 100dvh;
}

a {
	color: var(--text-color);
	font-weight: 700;
}

#content {
	display: none;
}

#login {
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0;
	padding: 0;
	width: 100vw;
	height: 100vh;
	height: 100dvh;
	background-color: var(--text-color);
	color: var(--background-color);
	transition: opacity 1s;
}

#login-content {
	display: grid;
	width: 90%;
	grid-template: repeat(4, 1fr) / 1fr;
	justify-items: center;
	align-items: center;
	margin-bottom: 5vw;
}

#password-form {
	grid-row: 3 / 4;
}

input {
	border: 2px solid var(--background-color);
	border-radius: 100px;
	background-color: transparent;
	color: var(--background-color);
	text-align: center;
}

button {
	border: 2px solid var(--background-color);
	border-radius: 100px;
	background-color: var(--background-color);
	color: var(--text-color);
	text-align: center;
	cursor: pointer;
}

#msg {
	color: var(--background-color);
}

#top-nav {
	position: fixed;
	z-index: 500;
	background-color: var(--text-color);
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: transform 500ms cubic-bezier(0.79,0.14,0.15,0.86), opacity 500ms;
	opacity: 0;
}

#top-nav:hover {
	transform: rotate(360deg);
}

#top-nav img {
	height: 50%;
}

.section {
	display: grid;
	justify-items: center;
	overflow: hidden;
	margin: 0;
}

#hero {
	/*justify-items: center;*/
	align-items: center;
}

#menu-title {
	display: grid;
	grid-template: 1fr / 1fr 5fr 1fr;
	justify-items: center;
	align-items: start;
	font-weight: 700;
	text-align: center;
	line-height: 0.5;
}

#menu-title span {
	font-weight: 300;
}

#menu-title img {
	animation: horizontalFlip 1s steps(1, end) infinite;
}

#menu-list a {
	text-decoration: none;
	font-weight: 300;
}

.menu-item {
	display: grid;
	grid-template: 1fr 1fr / 1fr;
	justify-self: center;
	justify-items: center;
	align-items: center;
	width: 100%;
	border-top: 2px solid transparent;
	border-bottom: 2px solid transparent;
	/*border-radius: 100px;*/
	/*transition: filter 0.2s;*/
}

.menu-item:hover {
	/*filter: invert(100%) brightness(120%) hue-rotate(5deg);
	background-color: var(--text-color);
	color: #ffffff;*/
	border-top: 2px solid var(--text-color);
	border-bottom: 2px solid var(--text-color);
}

#photo-hero1 {
	animation: polaroidSlideRightToLeft1 12s 0s cubic-bezier(0.08,0.82,0.17,1) forwards;
}

#photo-hero2 {
	animation: polaroidSlideRightToLeft2 12s 3s cubic-bezier(0.08,0.82,0.17,1) forwards;
}

#photo-hero3 {
	animation: polaroidSlideRightToLeft3 12s 6s cubic-bezier(0.08,0.82,0.17,1) forwards;
}

#photo-hero4 {
	animation: polaroidSlideRightToLeft4 12s 9s cubic-bezier(0.08,0.82,0.17,1) forwards;
}

#photo-hero5 {
	animation: polaroidSlideRightToLeft1 12s 12s cubic-bezier(0.08,0.82,0.17,1) forwards infinite;
}

#photo-hero6 {
	animation: polaroidSlideRightToLeft2 12s 15s cubic-bezier(0.08,0.82,0.17,1) forwards infinite;
}

#photo-hero7 {
	animation: polaroidSlideRightToLeft3 12s 18s cubic-bezier(0.08,0.82,0.17,1) forwards infinite;
}

#photo-hero8 {
	animation: polaroidSlideRightToLeft4 12s 21s cubic-bezier(0.08,0.82,0.17,1) forwards infinite;
}

#photo-schedule1, #photo-travel1, #photo-todo1, #photo-faq2 {
	transform: translate(-100vw, 0vw) rotate(0deg);
}

#photo-travel2, #photo-hotel1, #photo-todo2, #photo-faq1, #photo-rsvp1 {
	transform: translate(100vw, 0vw) rotate(0deg);
}

#schedule-content, #rsvp-content {
	display: grid;
	justify-items: center;
	align-items: center;
	text-align: center;
}

#travel-content, #to-do-content, #faq-content {
	display: grid;
	justify-items: center;
}

#hotel-content {
	display: grid;
	justify-items: center;
	align-items: center;
}

#faq-copy span {
	font-weight: 700;
}

.pixel-icon {
	animation: horizontalFlip 1s steps(1, end) infinite;
}

.polaroid {
	transition: transform 1s cubic-bezier(0.08,0.82,0.17,1);
}

/*----------------------------------------------------------------------------*/
/*----------------------------------DESKTOP-----------------------------------*/
/*----------------------------------------------------------------------------*/

@media screen and (min-width: 901px) {
	body {
		font-size: var(--desk-font-M);
		line-height: normal;
	}

	#login {
		font-size: var(--desk-font-XL);
	}

	input, button, #msg {
		font-size: var(--desk-font-L);
	}

	input {
		padding: 1.5vw 4vw;
	}

	button {
		padding: 1.5vw 4vw;
	}

	#top-nav {
		width: 5vw;
		height: 5vw;
		top: 2vw;
		right: 2vw;
	}

	.section {
		padding-bottom: 9vw;
	}

	.label {
		width: min(26vw, 500px);
		padding-bottom: 5vw;
	}

	.polaroid {
		width: min(32vw, 800px);
	}

	#hero {
		padding-top: 5vw;
		grid-template: 1fr / 1.5fr 1fr;
	}

	.hero-polaroid {
		width: min(32vw, 800px);
		justify-self: start;
		grid-column: 2 / 3;
		grid-row: 1 / 2;
		transform: translateX(100vw);
	}

	#menu {
		width: 70%;
		justify-self: center;
	}

	#menu-title {
		font-size: var(--desk-font-XL);
		padding: 2.5vw 0;
	}

	#menu-title span {
		font-size: var(--desk-font-M);
	}

	#menu-title img {
		width: min(4vw, 70px);
	}

	#menu-list {
		font-size: var(--desk-font-L);
		display: grid;
		grid-template: repeat(2, 1fr) / repeat(3, 1fr);
	}

	#menu-list img {
		width: min(2.5vw, 44px);
		height: 100%;
	}

	.menu-item {
		width: 10vw;
		padding: 0.8vw;
		margin: 1vw;
	}

	#schedule-content, #rsvp-content {
		grid-template: 1fr / 1fr 1fr;
		width: 70%;
	}

	#schedule-copy, #rsvp-content {
		width: 60%;
	}

	#schedule-copy span {
		font-size: var(--desk-font-L);
		font-weight: 700;
	}

	.pixel-icon {
		display: block;
		margin: 2vw auto 0 auto;
		width: 5vw;
		height: 5vw;
	}

	#travel-content, #to-do-content {
		grid-template: 1fr / 38% 24% 38%;
		align-items: center;
	}

	#hotel-content {
		grid-template: 1fr / 1fr 1fr;
		width: 70%;
	}

	#hotel-copy {
		width: 80%;
	}

	#hotel-copy span {
		font-weight: 700;
	}

	#faq-content {
		grid-template: 0.7fr 1fr / 1fr;
		width: 100%;
	}

	#faq-content .polaroid {
		grid-row: 2 / 3;
		grid-column: 1 / 2;
	}

	#footer-sparkle {
		padding-bottom: 5vw;
	}
}

/*----------------------------------------------------------------------------*/
/*----------------------------------TABLET------------------------------------*/
/*----------------------------------------------------------------------------*/

@media screen and (max-width: 900px) {
	body {
		font-size: var(--tab-font-M);
		line-height: normal;
	}

	#login {
		font-size: var(--tab-font-XL);
	}

	input, button, #msg {
		margin-top: 4vw;
		font-size: var(--tab-font-L);
	}

	input {
		padding: 2vw;
	}

	button {
		padding: 2vw 4vw;
	}

	#top-nav {
		width: 7vw;
		height: 7vw;
		top: 3vw;
		right: 3vw;
	}

	.section {
		padding-bottom: 11vw;
	}

	.label {
		width: 30vw;
		padding-bottom: 5vw;
	}

	.polaroid {
		width: 35vw;
	}

	#hero {
		padding-top: 7vw;
		grid-template: 1fr / 1.3fr 1fr;
	}

	.hero-polaroid {
		width: 35vw;
		justify-self: start;
		grid-column: 2 / 3;
		grid-row: 1 / 2;
		transform: translateX(100vw);
	}

	#menu {
		width: 80%;
	}

	#menu-title {
		font-size: var(--tab-font-XL);
		padding: 5vw 0;
	}

	#menu-title span {
		font-size: var(--tab-font-M);
	}

	#menu-title img {
		width: 4vw;
	}

	#menu-list {
		font-size: var(--tab-font-L);
		display: grid;
		grid-template: repeat(3, 1fr) / repeat(2, 1fr);
	}

	#menu-list img {
		width: 2.5vw;
		height: 100%;
	}

	.menu-item {
		width: 14vw;
		padding: 0.8vw;
		margin: 1.3vw;
	}

	#schedule-content, #rsvp-content {
		grid-template: 1fr / 1fr 1fr;
		width: 80%;
	}

	#schedule-copy {
		width: 65%;
	}

	#rsvp-copy {
		width: 75%;
	}

	#schedule-copy span {
		font-size: var(--tab-font-L);
		font-weight: 700;
	}

	.pixel-icon {
		display: block;
		margin: 2vw auto 0 auto;
		width: 6vw;
		height: 6vw;
	}

	#travel-content, #to-do-content {
		grid-template: 1fr / 38% 24% 38%;
		align-items: center;
	}

	#hotel-content {
		grid-template: 1fr / 1fr 1fr;
		width: 80%;
	}

	#hotel-copy {
		width: 85%;
	}

	#hotel-copy span {
		font-weight: 700;
	}

	#faq-content {
		grid-template: 0.7fr 1fr / 1fr;
		width: 80%;
	}

	#faq-content .polaroid {
		grid-row: 2 / 3;
		grid-column: 1 / 2;
	}

	#footer-sparkle {
		padding-bottom: 5vw;
	}
}

/*----------------------------------------------------------------------------*/
/*----------------------------------MOBILE------------------------------------*/
/*----------------------------------------------------------------------------*/

@media screen and (max-width: 600px) {
	body {
		font-size: var(--mob-font-M);
		line-height: 1.3;
	}

	#login {
		font-size: var(--mob-font-XL);
	}

	input, button, #msg {
		margin-top: 6vw;
		font-size: var(--mob-font-L);
	}

	input {
		padding: 2vw 0vw;
	}

	button {
		padding: 2vw 3vw;
	}

	#top-nav {
		width: 17vw;
		height: 17vw;
		top: 6vw;
		right: 6vw;
	}

	.section {
		padding-bottom: 10vw;
	}

	.label {
		width: 60vw;
		padding-bottom: 7vw;
	}

	.polaroid {
		width: 54vw;
	}

	#hero {
		padding-top: 35vw;
		grid-template: 1fr 0.9fr / 1fr;
		padding-bottom: 0px;
	}

	.hero-polaroid {
		width: 80vw;
		grid-row: 1 / 2;
		grid-column: 1 / 2;
		justify-self: center;
		transform: translateX(100vw);
	}

	#menu {
		width: 100%;
		grid-row: 2 / 3;
	}

	#menu-title {
		font-size: var(--mob-font-XL);
		position: absolute;
		top: 40px;
		left: 50%;
		transform: translate(-50%);
		width: 85%;
	}

	#menu-title span {
		font-size: var(--mob-font-M);
	}

	#menu-title img {
		width: 8vw;
	}

	#menu-list {
		font-size: var(--mob-font-L);
		display: grid;
		grid-template: repeat(3, 1fr) / repeat(2, 1fr);
		margin-top: 20px;
	}

	#menu-list img {
		width: 5.5vw;
		height: 100%;
	}

	.menu-item {
		width: 30vw;
		padding: 1.7vw;
		margin: 4vw;
	}

	#schedule-content, #rsvp-content {
		grid-template: 1fr / 40% 60%;
		width: 94%;
	}

	#schedule-copy, #rsvp-copy {
		width: 95%;
	}

	#schedule-copy span {
		font-size: var(--mob-font-L);
		font-weight: 700;
	}

	.pixel-icon {
		display: block;
		margin: 5vw auto 0 auto;
		width: 9vw;
		height: 9vw;
	}

	#travel-content, #to-do-content {
		grid-template: 1fr 1.4fr / 1fr;
		align-items: start;
		width: 65%;
	}

	#travel-content .polaroid, #to-do-content .polaroid {
		grid-row: 2 / 3;
		grid-column: 1 / 2;
	}

	#travel-copy, #to-do-copy {
		grid-row: 1 / 2;
		grid-column: 1 / 2;
	}

	#hotel-content {
		grid-template: 1fr 1fr / 1fr;
		width: 100%;
	}

	#hotel-copy {
		width: 70%;
	}

	#hotel-copy span {
		font-weight: 700;
	}
	
	#faq-content {
		grid-template: 1fr 0.6fr / 1fr;
		width: 70%;
	}

	#faq-content .polaroid {
		grid-row: 2 / 3;
		grid-column: 1 / 2;
	}

	#footer-sparkle {
		padding-bottom: 15vw;
	}
}