:root {
	--global-font: "Be Vietnam Pro", system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;


	/*							LIGHT MODE
     * ===========================================================
     * Colour pallete used for VOT website (Light Mode). In order:
     *  + Red
     *  + Orange
     *  + Black
     *  + Pure white
     */


	/* Static colour pallete [Light mode] */
	--light-primary-colour: hsl(var(--light-primary-colour-hue) var(--light-primary-colour-saturation) var(--light-primary-colour-lightness) / var(--light-primary-colour-alpha));
	--light-secondary-colour: hsl(var(--light-secondary-colour-hue) var(--light-secondary-colour-saturation) var(--light-secondary-colour-lightness) / var(--light-secondary-colour-alpha));
	--light-accent-colour: hsl(var(--light-accent-colour-hue) var(--light-accent-colour-saturation) var(--light-accent-colour-lightness) / var(--light-accent-colour-alpha));
	--light-background-colour: hsl(var(--light-background-colour-hue) var(--light-background-colour-saturation) var(--light-background-colour-lightness) / var(--light-background-colour-alpha));
	--light-navigation-colour: hsl(var(--light-navigation-colour-hue) var(--light-navigation-colour-saturation) var(--light-navigation-colour-lightness) / var(--light-navigation-colour-alpha));


	/* Dynamic colour pallete [Light Mode] */
	--light-primary-colour-hue: 0;
	--light-primary-colour-saturation: 100%;
	--light-primary-colour-lightness: 53.9%;
	--light-primary-colour-alpha: 1.0;

	--light-secondary-colour-hue: 25;
	--light-secondary-colour-saturation: 100%;
	--light-secondary-colour-lightness: 40%;
	--light-secondary-colour-alpha: 1.0;

	--light-accent-colour-hue: 0;
	--light-accent-colour-saturation: 0%;
	--light-accent-colour-lightness: 0%;
	--light-accent-colour-alpha: 1.0;

	--light-background-colour-hue: 0;
	--light-background-colour-saturation: 0%;
	--light-background-colour-lightness: 100%;
	--light-background-colour-alpha: 1.0;

	--light-navigation-colour-hue: 0;
	--light-navigation-colour-saturation: 0%;
	--light-navigation-colour-lightness: 5.5%;
	--light-navigation-colour-alpha: 1.0;


	/*                          DARK MODE
     * ==========================================================
     * Colour pallete used for VOT website (Dark Mode). In order:
     *  + Slightly desaturated red
     *  + Slightly desaturated orange
     *  + Slightly desaturated white
     *  + Slightly desaturated black
     */


	/* Static colour pallete [Dark mode] */
	--dark-primary-colour: hsl(var(--dark-primary-colour-hue) var(--dark-primary-colour-saturation) var(--dark-primary-colour-lightness) / var(--dark-primary-colour-alpha));
	--dark-secondary-colour: hsl(var(--dark-secondary-colour-hue) var(--dark-secondary-colour-saturation) var(--dark-secondary-colour-lightness) / var(--dark-secondary-colour-alpha));
	--dark-accent-colour: hsl(var(--dark-accent-colour-hue) var(--dark-accent-colour-saturation) var(--dark-accent-colour-lightness) / var(--dark-accent-colour-alpha));
	--dark-background-colour: hsl(var(--dark-background-colour-hue) var(--dark-background-colour-saturation) var(--dark-background-colour-lightness) / var(--dark-background-colour-alpha));
	--dark-navigation-colour: hsl(var(--dark-navigation-colour-hue) var(--dark-navigation-colour-saturation) var(--dark-navigation-colour-lightness) / var(--dark-navigation-colour-alpha));


	/* Dynamic colour pallete [Dark mode] */
	--dark-primary-colour-hue: 0;
	--dark-primary-colour-saturation: 100%;
	--dark-primary-colour-lightness: 53.9%;
	--dark-primary-colour-alpha: 0.8;

	--dark-secondary-colour-hue: 25;
	--dark-secondary-colour-saturation: 100%;
	--dark-secondary-colour-lightness: 40%;
	--dark-secondary-colour-alpha: 0.8;

	--dark-accent-colour-hue: 0;
	--dark-accent-colour-saturation: 0%;
	--dark-accent-colour-lightness: 100%;
	--dark-accent-colour-alpha: 0.8;

	--dark-background-colour-hue: 0;
	--dark-background-colour-saturation: 0%;
	--dark-background-colour-lightness: 0%;
	--dark-background-colour-alpha: 0.8;

	--dark-navigation-colour-hue: 0;
	--dark-navigation-colour-saturation: 0%;
	--dark-navigation-colour-lightness: 3.5%;
	--dark-navigation-colour-alpha: 0.8;
}



