:root {
  --red: #d52b1e;
  --red-transparent: #d52a1e00;
  --yellow: #ffcc00;
}

* {
	box-sizing: border-box;
}

html,
body {
	font-family: 'Helvetica Neue', sans-serif;
	background-color: var(--red);
	color: var(--yellow);
	overflow-x: hidden;
}

section {
	display: flex;
	width: 100vw;
	justify-content: center;
	margin-bottom: 70px;
}

.section-container {
	display: flex;
	flex-flow: column;
	width: 100vw;
	padding:25px;
	max-width: 1200px;
	gap:40px;
}


h1.title,
h2.title,
h3.title,
h4.title,
h5.title,
h6.title {
	display: flex;
	font-weight: 500;
	width: 100%;
	justify-content: center;
	text-align: center;
}

h1.title { font-size: 6em; } 
h2.title { font-size: 4em; } 
h3.title { font-size: 4em; } 
h4.title { font-size: 2em; } 
h5.title { font-size: 1.5em; } 
h6.title { font-size: 1em; } 

.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 250,
  'GRAD' 0,
  'opsz' 24
}

.memes {
	display: flex;
	flex-wrap: wrap;
	gap:10px;
	align-items: center;
}

.meme {
	display: flex;
	justify-content: center;
	align-items: center;
	width: calc(25% - 8px);
	border: 3px solid var(--yellow);
	border-radius: 15px;
	overflow: hidden;
}

.meme img {
	width: 100%;
}

.menu {
	display: flex;
}

.menu-item {
	display: flex;
	flex-flow: column;
	justify-content: space-between;
	align-items: center;
	gap:30px;
}

.menu-item h1 {
	font-size: 4em;
	color: white;
	font-weight: 500;
	text-align: center;
}

.menu-item img {
	width: 80%;
}

.mascot {
	display: flex;
	gap:60px;
}

.mascot img {
	width: calc(20% - 50px);
	animation: joey 1s ease both infinite;
}

@keyframes joey {
	0% { transform: rotate(10deg);}
	50% { transform: rotate(-10deg);}
	100% { transform: rotate(10deg); }
}

#header {
	height: 100vh;
	align-items: end;
	display: flex;
	flex-flow: column;
	justify-content: end;
	margin-bottom: 0;
	position: relative;
	align-items: center;
}


#header .header-title {
	height: calc(25vh - 70px);
	width: 100vw;
	display: flex;
	flex-flow: column;
	align-items: center;
	font-size: 1.5em;
}

#header .header-donnie {
	height: calc(75vh - 70px);
	width: 100vw;
	display: flex;
	flex-flow: column;
	justify-content: end;
	align-items: center;
}

#header .header-donnie img {
  	height: 90%;
	  width: auto;
	aspect-ratio: 583 / 513 !important;
}



.ad {
	width: 260px;
	position: absolute;
	bottom:60px; right: 30px;
	border: 3px solid var(--yellow);
	display: flex;
	justify-content: center;
	align-items: center;
	aspect-ratio: 480 / 360;
	background: black;
	overflow: hidden;
	transition: all 0.3s ease;
}

.ad span {
	position: absolute;
	z-index: 40;
	font-size: 2em;
	font-weight: bold;
}

.ad video {
	width: 100%;
	position: absolute;
	opacity: 0.8;
	transition: all 0.3s ease;
}

.ad:hover {
	border-color: white;
}

.ad:hover span {
	color: white;
}

.ad:hover video {
	transform: scale(1.1);
	opacity: 1;
}

#points {
	background: var(--yellow);
	color: var(--red);
}

.points {
	display: flex;
	justify-content: center;
	align-items: start;
}

.point {
	display: flex;
	flex-flow: column;
	justify-content: center;
	align-items: center;
	width: 33.33%;
	text-align: center;
	padding:25px;
	gap:15px;
}

.points .title {
	font-weight: bold;
}

.point span {
	font-size: 5em;
}

.point p {
	font-size: 1.8em;
}


.fs-video {
	background: rgba(0, 0, 0, 0.854);
	position: fixed;
	width: 100vw;
	height: 100vh;
	z-index: 300;
	display: none;
	justify-content: center;
	align-items: center;
	animation: fadein 0.5s ease forwards;
}

@keyframes fadein {
	0% { opacity: 0; }
	100% { opacity: 1; }
}

.fs-video.show {
	display: flex;
}

.fs-video video {
	width: 900px;
	max-width: 90%;
	max-height: 90%;
}

.fs-video .close {
	position: absolute;
	top:40px;right:40px;
	font-size: 3em;
	font-weight: bold;
	transition: all 0.3s ease;
}

.fs-video .close:hover {
	color:white;
}


.caplife {
	display: flex;
	flex-flow: row;
	justify-content: center;
	align-items: center;
}

.caplife-form,
.caplife-img {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 50%;
}

form {
	display: flex;
	flex-flow: column;
	justify-content: center;
	align-items: center;
	padding:50px;
}

