html, body {
	max-width: 100%;
	overflow-x: hidden;
}

body {
	position: relative;
	height: 100vh;
	margin: 0px;
}

.bg-img {
	position: absolute;
	z-index: -2;
	height: 100vh;
	width: 100vw;
	-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, 
    from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
	/* overflow: hidden; */

	background-image: url("../media/images/parallax.png");
	background-position: 45% 30%;
	background-repeat: no-repeat;
	background-clip: border-box;
	margin: 0px;
}

@media screen and (max-width: 800px) {
	.bg-img {
		background-image: none;
	}
}

/* Scrollbar */

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

body {
	-ms-overflow-style: none;
	scrollbar-width: none;
} */

/* width */
::-webkit-scrollbar {
  width: 10px;
	height: 10px;
}

/* track */
::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* handle */
::-webkit-scrollbar-thumb {
  background: #888;
  /* border-radius: 5px; */
}

/* handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* Title Section */

.title-div {
	margin-top: 30vh;
	width: 80vw;
	margin-left: 10vw;
}

.main-title {
	font-weight: 400;
	font-size: 2.5rem;
}

@media screen and (max-width: 800px) {
	.main-title {
		font-size: 1.5rem;
	}

	.title-div {
		text-align: center;
	}
}

.retype {
	font-weight: 600;
}

.main-subtitle {
	font-family: "Inria Serif", serif;
	transition: 200ms ease-in-out;
	text-decoration-color: rgba(0, 230, 42, 0);

	font-weight: bold;

	width: fit-content;
}

.main-subtitle:hover {
	cursor: pointer;
	text-decoration-line: underline;
	text-decoration-style: "solid";
	text-decoration-color: rgba(0, 230, 42, 1);
	text-decoration-thickness: 4px;
}

/* Panels */

.panel-root {
	position: absolute;
	height: max(100vh, 600px);
	width: 100vw;
	left: 0;
	top: 0;
	z-index: -1;
}

.panel {
	position: absolute;

	background-size: 120%;
	background-repeat: no-repeat;
	background-position: center;

	box-shadow: 12px 12px black;

	/* transition:  200ms ease-in-out; */
}

.panel-1 {
	border: 6px solid red;
	background-image: url("../media/images/panels/panel-1.png");

	height: 12vh;
	width: 30vw;

	top: 15vh;
	right: 10vw;
}

.panel-2 {
	border: 6px solid rgb(255, 255, 0);
	background-image: url("../media/images/panels/panel-2.png");

	width: 20vw;
	height: 17vw;

	bottom: 0vh;
	left: 15vw;
}

.panel-3 {
	border: 6px solid magenta;
	background-image: url("../media/images/panels/panel-3.png");
	background-size: 150%;

	width: 20vw;
	height: 32vh;

	bottom: 5vh;
	right: 15vw;
}

/* @media screen and (max-width: 1200px) {
    .panel-3 {

    }
} */

.panel-4 {
	border: 6px solid rgb(124, 231, 255);
	background-image: url("../media/images/panels/panel-4.png");

	width: 120px;
	height: 130px;

	top: 15vh;
	left: 10vw;
}

/*  and (min-width: 800px) */
@media screen and (max-height: 550px) {
	.panel-1, .panel-2, .panel-3, .panel-4 {
		display: none;
	}
}

@media screen and (max-width: 800px) {
	.panel-1 {
		top: 12vh;
		right: 20vw;
	}

	.panel-2 {
		display: none;
	}

	.panel-3 {
		bottom: 4vh;
		right: 10vw;
		width: 20vw;
		height: 14vh;
	}

	.panel-4 {
		top: 70vh;
	}
}

/* Parallax Image Background */

.parallax-bg {
	position: absolute;

	z-index: -1;
	width: 150vw;

	top: -30vh;
	right: -25vw;

	overflow: hidden;
}

/* Sections */

.section {
	display: flex;
	flex-direction: column;

	justify-content: center;
	align-items: center;
	
	width: 80vw;
	padding-left: 10vw;
}

.section-title {
	font-weight: 400;
	font-size: 2rem;
	text-align: center;
}

.section-description {
	font-family: "Inria Serif", serif;
	font-size: 1.2rem;
	font-weight: 400;

	text-align: center;
	margin: 0 20vw;
}

/* Our Mission Section */

.our-mission {
	margin-top: 50vh;
	justify-content: center;
}

.exchange-anim {
	max-width: 60vw;
	margin-top: 2rem;
}

@media screen and (max-width: 800px) {
	.our-mission-title {
		font-size: 1.5rem;
		padding: 0 20px;
	}

	.exchange-anim {
		display: none;
	}

	.our-mission-description {
		margin: 0 1rem;
	}
}

/* Sign Up Section */

.signup {
	margin-top: 10vh;
}

.signup-form {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;

	gap: 2rem;
}

.signup-input {
	border: none;
	border-bottom: 2px solid rgba(118, 118, 118, 0.1);

	width: 70vw;
	font-size: 1.2rem;
	text-align: center;

	outline-width: 0;

	transition: 200ms ease-in-out;
}

.i-am-a {
    text-align: center;
}

.radio-inputs {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	border-radius: 0.5rem;
	background-color: #eee;
	box-sizing: border-box;
	box-shadow: 0 0 0px 1px rgba(0, 0, 0, 0.06);
	padding: 0.25rem;
	width: 300px;
	font-size: 14px;
}

.radio-inputs .radio {
	flex: 1 1 auto;
	text-align: center;
}

.radio-inputs .radio input {
	display: none;
}

.radio-inputs .radio .name {
	display: flex;
	cursor: pointer;
	align-items: center;
	justify-content: center;
	border-radius: 0.5rem;
	border: none;
	padding: 0.5rem 0;
	color: rgba(51, 65, 85, 1);
	transition: all 0.15s ease-in-out;
}

.radio-inputs .radio input:checked + .name {
	background-color: #fff;
	font-weight: 600;
}

.signup-input:empty {
	border-bottom: 1px solid rgba(118, 118, 118, 0.4);
}

.signup-input:focus {
	border-width: 3px;
}

.signup-input:valid {
	border-bottom: 3px solid rgb(0, 255, 0);
}

.signup-button {
	background-color: rgb(56, 56, 56);
	padding: 10px 60px;
	border-radius: 5px;
	color: white;

	margin-bottom: 2rem;
}

.signup-button:hover {
	background-color: white;
	color: black;

	cursor: pointer;
}

.initially-hidden {
	font-size: 1.5rem;
	display: none;
}

.success-msg {
	margin: 0;
}

.form-link {
	text-decoration: none;
	color: white;
	background-color: lightskyblue;
	padding: 10px 20px;
	border-radius: 12px;
	border: 1px solid lightskyblue;
}

.form-link:hover {
	color: lightskyblue;
	background-color: white;
}

/* Footer */

.footer {
	width: auto;
	padding: 20px;

	margin-top: 10vh;
	margin-left: 0;

	background-color: rgb(56, 56, 56);
}

.footer-text {
	font-size: max(3vw, 1rem);
	color: white;
	font-family: "Inria Serif", serif;
	text-align: center;
	overflow-wrap: anywhere;
}

.footer-email {
	font-family: "Inria Serif", serif;
	color: lightskyblue;
	text-decoration: none;
	font-style: italic;
}

.return-to-top {
	color: white;
	text-decoration: none;
	font-weight: bold;
}