/*
 *======================================*
 * NAVIGATION BAR GLOBAL CONFIGURATION  *
 *======================================*
 */



/* Navigation Bar (General section) [General] */
body nav {
	position: fixed;
	width: 5rem;
	min-height: 100vh;
	transition: all 0.325s linear;
}

body nav~section.home-page,
body nav~section.archive-page,
body nav~section.archive-vot-page,
body nav~section.staff-page,
body nav~section.staff-vot-page,
body nav~section.custom-song-page,
body nav~section.custom-song-vot-page,
body nav~section.vot1-page,
body nav~section.vot2-page,
body nav~section.vot3-page,
body nav~section.vot4-page,
body nav~section.vot4-mappool,
body nav~section.vot4-staff {
	padding-left: 5.75rem;
	transition: padding-left 0.325s;
}


/* Navigation Bar (Top section) [General] */
body nav div.top-navigation-section {
	display: flex;
	justify-content: center;
	padding: 1rem 0;
	/* Safari compatability. */
	-webkit-user-select: none;
	/* Others broswer compatability. */
	user-select: none;
}

body nav div.top-navigation-section i#collapsible-icon {
	position: inherit;
	font-size: 1.175rem;
	transition: padding-left 0.325s;
	cursor: pointer;
}

body nav div.top-navigation-section i#expandable-title strong {
	font-weight: bold;
}


/* Navigation Bar (First middle section) [General] */
body nav div.middle-navigation-first-section {
	display: flex;
	flex-direction: column;
	align-items: center;
}

body nav div.middle-navigation-first-section img.user-image {
	width: 3.25rem;
	height: auto;
	border-radius: 2rem;
}

/* For authenticated user image layout */
body nav div.middle-navigation-first-section a {
	display: flex;
	flex-direction: column;
	align-items: center;
}

body nav div.middle-navigation-first-section a img.user-image {
	width: 3.25rem;
	height: auto;
	border-radius: 2rem;
}

body nav div.middle-navigation-first-section p {
	font-weight: 600;
	text-align: center;
	padding-top: 1rem;
	opacity: 0;
	transition: word-wrap 0.325s, opacity 0.325s;
}


/* Navigation Bar (Second middle section) [General] */
body nav div.middle-navigation-second-section {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 1.5rem 0rem;
}

body nav div.middle-navigation-second-section ul {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: stretch;
}

body nav div.middle-navigation-second-section ul li {
	/* TODO: 3.25rem spacing on 16:10 resolution */
	margin: 1.25rem 0;
}

body nav div.middle-navigation-second-section ul li a {
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
	padding: 0.75rem;
	border-radius: 4rem;
	transition: background 0.325s, padding 0.325s;
}


/* Navigation Bar (Bottom section) [General] */
body nav div.bottom-navigation-section {
	margin-top: 4.5rem;
}

body nav div.bottom-navigation-section div.vot-theme-tray {
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
	border-radius: 1.25rem;
}



/*
 *=============================
 * OTHER GLOBAL CONFIGURATION
 *=============================
 */



body {
	display: flex;
	flex-direction: column;
	transition: background-color 0.325s, color 0.325s;
}


/* PAGES THAT USE <header> TAG [Global] */
body header h1 {
	display: flex;
	justify-content: center;
	font-weight: bold;
	font-size: 1.75rem;
	margin: 1.5rem 0;
}

/* TODO: may need to delete these and do a more reasonable styling approach [START]. */

/* BOX OF CONTENTS FORMAT FOR SPECIFIC PAGES [Global] */
body section div.announcement-box,
body section div.lower-general-information-box {
	margin: 1.5rem;
	border-radius: 1.5rem;
}