form p {
	font-size: 1.8em;
	line-height: 1.1em;
	margin-bottom: 20px;
}

form input {
	width: 100%;
}

.caplife-img img {
	width: 100%;
	border:4px solid var(--yellow);
	box-shadow: 8px 8px 0px #00000033;
	transform: rotate(-8deg);
	animation: caplife 0.5s ease alternate-reverse infinite;
}

#caplife-crop {
	width: 700px;
	max-width: 90%;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap:20px;
	display: none;
}

.cropper-container {
	/* border: 3px solid var(--yellow); */
}

#iframeContainer {
	display: flex;
	justify-content: center;	
}

iframe {
	width:800px;
	max-width: 100%;
	aspect-ratio: 800 / 520;
	overflow: hidden;
}

@keyframes caplife {
	0% { transform: scale(0.9) rotate(-1deg);  }
	100% { transform: scale(1) rotate(-7deg); }
}


.nav {
	position: fixed;
	top:0;
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20px;
	background: linear-gradient(180deg, #d52a1e 0%, #d52a1e00 100%);
	z-index: 100;
}

.nav div {
	display: flex;
	justify-content: end;
	align-items: center;
}

.nav .icon {
	width: 50px;
	fill: #ffcc00;
}

button,
.btn {
	font-size: 1.2em;
	font-weight: bold;
	border:3px solid var(--yellow);
	color: var(--yellow);
	border-radius: 10px;
	padding:10px;
	display: flex;
	width: auto !important;
	margin-right: 8px;
	background: var(--red);
	justify-content: center;
}

button:hover,
.btn:hover {
	background:var(--yellow);
	color:var(--red);
}

.btn.inverted {
	border-color: var(--red);
	color: var(--red);
	background: var(--yellow);
}

.btn:hover {
	background:var(--red);
	color:var(--yellow);
}

.footer {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	align-content: center;
	text-align: center;
	height: 30px;
	position: fixed;
	bottom:0;
	font-size: 0.7em;
	background:#ffcc00;
	color:#d52b1e;
}

.snaplens {
	display: flex;
	flex-flow: column;
	position: absolute;
	bottom:15px;left:15px;
	width: 150px;
	color:black;
	font-weight: bold;
	font-size: 1.3em;
	gap:7px;
}

.snaplens img {
	width: 100%;
}

a,
svg {
	color: #ffcc00;
	text-decoration: none;
}


.logo {
	width: 100px;
	height: 100px;
	aspect-ratio: 1;
}

input {
	-webkit-appearance: none;
	border:3px solid var(--yellow);
	color: white;
	background: var(--red);
	padding: 20px;
	font-size: 1.5em;
	outline: none;
	box-shadow: none;
	border-radius: 20px;
}

input::placeholder {
	color: var(--yellow);
}

#loader {
	width: 100px;
	margin:0 auto;
	display: none;
}

@media only screen and (max-width: 900px) {

	h1.title {
		font-size: 4em;
	}
	
	.ad {
		right: calc(50% - 130px);
		top:230px;
	}
	
	.logo {
		width: 70px;
		height: 70px;
	}
	
	.nav .icon {
		width: 35px;
	}
	
	.nav {
		padding: 10px;
	}
	
	#header {
		height: calc(100vh - 50px);
	}
	
	#header .header-title {
		height: calc(30vh - 70px);
	}
	
	#header .header-donnie {
		width: 70vw;
		height: calc(70vh - 70px);
	}
	
	section {
		margin-bottom: 30px;
	}
	
	#header .header-title h1 {
		font-size: 3em;
	}
	
	#header .header-title h4 {
		font-size: 1em;
	}
	
	#header .header-donnie img {
		height: auto;
		width: 100%;
	}
	
	.points {
		flex-flow: column;
	}
	
	.point {
		width: 100%;
	}
	
	.meme {
		width: calc(50% - 8px);
	}
	
	.menu {
		flex-flow: column;
		gap:50px;
	}
	
	.menu-item h1 {
		font-size: 2em;
	}
	
	.mascot {
		gap: 20px;
	}
	
	.mascot img {
		width: calc(33.33% - 12px);
	}
	
	.mascot img:nth-child(4),
	.mascot img:nth-child(5) {
		display: none;l
	}
	
	.snaplens {
		width: 100px;
		bottom:20px;
		left:20px;
	}
	
	.caplife {
		flex-direction: column;
	}
	
	.caplife-form {
		width: 100%;
		padding:0px;
	}
	
	.caplife-img {
		width: 100%;
		margin-bottom: 30px;
	}
	
	iframe {
		aspect-ratio: 5 / 3.5;
	}
	
	form {
		padding:0px;
	}
	
	form p {
		font-size: 1.3em;
	}
	
	input {
		font-size: 1.2em;
	}

	.sb_icons {
		width: 1.5rem;
	}
	
	/* #editor .section-container {
		padding: 0;
	} */

}