/* Gradient text for Proposal Assistant */
.gradient-text {
	background: linear-gradient(135deg, #e1c645, #f4a261);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	color: transparent;
}

/* Gradient button style */
.gradient-button {
	background: linear-gradient(135deg, #e1c645, #f4a261);
	color: #2c2c2c;
	border: none;
	padding: 12px 24px;
	border-radius: 4px;
	cursor: pointer;
	font-size: 16px;
	font-weight: 500;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	transition: opacity 0.2s ease;
}

.gradient-button:hover {
	background: linear-gradient(135deg, #d4b63d, #e8935a);
	opacity: 0.9;
}

.gradient-button:disabled {
	background: #666;
	cursor: not-allowed;
	opacity: 1;
}

/* Red gradient button for PDF */
.gradient-button-red {
	background: linear-gradient(135deg, #e1c645, #d2691e);
	color: #2c2c2c;
	border: none;
	padding: 12px 24px;
	border-radius: 6px;
	cursor: pointer;
	font-size: 14px;
	font-weight: 600;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	transition: opacity 0.2s ease;
	display: flex;
	align-items: center;
	gap: 8px;
}

.gradient-button-red:hover {
	background: linear-gradient(135deg, #d4b63d, #c5621a);
	opacity: 0.9;
}

.gradient-button-red:disabled {
	background: #bdc3c7;
	cursor: not-allowed;
	opacity: 1;
}

/* Blue gradient button for DOC */
.gradient-button-blue {
	background: linear-gradient(135deg, #e1c645, #b8860b);
	color: #2c2c2c;
	border: none;
	padding: 12px 24px;
	border-radius: 6px;
	cursor: pointer;
	font-size: 14px;
	font-weight: 600;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	transition: opacity 0.2s ease;
	display: flex;
	align-items: center;
	gap: 8px;
}

.gradient-button-blue:hover {
	background: linear-gradient(135deg, #d4b63d, #a0750a);
	opacity: 0.9;
}

.gradient-button-blue:disabled {
	background: #bdc3c7;
	cursor: not-allowed;
	opacity: 1;
}
:root {
	--left-offset-web: 200px;
	--top-offset-web: 70px;
	--right-offset-web: 100px;
	--bottom-offset-web: 90px;
	--menu-text-size: 25px;
	--menu-items-gap: 5px;
	--arrow-width: 30px;
	--nav-text-size: 12px;
	--nav-marker-spacing: 80px;
}
a {
	color: #d2691e;
	font-weight: bold;
	text-decoration-line: none;
}

html {
	height: 100vh;
	width: 95vw;
	margin: 0px;
	padding: 0px;
	-ms-overflow-style: none;
	scrollbar-width: none;
	scroll-behavior: smooth;
}
body {
	height: 120vh;
	max-width: 100%;
	/* height: 100%; */
	margin: 0px;
	padding: 0px;
	-ms-overflow-style: none;
	scrollbar-width: none;
	/* background-color: rgb(228, 183, 183); */

	/* background: radial-gradient(
		farthest-corner at 5% 10%,
		rgba(10, 255, 255, 0.199),
		rgba(0, 106, 133, 0.15),
		rgba(255, 10, 132, 0.027),
		rgba(0, 255, 242, 0.1)
	); */

	background-color: whitesmoke;
	overflow-y: scroll;
	font-family: 'Nunito', sans-serif;
	/* font-size: 20px; */
	font-weight: bold;
	scroll-behavior: auto;
	color: rgb(41, 41, 41);
	/* position: -webkit-sticky;
	position: sticky; */
	position: static;
	/* top: 100vh; */
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;
}

.header,
.form-container {
	width: 50vw;
}

@media screen and (max-width: 768px) {
	.header,
	.form-container,
	.login-screen {
		width: 90vw;
	}
}

#scroll-div {
	height: 100vh;
	overflow-y: scroll;
	scroll-snap-type: y mandatory;
}

.snap-section {
	height: 100vh;
	width: 200px;
	scroll-snap-align: start;

	border: solid blue;
	/* position: relative; */
	background-color: rgba(0, 0, 0, 0.171);
	/* top: -100vh; */
	/* z-index: -100; */
}

body::-webkit-scrollbar {
	display: none;
}

img {
	width: 600px;
	height: 300px;
}

.icon {
	cursor: pointer;
}

.hr-light {
	border: none;
	border-top: 1px solid #e0e0e0;
	margin: 24px 0;
}

/* #app,
.main,
#main-view {
	margin: 0px;
	padding: 0px;
	width: 100%;

} */

.main {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	/* align-self: center; */
	width: 100vw;
	height: 100%;
	/* overflow-y: scroll; */
}

/* .main {
	height: 100vh;
	width: 70vw;
	overflow-y: scroll;
	scroll-snap-type: y mandatory;
	border: solid salmon;
	border-width: 5px;
} */

/* #main-view {
	height: 100vh;
	width: 50vw;
	position: fixed;
	top: 0px;
	background-color: rgb(130, 184, 216);
	scroll-snap-type: y mandatory;
	border: solid red;
} */

/* #main-view::-webkit-scrollbar {
	display: none;
} */

#overlay-page {
	/* margin: 0px;
	width: 100%;
	height: 100vh;
	position: fixed;
	top: 0px;

	overflow: hidden;
	display: flex;
	flex-direction: row;
	

	/* border: dotted blue;
	border-width: 6px; */

	margin: 0px;
	width: 100vw;
	height: 100vh;
	position: fixed;
	top: 0px;
	overflow: hidden;
	display: flex;
	flex-direction: row;
	/* z-index: 2; */
}
.overlay-content {
	display: flex;
	flex-direction: row;
	justify-content: end;
	width: 78vw;
	/* border: dotted orangered;
	border-width: 6px; */
	background-color: black;
}

.page {
	margin: 0px;

	width: 100%;
	height: 100vh;
	position: fixed;
	top: 0px;
	overflow: hidden;
	display: flex;
	flex-direction: row;

	/* border: dotted grey; */
}

#journey {
	background-color: #ffd800;
	/* z-index: -1; */
}

#journey-menu {
	background: radial-gradient(
		circle at 0% 100%,
		/* rgba(38, 185, 243, 0.555), */ rgba(255, 134, 41, 0.3),
		rgba(255, 255, 255, 0)
	);
}
#journey-content {
	background: radial-gradient(
		farthest-corner at 120% 0%,
		/* rgba(41, 248, 255, 0.9), */ rgba(255, 134, 41, 0.9),
		rgba(255, 255, 255, 0)
	);
}

#products {
	background-color: #005dff;
	/* z-index: -2; */
}

#products-menu {
	background: radial-gradient(
		circle at 0% 100%,
		rgba(183, 147, 255, 0.3),
		rgba(255, 255, 255, 0)
	);
}