body section div.announcement-box h2,
body section div.lower-general-information-box h2 {
	display: flex;
	justify-content: center;
	font-weight: bold;
	padding: 1rem 0;
}

body section div.announcement-box p,
body section div.lower-general-information-box ul li {
	font-size: 1rem;
	font-weight: 500;
	padding-left: .5rem;
	padding-bottom: 1rem;
}

body section div.announcement-box img {
	position: relative;
	width: 100%;
	height: auto;
	padding: .75rem 0;
}

body section div.announcement-box div.youtube-iframe-container {
	display: flex;
	justify-content: center;
	position: relative;
	width: 100%;
	height: auto;
	padding-bottom: 56.25%;
	overflow: hidden;
}

body section div.announcement-box div.youtube-iframe-container iframe {
	position: absolute;
	width: 95%;
	height: 95%;
	overflow: hidden;
}

/* TODO: may need to delete these and do a more reasonable styling approach [END]. */


/* PAGES THAT USE <a> TAG [Global] */
body section.archive-page div.vot-center-button-container,
body section.archive-vot-page div.vot-center-button-container,
body section.vot1-page div.vot-center-button-container,
body section.vot2-page div.vot-center-button-container,
body section.vot3-page div.vot-center-button-container,
body section.vot4-page div.vot-center-button-container,
body section.vot5-page div.vot-center-button-container,
body section.staff-page div.vot-center-button-container,
body section.staff-vot-page div.vot-center-button-container,
body section.custom-song-page div.vot-center-button-container,
body section.setting-page div.vot-center-button-container,
body section.admin-setting-page div.vot-center-button-container,
body section.staff-setting-page div.vot-center-button-container,
body section.user-setting-page div.vot-center-button-container {
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
	flex-wrap: wrap;
}

body section.archive-page div.vot-center-button-container a,
body section.archive-vot-page div.vot-center-button-container a,
body section.vot1-page div.vot-center-button-container a,
body section.vot2-page div.vot-center-button-container a,
body section.vot3-page div.vot-center-button-container a,
body section.vot4-page div.vot-center-button-container a,
body section.vot5-page div.vot-center-button-container a,
body section.staff-page div.vot-center-button-container a,
body section.staff-vot-page div.vot-center-button-container a,
body section.custom-song-page div.vot-center-button-container a,
body section.setting-page div.vot-center-button-container a,
body section.admin-setting-page div.vot-center-button-container a,
body section.staff-setting-page div.vot-center-button-container a,
body section.user-setting-page div.vot-center-button-container a {
	padding: 1rem;
	font-weight: bold;
	border-radius: 1.5rem;
	border-style: none;
	margin: 0rem 0.5rem 1.5rem 0rem;
	font-size: 0.85rem;
}


/* PAGES THAT USE <button> TAG [Global] */
body section.vot4-mappool form,
body section.vot5-mappool form,
body section.vot4-staff form,
body section.custom-song-vot-page form {
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	flex-wrap: wrap;
}

body section.vot4-mappool form button,
body section.vot5-mappool form button,
body section.vot4-staff form button,
body section.custom-song-vot-page form button {
	padding: 1rem;
	font-weight: bold;
	border-radius: 1.5rem;
	border-style: none;
	margin: 0rem 1rem 1.5rem 0rem;
	font-size: 0.85rem;
}


/* PAGES THAT USE BOX UI STYLE [Global] */
body section.vot4-mappool div.box-container,
body section.vot5-mappool div.box-container,
body section.custom-song-vot-page div.box-container {
	display: flex;
	flex-direction: column;
	margin-bottom: 2rem;
	background-color: lightblue;
	width: 50%;
	border-radius: 1.5rem;
}

body section.vot4-staff div.box-container {
	display: flex;
	flex-direction: column;
	margin-bottom: 2rem;
	background-color: lightblue;
	width: 25%;
	border-radius: 1.5rem;
}

body section.vot4-mappool div.box-container div.song-type,
body section.vot4-mappool div.box-container div.song-image,
body section.vot4-mappool div.box-container div.song-name,
body section.vot4-mappool div.box-container div.song-feature-artist,
body section.vot4-mappool div.box-container div.song-mapper,
body section.vot5-mappool div.box-container div.song-type,
body section.vot5-mappool div.box-container div.song-image,
body section.vot5-mappool div.box-container div.song-name,
body section.vot5-mappool div.box-container div.song-feature-artist,
body section.vot5-mappool div.box-container div.song-mapper {

	display: flex;
	flex-direction: row;
	justify-content: center;
	padding: 0.5rem 0rem;
}

