root: {
/* - Background Colours - */
--background-colour: #121212;
--surface-colour-one: #232323;
--surface-colour-two: #343434;
--surface-colour-three: #454545;
--surface-colour-four: #565656;
--surface-shadow: 0px 10px 15px rgba(0, 0, 0, 1);

/* - Button Colours - */
--button-shadow: 0px 4px 6px rgba(0, 0, 0, 1);

/* - Brand Colours - */
--brand-primary-colour: #7E47D1;
--brand-secondary-colour: #63E9BA;

/* - Banner Colours - */
--caution-colour: #CFCD66;
--warning-colour: #CF8540;
--error-colour: #CF6679;

/* - Text Colours - */
--font90: #ffffffD3;
--font80: #ffffffB7;
--font60: #ffffff85;
--font40: #ffffff54;
}

@media (prefers-color-scheme: dark) {
	:root {
/* - Background Colours - */
--background-colour: #121212;
--surface-colour-one: #232323;
--surface-colour-two: #343434;
--surface-colour-three: #454545;
--surface-colour-four: #565656;
--surface-shadow: 0px 10px 15px rgba(0, 0, 0, 1);

/* - Button Colours - */
--button-shadow: 0px 4px 6px rgba(0, 0, 0, 1);

/* - Brand Colours - */
--brand-primary-colour: #7E47D1;
--brand-secondary-colour: #63E9BA;

/* - Banner Colours - */
--caution-colour: #CFCD66;
--warning-colour: #CF8540;
--error-colour: #CF6679;

/* - Text Colours - */
--font90: #ffffffD3;
--font80: #ffffffB7;
--font60: #ffffff85;
--font40: #ffffff54;
}



button {
	cursor: pointer;
	align-items: center;
	user-select: none;
	touch-action: manipulation;
}

button:hover {
	scale: 1.1;
}

.buttonroundpurple {
	border-radius: 20em;
	border-style: none;
	padding: 4px 24px;

	background-size: 200% auto;
	background-image: linear-gradient(45deg, #7E47D1 0%, #9466d9  51%, #7E47D1  100%);
	box-shadow: var(--button-shadow);

	color: var(--font90);

	transition: 0.4s;
}

.buttonroundpurple:hover {
	background-position: right center;
	text-decoration: none;
}

.buttonroundpurple:active {
	transform: scale(0.95);
}
}

@media (prefers-color-scheme: light) {
	:root {
/* - Background Colours - */
--background-colour: #e1dfe3;
--surface-colour-one: #eae9eb;
--surface-colour-two: #E0E0E0;
--surface-colour-three: #D0D0D0;
--surface-colour-four: #f1f1f2;
--surface-shadow: 0px 10px 15px rgba(0, 0, 0, 0.15);

/* - Button Colours - */
--button-shadow: 0px 4px 6px rgba(0, 0, 0, 0.15);

/* - Brand Colours - */
--brand-primary-colour: #7E47D1;
--brand-secondary-colour: #63E9BA;

/* - Banner Colours - */
--caution-colour: #B59B30;
--warning-colour: #B35919;
--error-colour: #B53948;

/* - Text Colours - */
--font90: #000000D3;
--font80: #000000B7;
--font60: #00000085;
--font40: #00000054;
}



button {
	cursor: pointer;
	align-items: center;
	user-select: none;
	touch-action: manipulation;
}

button:hover {
	scale: 1.1;
}

.buttonroundpurple {
	border-radius: 20em;
	border-style: none;
	padding: 4px 24px;

	background-size: 200% auto;
	background-image: linear-gradient(45deg, #63E9BA 0%, #97f0d1  51%, #63E9BA  100%);
	box-shadow: var(--button-shadow);

	color: var(--font90);

	transition: 0.4s;
}

.buttonroundpurple:hover {
	background-position: right center;
	text-decoration: none;
}

.buttonroundpurple:active {
	transform: scale(0.95);
}
}



body {
    margin: 0;
    padding: 0;
	background-color: var(--background-colour);
}

a {
	text-decoration: none;
}



.dark-mode {
--background-colour: #121212;
--surface-colour-one: #232323;
--surface-colour-two: #343434;
--surface-colour-three: #454545;
--surface-colour-four: #565656;
--brand-primary-colour: #7E47D1;
--brand-secondary-colour: #63E9BA;
--caution-colour: #CFCD66;
--warning-colour: #CF8540;
--error-colour: #CF6679;
--font90: #ffffffD3;
--font80: #ffffffB7;
--font60: #ffffff85;
--font40: #ffffff54;
}

.light-mode {
--background-colour: #F0F0F0;
--surface-colour-one: #FFFFFF;
--surface-colour-two: #E0E0E0;
--surface-colour-three: #D0D0D0;
--surface-colour-four: #C0C0C0;
--brand-primary-colour: #7E47D1;
--brand-secondary-colour: #63E9BA;
--caution-colour: #B59B30;
--warning-colour: #B35919;
--error-colour: #B53948;
--font90: #000000D3;
--font80: #000000B7;
--font60: #00000085;
--font40: #00000054;
}



.pagedivider {
	height: 3px;
	border-radius: 1px;
}

.page {
	background-color: var(--background-colour);
	display: flex;
	flex-direction: column;
	align-items: center;
  
	width: 100%;
}

.contentcontainer {
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 60%;
}

.pagetitle {
	font-family: var(--titlefont);
	color: var(--font90);
  
	margin-top: 6rem;
	font-size: 2rem;
}

.pagedescription {
	font-family: var(--bodyfont);
	color: var(--font80);
  
	margin-top: 1rem;
	font-size: 1.05rem;
	letter-spacing: 0.01rem;
	word-spacing: 0.06rem;
}

.interestmaincontainer {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.interestcontainer {
	background-color: var(--surface-colour-one);
	box-shadow: var(--surface-shadow);
	border-radius: 2rem;
	margin-top: 2rem;
	padding: 2rem;
	min-width: 36rem;
	max-width: 48rem;
}

.interesttitle {
	font-family: var(--titlefont);
	color: var(--font90);

	font-size: 1.5rem;
}

.interestdescription {
	font-family: var(--bodyfont);
	color: var(--font80);

	margin-top: 1rem;
	font-size: 1.05rem;
  
	letter-spacing: 0.01rem;
	word-spacing: 0.06rem;
}

.submitbuttoncontainer {
	margin-top: 1.5rem;
	display: flex;
	justify-content: center;
}

.disclaimercontainer {
	display: flex;
	justify-content: center;
}

.disclaimer {
	font-family: var(--bodyfont);
	color: var(--font60);

	margin-top: 2rem;
	margin-bottom: 2rem;
	margin-left: auto;
	margin-right: auto;

	letter-spacing: 0.01rem;
	word-spacing: 0.06rem;
}

/* -- Form Styling -- */
.form-group {
	display: flex;
	flex-direction: column;

	margin-top: 1rem;
}

.name-group {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	margin: 0 0 .5rem;
}

.name-form {
	width: 100%;
	display: flex;
	align-items: center;
	gap: .3rem;
}

#name-input {
	width: 100%;
}

.control-label {
	color: var(--font80);
  
	font-size: 1.05rem;
	font-family: var(--bodyfont);
	letter-spacing: 0.01rem;
	word-spacing: 0.06rem;
}

.inputfield {
	margin-top: 0.25rem;

	border-style: none;
	border-radius: 1rem;
	background-color: var(--surface-colour-four);
	padding: .25rem 1rem;

	font-size: 1.05rem;
	font-family: var(--bodyfont);
	letter-spacing: 0.01rem;
	word-spacing: 0.06rem;
}

.inputfield:focus {
	box-shadow: 0 0 .4rem .1rem rgba(126,71,209,0.75);	
	outline: none;
}








@media (max-width: 600px) {
.contentcontainer {
	width: 90%;
}

.interestcontainer {
	min-width: 20rem;
}

.interesttitle {
	text-align: center;
}



}