#products-content {
	background: radial-gradient(
		farthest-corner at 120% 0%,
		rgba(183, 147, 255, 0.9),
		rgba(255, 255, 255, 0)
	);
}

#motivation {
	background-color: #e1c645;
	/* z-index: -3; */
}
#motivation-menu {
	background: radial-gradient(
		circle at 0% 100%,
		rgba(187, 255, 0, 0.3),
		rgba(255, 255, 255, 0)
	);
}
#motivation-content {
	background: radial-gradient(
		farthest-corner at 120% 0%,
		rgba(187, 255, 0, 0.7),
		rgba(255, 255, 255, 0)
	);
}

#summary {
	background-color: rgb(255, 81, 68);
	/* z-index: -4; */
}

#summary-menu {
	background: radial-gradient(
		circle at 0% 100%,
		/* rgba(178, 249, 255), */ rgba(78, 233, 247, 0.9),
		rgba(255, 255, 255, 0),
		rgba(255, 255, 255, 0)
	);
}

#summary-content {
	background: radial-gradient(
		farthest-corner at 120% 0%,
		rgb(78, 233, 247),
		rgb(78, 233, 247, 0.3),
		rgba(255, 255, 255, 0) /* rgba(178, 249, 255, 0.7),
		rgba(255, 255, 255, 0) */
	);
}

.content {
	width: calc(100% - var(--left-offset-web));

	/* width: 100%; */
	font-family: 'Libre Franklin', sans-serif;
	/* font-family: 'Franklin Gothic Medium', Arial, sans-serif; */
	/* border: dashed blueviolet; */
	border-width: 3px;
}