body section.vot4-mappool div.box-container div.song-attributes,
body section.vot5-mappool div.box-container div.song-attributes {
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	padding: 0.5rem 0rem;
}

body section.vot4-mappool div.box-container div.song-image a img,
body section.vot5-mappool div.box-container div.song-image a img {
	width: 100%;
	height: auto;
}

body section.vot4-mappool div.box-container div.song-type h1,
body section.vot4-mappool div.box-container div.song-name h2,
body section.vot4-mappool div.box-container div.song-feature-artist h3,
body section.vot4-mappool div.box-container div.song-mapper h4,
body section.vot5-mappool div.box-container div.song-type h1,
body section.vot5-mappool div.box-container div.song-name h2,
body section.vot5-mappool div.box-container div.song-feature-artist h3,
body section.vot5-mappool div.box-container div.song-mapper h4 {

	font-weight: bold;
	font-size: 1.025rem;
}

body section.vot4-mappool div.box-container div.song-attributes div.song-star-rating,
body section.vot4-mappool div.box-container div.song-attributes div.song-length,
body section.vot4-mappool div.box-container div.song-attributes div.song-speed,
body section.vot4-mappool div.box-container div.song-attributes div.song-od,
body section.vot4-mappool div.box-container div.song-attributes div.song-hp,
body section.vot4-mappool div.box-container div.song-attributes div.song-pass,
body section.vot5-mappool div.box-container div.song-attributes div.song-star-rating,
body section.vot5-mappool div.box-container div.song-attributes div.song-length,
body section.vot5-mappool div.box-container div.song-attributes div.song-speed,
body section.vot5-mappool div.box-container div.song-attributes div.song-od,
body section.vot5-mappool div.box-container div.song-attributes div.song-hp,
body section.vot5-mappool div.box-container div.song-attributes div.song-pass {

	display: flex;
	flex-direction: row;
}

body section.vot4-mappool div.box-container div.song-attributes div.song-star-rating p,
body section.vot4-mappool div.box-container div.song-attributes div.song-length p,
body section.vot4-mappool div.box-container div.song-attributes div.song-speed p,
body section.vot4-mappool div.box-container div.song-attributes div.song-od p,
body section.vot4-mappool div.box-container div.song-attributes div.song-hp p,
body section.vot4-mappool div.box-container div.song-attributes div.song-pass p,
body section.vot5-mappool div.box-container div.song-attributes div.song-star-rating p,
body section.vot5-mappool div.box-container div.song-attributes div.song-length p,
body section.vot5-mappool div.box-container div.song-attributes div.song-speed p,
body section.vot5-mappool div.box-container div.song-attributes div.song-od p,
body section.vot5-mappool div.box-container div.song-attributes div.song-hp p,
body section.vot5-mappool div.box-container div.song-attributes div.song-pass p {

	padding: 0rem 0.25rem;
	font-weight: bold;
	font-size: 1.025rem;
}

body section.vot4-staff div.box-container div.staff-header {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}