.page-content {
	display: flex;
	flex-direction: column;
	justify-content: end;
	height: 100%;
	width: 100%;
	background-size: cover;
	background-position: center;
	/* border: dotted black; */
	border-width: 3px;

	/* overflow: hidden; */

	/* z-index: 50; */
}

/* #journey-page-content {
	background-image: url('');
	background-size: cover;
	background-position: center;
} */

.content-scroller {
	scroll-behavior: smooth;
	scrollbar-width: none;

	/* border: dashed orangered; */
	/* align-content: start; */
	/* overflow: scroll; */
	overflow-x: scroll;
	overflow-y: hidden;
	width: 100%;
	height: calc(100vh - var(--bottom-offset-web));
	position: relative;
	transition: background-image 0.5s ease-out;
	background-repeat: no-repeat;
	scroll-snap-type: x mandatory;
	/* border-radius: 30px; */

	/* right: var(--arrow-width); */
}

.content-slide {
	position: absolute;
	width: calc(100% - var(--left-offset-web));
	height: calc(100vh - var(--bottom-offset-web));
	top: 0;
	left: var(--left-offset-web);
	/* z-index: 3; */
	opacity: 0;
	transition: opacity 0.25s ease-out;
	background-size: cover;
	background-position: center;
	/* background-color: var(--background-color, rgb(10, 10, 10)); */
	display: flex;
	flex-direction: column;
	justify-content: start;
	align-items: center;
}

.content-slide.active {
	opacity: 1;
}
.content-wrapper {
	display: flex;
	align-self: center;
	flex-direction: row;
	width: fit-content;
	scroll-snap-align: start;
	/* border: dotted blue; */
	border-width: 3px;
	/* align-items: stretch; */
}

.content-scroller::-webkit-scrollbar {
	display: none;
}

.content-module {
	display: flex;
	flex-direction: column;
	justify-content: start;

	scroll-snap-align: start;

	height: calc(100vh - 5px - var(--bottom-offset-web));
	/* width: calc(100vh - 5px - var(--top-offset-web) - var(--bottom-offset-web)); */
	width: calc(100vw - var(--left-offset-web));

	/* border-radius: 15px; */
	/* border: dotted grey; */
	overflow: hidden;
	background-size: 100%;
	/* background-position: center; */
	background-repeat: no-repeat;
	/* background-attachment: fixed; */
}

.img-content {
	height: 100%;
	width: auto;
	/* width: calc(100vh - var(--top-offset-web) - var(--bottom-offset-web)); */
}

.content-arrow {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	/* border: solid blue; */
	/* width: calc(var(--arrow-width) + 40px); */
	width: 100px;
	position: relative;
	height: calc(100vh - var(--top-offset-web) - var(--bottom-offset-web));
	bottom: calc(100vh - var(--top-offset-web) - var(--bottom-offset-web));
}

.arrow-icon {
	/* border: solid red; */
	border-radius: 100px;
	/* padding: 5px; */
	width: 100%;
	height: var(--arrow-width);
	color: rgba(0, 0, 0, 0.8);
	filter: drop-shadow(0px 0px 6px rgb(255, 255, 255));
	cursor: pointer;
	/* color: rgba(0, 0, 0, 0.8); */

	/* color: rgba(250, 250, 250, 0.8); */

	/* mix-blend-mode: difference; */
}

.active :hover {
	color: rgba(0, 0, 0, 1);
	/* filter: drop-shadow(0px 0px 10px white); */
}

.inactive {
	/* color: rgba(128, 128, 128, 0.4);
	filter: none; */
	opacity: 0;
}

#side-menu {
	display: flex;
	flex-direction: column;
	justify-content: start;
	position: fixed;
	top: var(--top-offset-web);
	height: auto;
	width: var(--left-offset-web);
	left: 0px;
	/* gap: var(--menu-items-gap); */

	/* text-align: right; */
	/* border: dashed rgb(225, 0, 255); */
	border-width: 4px;
}

.content-navigation {
	height: var(--bottom-offset-web);
	display: flex;
	flex-direction: row;
	justify-content: center;

	align-self: center;
	/* border: solid red; */
	width: 100%;
}

.navigation-visual {
	display: flex;
	flex-direction: column;
	justify-content: start;
	align-items: center;
	width: calc(100% - var(--arrow-width) - var(--arrow-width));
	/* border: solid blueviolet; */
}

.nav-markers-wrapper {
	display: flex;
	flex-direction: row;
	justify-content: center;
	position: relative;
	/* left: 40px; */
	height: 100%;
	width: fit-content;
	/* width: calc(100% - 40px - var(--arrow-width) - var(--arrow-width)); */
	/* border: solid blue; */
}

.nav-bar {
	height: var(--nav-text-size);
	width: calc(90vw - var(--left-offset-web));
	position: relative;
	top: calc(var(--nav-text-size) - 0.5px);
	right: calc(var(--nav-marker-spacing) / 2);
	background-image: linear-gradient(
		to right,
		rgba(0, 0, 0, 0),
		rgba(0, 0, 0, 0.08),
		rgba(0, 0, 0, 0)
	);
	/* border: solid black; */
	/* backdrop-filter: invert(70%) hue-rotate(360deg); */
	/* border-radius: 50px; */
}

.nav-wrapper {
	display: flex;
	flex-direction: column;
	justify-content: start;
	align-items: start;
	width: var(--nav-marker-spacing);
	height: fit-content;
	position: relative;
	/* top: 20px; */
	overflow: visible;
	white-space: nowrap;
	/* top: 50px; */
	/* border: solid black; */
	color: rgba(0, 0, 0, 0.4);
	user-select: none;
}

.nav-text,
.nav-checkbox-empty {
	font-size: var(--nav-text-size);
}

.nav-text {
	transform-origin: bottom left;
	transform: rotate(45deg);
	position: relative;
	left: 6px;
	top: -8px;

	cursor: pointer;
}

.nav-active {
	color: black;
}

.nav-spacer {
	min-height: 5px;
}

.nav-checkbox-filler,
.nav-checkbox-empty,
.nav-spacer,
.nav-text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: auto;

	/* border: solid grey; */
}

.side-menu-spacer,
.content {
	height: 100vh;
}

.side-menu-spacer {
	width: var(--left-offset-web);
	/* mix-blend-mode: difference; */

	/* border: dotted black;
	border-width: 6px; */
}

.side-menu-area {
	width: var(--left-offset-web);
	height: 100vh;
	/* border: dashed greenyellow; */

	z-index: 50;
}

#menu-select-bar {
	position: fixed;
	top: var(--top-offset-web);
	left: 0px;
	height: var(--menu-text-size);
	width: calc(var(--left-offset-web) + 0px);
	/* width: 100vw; */
	background-color: rgba(0, 0, 0, 0.85);
	/* background-image: linear-gradient(
		to right,
		rgba(0, 0, 0, 0.452),
		black,
		black
	); */
	/* backdrop-filter: invert(70%); */
	z-index: 4;
}

#menu-journey,
#menu-products,
#menu-motivation,
#menu-summary {
	font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
	font-weight: bolder;
	font-size: var(--menu-text-size);
	height: var(--menu-text-size);
	width: 98%;
	text-align: right;
	z-index: 5;
	cursor: pointer;
	/* border: solid red; */
}

#menu-journey {
	color: #ffd800;
}
#menu-products {
	color: #005dff;
}
#menu-motivation {
	color: #d2691e;
}
#menu-summary {
	color: rgb(255, 81, 68);
}

/* .slide-test-content {
	background-color: aqua;
	width: 620px;
	height: 380px;
} */

.icons-div {
	position: fixed;
	top: 0px;
	right: 0px;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	gap: calc(var(--menu-text-size) / 4);
	width: var(--right-offset-web);
	height: var(--top-offset-web);
	color: black;
	font-size: var(--menu-text-size);
	/* filter: drop-shadow(2px 2px white); */
	/* border: solid red; */
	/* mix-blend-mode: difference;
	color: rgba(250, 250, 250, 0.9); */
}

#outlines-wrapper {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;

	position: fixed;

	bottom: -1px;
	width: inherit;
	height: var(--bottom-offset-web);
	/* border: dotted black; */
	border-width: 6px;
}

.outlines-containers {
	display: flex;
	flex-direction: row;

	position: fixed;
	height: inherit;
	width: inherit;
	/* border: dotted greenyellow; */
}