body section.custom-song-vot-page div.box-container div.custom-song-header {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

body section.vot4-staff div.box-container div.staff-header div.staff-name,
body section.vot4-staff div.box-container div.staff-header div.staff-flag,
body section.custom-song-vot-page div.box-container div.custom-song-header div.custom-song-tournament,
body section.custom-song-vot-page div.box-container div.custom-song-header div.custom-song-round,
body section.custom-song-vot-page div.box-container div.custom-song-header div.custom-song-type {
	display: flex;
	flex-direction: row;
	padding: 0.5rem 0.25rem 0rem 0.25rem;
}

body section.vot4-staff div.box-container div.staff-header div.staff-name h1,
body section.custom-song-vot-page div.box-container div.custom-song-header div.custom-song-tournament h1,
body section.custom-song-vot-page div.box-container div.custom-song-header div.custom-song-round h1,
body section.custom-song-vot-page div.box-container div.custom-song-header div.custom-song-type h1 {
	font-weight: bold;
	font-size: 1.025rem;
}


body section.vot4-staff div.box-container div.staff-header div.staff-flag img {
	/* Although we have set 'center' value to it, it looks not too centered for me at all */
	padding-bottom: 0.25rem;
}

body section.vot4-staff div.box-container div.staff-body,
body section.custom-song-vot-page div.box-container div.custom-song-body {
	display: flex;
	flex-direction: row;
	justify-content: center;
}

body section.vot4-staff div.box-container div.staff-body div.staff-image,
body section.custom-song-vot-page div.box-container div.custom-song-body div.custom-song-image {
	display: flex;
	flex-direction: column;
	/* Use all available spaces of 1st <div> */
	flex-grow: 1;
	padding: 0.5rem 0;
}

body section.vot4-staff div.box-container div.staff-body div.staff-image a img,
body section.custom-song-vot-page div.box-container div.custom-song-body div.custom-song-image a img {
	width: 100%;
	height: auto;
}

body section.vot4-staff div.box-container div.staff-footer,
body section.custom-song-vot-page div.box-container div.custom-song-footer {
	display: flex;
	flex-direction: column;
	align-items: center;
}

body section.vot4-staff div.box-container div.staff-footer div.staff-role,
body section.vot4-staff div.box-container div.staff-footer div.staff-rank,
body section.vot4-staff div.box-container div.staff-footer div.staff-time-zone,
body section.custom-song-vot-page div.box-container div.custom-song-footer div.custom-song-name,
body section.custom-song-vot-page div.box-container div.custom-song-footer div.custom-song-feature-artist,
body section.custom-song-vot-page div.box-container div.custom-song-footer div.custom-song-mapper,
body section.custom-song-vot-page div.box-container div.custom-song-footer div.custom-song-attributes {
	display: flex;
	flex-direction: row;
	padding: 0rem 0.25rem 0.5rem 0.25rem;
}

body section.custom-song-vot-page div.box-container div.custom-song-footer div.custom-song-attributes div.custom-song-star-rating,
body section.custom-song-vot-page div.box-container div.custom-song-footer div.custom-song-attributes div.custom-song-length,
body section.custom-song-vot-page div.box-container div.custom-song-footer div.custom-song-attributes div.custom-song-speed,
body section.custom-song-vot-page div.box-container div.custom-song-footer div.custom-song-attributes div.custom-song-od,
body section.custom-song-vot-page div.box-container div.custom-song-footer div.custom-song-attributes div.custom-song-hp {
	display: flex;
	flex-direction: row;
	padding: 0rem 1.5rem;
}

body section.vot4-staff div.box-container div.staff-footer div.staff-role h2,
body section.vot4-staff div.box-container div.staff-footer div.staff-rank h2,
body section.vot4-staff div.box-container div.staff-footer div.staff-time-zone h2,
body section.custom-song-vot-page div.box-container div.custom-song-footer div.custom-song-name h2,
body section.custom-song-vot-page div.box-container div.custom-song-footer div.custom-song-feature-artist h3,
body section.custom-song-vot-page div.box-container div.custom-song-footer div.custom-song-mapper h4,
body section.custom-song-vot-page div.box-container div.custom-song-footer div.custom-song-attributes div.custom-song-star-rating p,
body section.custom-song-vot-page div.box-container div.custom-song-footer div.custom-song-attributes div.custom-song-length p,
body section.custom-song-vot-page div.box-container div.custom-song-footer div.custom-song-attributes div.custom-song-speed p,
body section.custom-song-vot-page div.box-container div.custom-song-footer div.custom-song-attributes div.custom-song-od p,
body section.custom-song-vot-page div.box-container div.custom-song-footer div.custom-song-attributes div.custom-song-hp p {
	font-weight: bold;
	font-size: 1.025rem;
}


/* PAGES THAT USE CONTROL PANEL STYLE [Global] */
body section.admin-setting-page div.admin-add-role-panel,
body section.admin-setting-page div.admin-view-data-panel,
body section.tournament-setting-page div.tournament-add-mappool-panel,
body section.tournament-setting-page div.tournament-view-data-panel {
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	margin-top: 1rem;
}