#outline-bw {
	z-index: 20;
	left: -40px;
}
#outline-red {
	z-index: 19;
	left: -20px;
}
#outline-violet {
	z-index: 18;
}
#outline-blue {
	z-index: 17;
	left: 20px;
}
#outline-yellow {
	z-index: 16;
	left: 40px;
}

.content-module-text {
	display: table;
	/* border: dotted grey; */
	height: 100%;
	width: 100%;
}

.module-content-00 {
	color: white;
	font-size: larger;
	text-align: center;
	display: block;
	border: solid black;
	height: 50%;
	width: 50%;
}

.mc-center {
	color: white;
	font-size: larger;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	/* border: solid black; */
	height: 100%;
	width: 100%;
}

.photo-center {
	display: flex;
	flex-direction: column;
	/* justify-content: center; */
	/* align-items: start; */
	/* text-align: center; */
	border: 5px solid black;
	height: 100%;
	width: calc((100vh - var(--bottom-offset-web)) * 0.8);
	background-size: cover;
	background-position: center;
	/* padding: 15px; */
}

.caption-picture {
	display: flex;
	flex-direction: column;
	/* justify-content: center; */
	/* align-items: start; */
	/* text-align: center; */
	/* border: 5px solid black; */
	/* height: 1950px;
	width: 2000px; */
	/* width: calc((100vh - var(--bottom-offset-web)) * 0.8); */
	background-size: cover;
	background-position: center;
	/* padding: 15px; */
	box-shadow: 1px 1px 5px black;
}

#stamp-pic {
	width: 350px;
	height: 294px;
	background-size: contain;
}

#io-card-pic {
	width: 350px;
	height: 205px;
	background-size: contain;
}
#irony-man {
	width: 400px;
	height: 400px;
	background-size: contain;
	/* box-shadow: 1px 1px 5px black; */
}

#building-pic {
	width: calc(3340px * 0.5);
	height: calc(1640px * 0.5);
	background-size: contain;
}

#baskets {
	width: 350px;
	height: calc(350px / 0.8166);
	background-size: contain;
	box-shadow: 1px 1px 5px black;
}

.no-border {
	border: none;
}

#art-wall {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;

	height: 100%;
	width: 100%;
	background-size: cover;
	background-position: center;
	background-image: url('https://storage.googleapis.com/kostya-works-public/design/journey/art%20wall%20web.png');
}

#buildings-wall {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	border: 5px solid black;
	height: calc(100vh - var(--bottom-offset-web));
	width: calc((100vh - var(--bottom-offset-web)) / 0.75);
	background-size: cover;
	background-position: center;
	background-image: url('https://storage.googleapis.com/kostya-works-public/design/journey/buildings-bcm-web.png');
}

#diploma-pic {
	width: calc(60vh / 0.75);
	height: 60vh;
	background-size: contain;
}
#video-cover-wrapper {
	height: 100%;
	width: 100%;
	overflow: hidden;
	/* align-self: center; */
}

#video-cover {
	width: 100%;
	align-self: center;
}

.video-clip {
	height: 100%;
}

.videos-div {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
	align-items: center;
	gap: 15px;
}

.video-wrapper {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	/* width: 300px;*/
	width: calc(100% / 4);
	border: solid black;
	border-width: 3px;
	/* background-color: rgba(0, 0, 0, 0.3); */
}

.videos-yt {
	width: calc(100% / 3 - 50px);
	height: calc(100% / 3);
	border: solid black;
	border-width: 3px;
}

.all-players {
	height: 90%;
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
	align-items: center;
	gap: 15px;
}
.player-wrapper {
	height: 250px;
	width: 250px;

	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	/* border: dotted black; */
}
.player {
	height: 100%;
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: end;

	/* border: solid black; */
	background-size: contain;
	background-image: url('https://storage.googleapis.com/kostya-works-public/design/interests/cd.png');
	background-repeat: no-repeat;
	background-position: center;
}

.play-button {
	color: white;
	background-color: red;
	font-size: xx-large;
}

.clip-name {
	font-size: x-large;
	color: white;
	background-color: rgba(0, 0, 0, 0.85);
}
.clip-description {
	font-size: medium;
	color: white;
	background-color: rgba(0, 0, 0, 0.85);
}

#madigan-img {
	width: 769px;
	height: 600px;
}

#deforestation-img {
	width: calc(555px * 0.6);
	height: calc(967px * 0.6);
}

.caption-span {
	max-width: 500px;
}

#summary-div {
	max-width: 500px;
	text-align: left;
	/* background-color: ; */
}

#profile-pic {
	border-radius: 100%;
	height: 50px;
	width: 50px;
}

#name-div {
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: start;

	align-items: center;
	font-size: small;
	font-weight: 500;
	gap: 10px;
	margin-bottom: 0px;
}

/* hr {
	height: 1px;
	border-width: 0;
	background-color: rgba(36, 36, 44);
	margin-bottom: 0px;

} */

.section-name-mobile {
	/* height: var(--menu-text-size);
	width: 100vw; */
	background-color: black;
	/* background-image: linear-gradient(
		to right,
		rgba(0, 0, 0, 1),
		rgba(0, 0, 0, 1),
		rgba(0, 0, 0, 0)
	); */
}

/* #name {
	cursor: pointer;
	color: white;

	-webkit-user-select: none; 
	-ms-user-select: none; 
	user-select: none; 
} */
/* TEXT STYLE TEXT STYLE TEXT STYLE TEXT STYLE TEXT STYLE TEXT STYLE TEXT STYLE TEXT STYLE */

.x-large {
	font-size: 20vh;
}

.large {
	font-size: 10vh;
}
.medium {
	font-size: 8vh;
}

.purple {
	color: rgb(140, 0, 255);
	opacity: 0.8;
}

.yellow {
	color: rgb(255, 255, 0);
	opacity: 0.8;
}

#colors {
	color: rgb(255, 255, 255);

	text-shadow: 5px 1px 1px rgb(0, 255, 49), 10px -2px 1px rgb(44, 35, 255),
		-6px 2px 1px rgb(255, 62, 37);
	/* opacity: 0.9; */
	/* filter: invert(100%); */

	background-color: black;
}

#spaces {
	color: black;
	/* transform: rotate(30deg); */
	/* -webkit-transform: rotate(30deg);
	-moz-transform: rotate(30deg);
	-ms-transform: rotate(30deg);
	-o-transform: rotate(30deg); */
	opacity: 0.8;
	background-color: white;
}

#numbers {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	height: 50%;
	width: 50%;
	font-family: Georgia, 'Times New Roman', Times, serif;
	font-style: italic;
	color: white;
	background-color: rgb(31, 31, 31);
	opacity: 0.8;
	overflow-wrap: break-word;
	border: solid black;
	border-width: 15px;
	text-align: center;
	vertical-align: center;

	/* -webkit-text-stroke: 8px black; */
	/* filter: invert(70%); */
}

.text {
	max-width: 500px;
	/* border: solid red; */
	/* background-color: black; */
	background-color: white;
	font-size: 50px;
	/* color: white; */
	color: black;

	/* -webkit-text-stroke: 2px black; */
}

.link {
	/* max-width: 500px; */
	font-size: 20px;
	color: black;
	text-decoration-line: underline;
	cursor: pointer;
	/* -webkit-text-stroke: 2px rgb(221, 101, 83); */
}

/* @MEDIA @MEDIA @MEDIA @MEDIA @MEDIA @MEDIA @MEDIA @MEDIA @MEDIA @MEDIA @MEDIA */

/* ************************************************************** */

.img-sub {
	height: 500px;
	/* width: 500px; */
	background-color: gray;
}

hr.hr-grey {
	border: 0px;
	border-top: 1px solid rgba(78, 10, 10, 0.181);
	width: 100%;
}

.bottom-button-div {
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	padding-right: var(--left-indent-3);
	/* border: 2px solid var(--logo-font); */
}

.popup-input {
	background-color: #f2f2f2;
}

.general-button {
	width: fit-content;
	background-color: pink;
	color: var(--logo-font);
	padding: 15px 20px;
	border: none;
	border-radius: 50px;
	cursor: pointer;
	font-size: medium;
	font-weight: bold;

	/* prevent select */
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.general-button-grey {
	width: fit-content;
	background-color: rgb(214, 214, 214);
	color: rgb(139, 139, 139);
	padding: 15px 20px;
	border: none;
	border-radius: 50px;
	cursor: pointer;
	font-size: medium;
	font-weight: bold;

	/* prevent select */
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.button-text {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	cursor: pointer;
	text-decoration-line: underline;
	text-align: center;
	padding-top: 7px;
	font-size: large;
	width: fit-content;
	/* border: 1px solid blue; */
	align-self: center;
	/* border-radius: 40px; */
}

.button-text:hover {
	text-decoration-line: none;

	/* color: rgb(72, 72, 72); */
	/* background-color: rgb(204, 204, 204); */
}

.close-button {
	position: absolute;
	top: 30px;
	right: 30px;
	background-color: #f2f2f2;
	border: none;
	border-radius: 50px;
	cursor: pointer;
	width: 45px;
	height: 45px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	color: var(--logo-font);
	/* prevent select */
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
.close-button:hover {
	background-color: #e2e2e2;
}

.icon-button {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;

	width: fit-content;
	align-self: center;

	border: 1.5px solid rgb(41, 41, 41);
	border-radius: 4px;
	color: var(--logo-font);
	font-size: large;

	margin-top: 3px;
	padding: 2px;

	/* position: absolute;
	top: 30px;
	right: 30px; */
	/* background-color: #f2f2f2; */
	/* width: 45px;
	height: 45px; */

	cursor: pointer;
	/* prevent select */
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
.icon-button:hover {
	background-color: rgba(41, 41, 41, 0.281);
}

.icon-button-fill {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;

	width: fit-content;
	align-self: center;

	border: 1.5px solid rgb(41, 41, 41);
	border-radius: 4px;

	background-color: rgb(41, 41, 41);
	color: rgb(231, 231, 231);

	font-size: large;

	margin-top: 3px;
	padding: 2px;

	cursor: pointer;
	/* prevent select */
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.responded-text {
	cursor: pointer;
	/* prevent select */
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;

	background-color: rgb(41, 41, 41);
	color: rgb(231, 231, 231);
	/* text-decoration-line: underline; */
	text-align: center;
	margin-top: 10px;
	padding: 2px;
	padding-left: 7px;
	padding-right: 7px;
	font-size: large;
	width: fit-content;
	/* border: 1px solid blue; */
	align-self: center;
	/* border-radius: 40px; */
	border-radius: 4px;
}

.popup {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-color: rgba(
		0,
		0,
		0,
		0.5
	); /* Semi-transparent background overlay */

	z-index: 1000; /* Make sure it's above other content */
	overflow-y: scroll;
	overflow-x: hidden;
}

.popup-scroll {
	width: 100vw;
	height: 130vh;
	display: flex;
	justify-content: start;
	/* align-items: center; */
	/* border: 2px dotted black; */
}
.popup-transparent {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;

	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1000; /* Make sure it's above other content */
}

.popup-inner {
	height: 70%;
	width: 40%;
	background-color: white;
	padding: 20px;
	border-radius: 12px;
	/* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); */
	position: relative;
	/* right: 90px; */
	/* border: 2px dotted black; */
}

.popup-frame-inner {
	width: 100%;
	height: 99vh;
	display: flex;
	justify-content: center;
	align-items: center;
}

input,
select,
textarea {
	font-size: 15px;
	width: 100%;
	padding: 12px 20px;
	display: inline-block;
	border: 0px solid #ccc;
	border-radius: 10px;
	box-sizing: border-box;
	font-size: medium;
	background-color: white;
	resize: none;
	font-family: Arial;
}

label {
	color: #6d6c70;
}

.select-placeholder {
	width: 80%;
	color: gray;
}

.deep-content {
	padding-left: var(--left-indent-3);
	padding-right: var(--left-indent-3);
	/* border: 1px solid red; */
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-evenly;
	align-items: stretch;
	gap: 10px;
	/* min-height: 100%; */
}

.forms {
	height: 70%;

	/* border: 1px solid blue; */
}

.form-wrap {
	height: 100%;
	/* min-height: 500px; */
	display: flex;
	flex-direction: column;
	/* align-items: center; */
	justify-content: space-between;
	/* align-items: stretch; */
	/* border: 1px solid magenta; */
}

.inputs-wrap {
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	/* align-items: center; */
	/* align-content: stretch; */
	align-self: center;
	height: 100%;
	width: 100%;
	gap: 15px;
	/* border: 1px solid green; */
}

.decor-text {
	/* flex: 2; */
	font-family: 'Miltonian', cursive;
	text-align: center;
	font-size: 30px;
	/* font-size: 2rem; */
	width: 100%;
	/* font-size: 50px; */
	/* font-weight: bolder; */
	/* border: dotted green; */
	box-sizing: border-box;
}

.decor-text-2 {
	/* flex: 2; */
	font-family: 'Fredericka the Great', cursive;
	text-align: center;
	font-size: 50px;
	/* font-size: 3rem; */
	width: 100%;
	/* font-weight: bolder; */
	/* border: dotted green; */
	box-sizing: border-box;
}

.invite-text {
	width: fit-content;
	display: flex;
	flex-direction: row;
	justify-content: center;
	gap: 7px;
	align-items: center;
	/* flex: 1; */
	/* Grow to fill available space */
	/* background-color: #f0f0f0; */
	text-align: center;
	/* padding: 20px; */
	box-sizing: border-box;
	/* border: 1px solid #ccc; */
	align-self: center;
}

.invite-body {
	align-self: center;
	height: 100vh;
	width: 90%;
	display: flex;
	flex-direction: column;
	/* margin: 20px; */
	/* padding-left: 20px;
	padding-right: 20px; */
	/* overflow-y: scroll; */
	justify-content: center;
	/* align-items: center; */
	/* border: 1px solid red; */
	/* align-content: stretch; */
	/* overflow: none; */
}

.outline-images {
	/* flex: 1; */
	height: 100%;
	width: auto;
	/* object-fit: contain; */
	/* border: dotted blue; */
	align-self: center;
}

.image-wrap {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	text-align: center;
	max-height: 60%;
	/* border: 2px dotted blue; */
	box-sizing: border-box;
	vertical-align: baseline;
}

.text-wrap {
	display: flex;
	flex-direction: column;
	justify-content: center;
	max-height: 40%;
	/* border: 2px dotted red; */
	box-sizing: border-box;
}

.confirm-div {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 100%;
	width: 100%;
}

.popup-children-wrap {
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 100%;
	width: 100%;
	/* border: 2px dotted red; */
}

.tiles-div {
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	gap: 15px;
	height: 100%;
	width: 100%;
	/* border: 2px dotted red; */
}

.tile {
	align-self: center;
	width: 40%;
	/* border: 1px solid black; */
	border-radius: 12px;
	border: 1px solid rgb(231, 231, 231);
	height: 28%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.tile:hover {
	/* background-color: #f2f2f2; */
	background: radial-gradient(
		farthest-corner at 5% 10%,
		rgba(211, 158, 241, 0.527),
		rgba(245, 175, 201, 0.74),
		rgba(240, 149, 169, 0.466),
		rgba(240, 211, 157, 0.753)
	);
}

.logo-img {
	height: 100px;
	width: 100px;
}

.poem {
	text-align: center;
}

@media (max-width: 820px) {
	.outline-images {
		/* flex: 1; */
		/* height: auto;
		width: 100%; */
		/* object-fit: contain; */

		height: 100%;
		width: auto;
		/* border: dotted blue; */
	}

	.image-wrap {
		/* flex: 1; */
		max-height: 35%;
	}

	.text-wrap {
		/* flex: 2; */
		height: fit-content;
		max-height: 65%;
		margin-bottom: 7px;
	}
	.popup-inner {
		height: fit-content;
		width: 95%;
		/* border: dotted blue; */
	}

	.tile {
		height: 25%;
	}
}

/* Input field styles */
.form-input {
	width: 100%;
	padding: 8px 12px;
	border: 1px solid #ddd;
	border-radius: 4px;
	font-size: 14px;
	box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
	box-sizing: border-box;
}

.form-textarea {
	width: 100%;
	padding: 8px 12px;
	border: 1px solid #ddd;
	border-radius: 4px;
	font-size: 14px;
	box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
	box-sizing: border-box;
	font-family: inherit;
	resize: vertical;
}

.login-input {
	width: 100%;
	padding: 12px;
	border: 1px solid #ddd;
	border-radius: 6px;
	font-size: 16px;
	box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
	box-sizing: border-box;
}