/* Dorkinians Stat Page styling */

/* The css styling used for the Dorkinians Stat page. */

/* File Layout */

/* Section 1. Top level rules.
	1.1. All root variables.
	1.2. HTML rules.
	1.3. * rules.
	1.4. body rules.
Section 2. All general rules.
	2.1. Text styling.
	2.2  Table styling.
	2.3  Dropdown styling.
Section 3. Page layout (header/footer) specific rules.
Section 4. Tab layout rules.
Section 5. Media Queries
	5.1. Scaling rules.
	5.2. Dark mode rules. */

/* CSS Best Coding Practice
	https://github.com/bangsluke/bangsluke.github.io/blob/main/README.md#css-best-coding-practice
*/

/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------

Section 1

---------------------------------------------------------------------------------------------------------------------------------------------------------------- */

/* :root is a pseudo-class selector that matches the root element of the document, usually the html element. By creating your variables in :root, they will be available globally and can be accessed from any other selector in the style sheet.*/
:root {
  /* CSS variables - Add variables below like the given example. */

  /* Colours - These are dynamically modified using JS */
  --main-background-colour: #1c8841;
  --secondary-background-colour: #31a057;
  --third-background-colour: #236f38;
  --main-accent-colour: #f9ed32;
  /* --main-accent-colour: #3bee0e; */
  --main-accent-colour-rgb: 249, 237, 50;
  --secondary-accent-colour: #ffffff;
  /* --tooltip-background-colour: #236f38; */
  --tooltip-background-colour: #cbecd5;
  /* Background of tooltip matches IOS inbuilt components. */

  /* Light Theme Colours Used */
  /* --main-background-colour: #1C8841; Main Dorkinians green.
	--secondary-background-colour: #31a057;
	--third-background-colour: #236f38;
	--main-accent-colour: #F9ED32; Main Dorkinians yellow.
	--main-accent-colour-rgb: 249, 237, 50;
	--secondary-accent-colour: #ffffff; */

  /* Dark Theme Colours Used */
  /* --main-background-colour: #222129;
	--secondary-background-colour: #252432;
	--third-background-colour: #282735;
	--main-accent-colour: #FF3CAC;
	--main-accent-colour-rgb: 255, 60, 172;
	--secondary-accent-colour: #ffffff85; */

  /* Distances & Spacing */
  --headerHeight: 3.2rem;
  /* Define the header height variable. */
  --footerHeight: 3.75rem;
  /* Define the footer height variable. */
  --pagewidth: 95%;
  /* Used for controlling the width of items on each page */
  --section-border-radius: 0.5rem;
  /* Used for the border radii on the sections and large components. */
  --component-border-radius: 0.2rem;
  /* Used for the border radii on the sections and large components. */

  /* Font Size */
  --main-font-size: 16px;
  /* Define the html font size used for re-sizing. */
  --component-font-size: 12px;
  /* Define the font size used in components. */
  --information-bar-text-size: 0.7rem;
  /* Used for the information bar at the top of each page. */

  /* Snap Tabs */
  --snap-tab-header-height: 2.5rem;
  /* Controls the height of the snap tab header section. */
  /* --ChromeSafari-bottom-bar-height: 4.0rem; /* Previous estimate. */
  /*--ChromeSafari-bottom-bar-height: 64px; /* Add an estimated height of the bar along the bottom of the Chrome/Safari mobile browser that limits the screen size. */
  --indicator-size: 0.125rem;
  /* Used in the snap-indicator class later on. */
  --vertical-space: 0.6rem;
  /* Controls the vertical space around the anchor text and for the article text. */
  --horizontal-space: 1.2rem;
  /* Controls the horizontal space around the anchor text and for the article text. */
  /* --snap-tabs-hue: 328deg; */
  /* Previously pink colour for Group Page. */
  --snap-tabs-hue: 70deg;
  /* Changed to be yellow for bottom nav bar underlining. */
  --snap-tabs-hue: 20deg;
  /* Changed to be yellow for bottom nav bar underlining. */

  /* Dropdown Component */
  --dropdown-component-background: #cbecd5;
  /* Background of dropdown matches IOS inbuilt dropdown component. */
  --dropdown-component-accent: #9dcaab;
  /* Accent of dropdown matches IOS inbuilt dropdown component. */
  --dropdown-component-border-radius: 14px;
  /* Corner radius of dropdown matches IOS inbuilt dropdown component. */
  --dropdown-component-header-height: 2.5rem;
  /* The height of the header section of the custom built dropdown component. */
}

/* HTML updates to cover the full webpage. */
html {
  /* Note that background is controlled by theme, so look at the CSS theme sheets. */
  background-size: cover;
  background-attachment: fixed;
  /* https://stackoverflow.com/questions/19363978/how-to-use-100-css-background-image-with-scrolling-content */
  background-image: linear-gradient(67deg,
      var(--third-background-colour) 5%,
      var(--secondary-background-colour) 42%,
      var(--main-background-colour) 74%);

  height: max-content;
  scroll-behavior: smooth;
  /* Smooth the scrolling function of any internal hyperlinks. */
  block-size: 100%;
  inline-size: 100%;
  overflow-y: scroll;
  font-family: "Roboto", sans-serif;
  /* Specify the main body font family to be used across the site. */
  font-size: 16px;
  font-size: var(--main-font-size,
      16px);
  /* Add a top level font size that all other CSS is relative to. */
  line-height: 125%;
  /* Specify an increased line height to be used across the site to make it feel more spacious. */

  /* DELETE IF MAJOR ISSUES */
  block-size: 100%;
  inline-size: 100%;
}

/* Remove all margin and padding from full page. Turn off if you want to see sizing colours for between devices. https://www.youtube.com/watch?v=FTlczfR82mQ&ab_channel=DevEd */
* {
  box-sizing: border-box;
  margin: 0rem;
  padding: 0rem;
  max-width: 100%;
  /* https://uxplanet.org/10-lifesaving-html-css-tricks-for-designers-11bbf76729eb */
  /* overflow-x: hidden;  overflow-y: hidden;  position: relative; */
  /* display: block; */
}

/* Generic body class for all HTML pages using this CSS format. */
body {
  top: 0rem;
  left: 0rem;
  height: max-content;
  /* Note: adding height: 100vh; causes issues on pages that are taller than the viewheight. */
  min-block-size: 100%;
  min-inline-size: 100%;
  margin: 0rem;
  padding: 0rem;
  /* https://uxplanet.org/10-lifesaving-html-css-tricks-for-designers-11bbf76729eb */
  max-width: 100%;
  overflow-x: hidden;
  position: relative;
}

/* Main content styling. Houses all page content below the header. */
#main-content-area {
  /* background-color: violet; */
  top: 0rem;
  left: 0rem;
  width: 100%;
  height: max-content;
}

/* Page section styling. Add a lighter opacity rounded edges container. */
.page-section {
  /*margin-top: 3.125rem; /* Add an "offset" value for all content so that it sits below the fixed header. Note that 50 makes up for borders and paddings in the 2.8rem header. */
  /*margin-bottom: 3rem; /* Add an offset below each page section to sit it above the snap tabs selection bar. */

  top: 0rem;
  left: 0rem;
  width: var(--pagewidth, 98%);
  margin: 1rem auto;
  /* Add a small margin above and below each section and horizontally center the section. */
  padding: 1rem 0.5rem;
  /* Add internal padding to the page-section. */
  min-height: 35.5rem;
  /* Fallback if needed - 568 is the minimum device height available in the Chrome developer tools. */
  min-height: calc(100vh - var(--headerHeight, 2.8rem) - 0.5rem - var(--footerHeight, 3.75rem));
  /* 2.8rem header + 0.5rem padding + 3.75rem footer (https://stackoverflow.com/a/26090114/14290169) */
  min-height: -o-calc(100vh - var(--headerHeight, 2.8rem) - 0.5rem - var(--footerHeight, 3.75rem));
  /* Opera */
  min-height: -webkit-calc(100vh - var(--headerHeight, 2.8rem) - 0.5rem - var(--footerHeight, 3.75rem));
  /* Google, Safari */
  min-height: -moz-calc(100vh - var(--headerHeight, 2.8rem) - 0.5rem - var(--footerHeight, 3.75rem));
  /* Firefox */
  height: max-content;
  transition: margin-left 0.5s;
  overflow-x: hidden;
  /* max-width: 100%; */
  border-radius: var(--border-radius, 0.2rem);
  /* Add a border radius. */
  background: rgba(255, 255, 255, 0.1);
  /* background-color: rgba(var(--page-section-color-rgba), 0.9); */

  /* backdrop-filter: blur( 20px ); */
  /* -webkit-backdrop-filter: blur( 20px ); */
}

/* Sub page sections - multiple sections per tab. */
section {
  padding-bottom: 2rem;
  /* Add some space between sections defined on each tab. */
}

/* Add a background overlay for closing other menus. */
.background-overlay {
  /* background: rgba(0, 0, 0, 0.50); */
  position: fixed;
  /* The position has to be set for zindex to work. */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
  z-index: 5;
  /* background-overlay */
}

/* Add a clear background class overlay. */
.background-overlay-clear {
  background: rgba(0, 0, 0, 0);
}

/* Add a dark background class overlay. */
.background-overlay-dark {
  background: rgba(0, 0, 0, 0.5);
}

/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------

Section 2

---------------------------------------------------------------------------------------------------------------------------------------------------------------- */

/* 1. Text styling. */

/* All Text */
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
th,
tr,
td,
q,
cite,
section,
article,
span,
ul,
li,
legend,
select,
option,
button {
  font-family: "Roboto", sans-serif;
  /* Specify the main body font family to be used across the site. */
}

/* Font Families */
/* Apply the 'Montserrat' header font style to all header elements. Note that Span is included as it's used in the header-component. */
h1,
h2,
h3,
h4,
h5,
h6,
span {
  font-family: "Montserrat", sans-serif;
}

/* Apply the 'Roboto' body font style to all body elements. */
p,
a,
th,
tr,
td,
q,
cite,
section,
article,
ul,
li,
legend,
select,
option,
button {
  font-family: "Roboto", sans-serif;
}

/* Define the sizes and other styles to each individual text style. */
/* Used for top header text. */
h1 {
  /* font-size: 32px; Fallback value. */
  font-size: 1.6rem;
  /* Relative to root (html) value. */
  text-transform: uppercase;
  line-height: 90%;
  /* Specify an reduced line height to compress the home page h1 text. */
  color: var(--secondary-accent-colour, white);
}

/* Used for tab header text. */
h2 {
  font-size: 32px;
  /* Fallback value. */
  font-size: 1.4rem;
  /* Relative to root (html) value. */
  text-transform: uppercase;
  color: var(--main-accent-colour, yellow);
  padding-bottom: 1rem;
}

/* Used for sub section header text. */
h3 {
  font-size: 32px;
  /* Fallback value. */
  font-size: 1.2rem;
  /* Relative to root (html) value. */
  text-transform: uppercase;
  color: var(--secondary-accent-colour, white);
  padding-bottom: 1rem;
}

/* Used for text bulk on page. */
p {
  font-size: 14px;
  /* Fallback value. */
  font-size: 0.9rem;
  /* Relative to root (html) value. */
}

/* Used for hyperlinks across the site. */
a {
  font-size: 14px;
  /* Fallback value. */
  font-size: 0.9rem;
  /* Relative to root (html) value. */
  text-decoration: none;
  cursor: pointer;
}

/* Text Styles */
.underline {
  text-decoration: underline;
}

.textcenter {
  text-align: center !important;
}

.textleft {
  text-align: left !important;
}

.textright {
  text-align: right !important;
}

.bold {
  font-weight: bold !important;
}

.italic {
  font-style: oblique !important;
}

/* Create a class for yellow text. */
.yellowtext {
  color: var(--main-accent-colour, yellow) !important;
}

/* 2. Table classes */

/* All tables */
table {
  /* background-color: white; */
  color: var(--secondary-accent-colour, white);
  width: 100%;
  text-align: center;
  border: none;
  border-collapse: collapse;
  border-radius: var(--component-border-radius, 0.2rem);
  cursor: pointer;
  /* Turn the cursor into a pointer when over the table. */
  font-size: 14px;
  /* Fallback value. */
  font-size: 0.7rem;
  /* Relative to root (html) value. */
  /*overflow: hidden; /* Required for column highlighting. */
  /* For interior borders, look at the td class. */
  /* overflow: scroll; */
}

/* Used for table headers across the site. */
th {
  background-color: rgba(255, 255, 255, 0.1);
  background-color: var(--main-background-colour, green);
  box-shadow: inset 0rem 0rem 0rem var(--main-accent-colour, yellow),
    inset 0rem -0.25rem 0rem var(--main-accent-colour, yellow);
  /* Add a box-shadow as a bottom border so that it scrolls with the header. */
  font-style: bold;
  /* Make the header text bold */
  font-size: 14px;
  /* Fallback value. */
  font-size: 0.8rem;
  /* Relative to root (html) value. */
  text-align: center;
  /* By default, center all table text. */
  position: -webkit-sticky;
  /* Make the header row sticky position to lock it out - https://www.w3docs.com/snippets/html/how-to-create-a-table-with-a-fixed-header-and-scrollable-body.html. */
  position: sticky;
  /* Make the header row sticky position to lock it out. */
  top: 0rem;
  /* Make the header row sticky position to lock it out. */
  padding: var(--table-padding,
      0.2rem);
  /* Add padding within the header cell to give the table space. */
  height: 2rem;
}

/* Used for table rows across the site. */
tr {
  /* font-size: 14px; /* Fallback value. */
  /* font-size: 0.9rem; /* Relative to root (html) value. */
  color: var(--secondary-accent-colour, white);
}

/* Used for table cell text across the site. */
td {
  /* font-size: 14px; /* Fallback value. */
  /* font-size: 0.9rem; /* Relative to root (html) value. */
  text-align: center;
  /* By default, center all table text. */
  padding: var(--table-padding,
      0.2rem);
  /* Add padding within the cell to give the table space. */
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  /* Stop mobile browsers increasing the text size. (https://stackoverflow.com/a/5540312/14290169). */
  text-size-adjust: 100%;
  /* Stop mobile browsers increasing the text size. (https://stackoverflow.com/a/5540312/14290169). */
  -moz-text-size-adjust: 100%;
  /* Stop mobile browsers increasing the text size. (https://stackoverflow.com/a/5540312/14290169). */

}

/* Cell highlighting. */
td:hover {
  font-weight: bold;
  border: 0.1rem solid var(--secondary-accent-colour, white);
}

/* Add row highlighting. */
.column-highlight tr:hover {
  font: bold;
  background-color: var(--main-accent-colour,
      yellow);
  /* Fallback colour - no opacity. */
  background-color: rgba(var(--main-accent-colour-rgb),
      0.2);
  /* Same colour with opacity. */
  color: var(--secondary-accent-colour, white);
}

/* Add column highlighting (https://css-tricks.com/simple-css-row-column-highlighting/). */
td,
th {
  position: relative;
}

/* Column highlighting. Only on tables with class "column-highlight". */
.column-highlight td:hover::after,
.column-highlight th:hover::after {
  background-color: var(--main-accent-colour,
      yellow);
  /* Fallback colour - no opacity. */
  background-color: rgba(var(--main-accent-colour-rgb),
      0.2);
  /* Same colour with opacity. */
  color: var(--secondary-accent-colour, white);
  content: "";
  position: absolute;
  left: 0;
  top: -5000px;
  /* top: 0px; */
  height: 10000px;
  /* height: 100%; */
  width: 100%;
  z-index: -1;
  /* column-highlight */
}

/* Add table column lines. */
.table-column-lines {
  border-right-color: var(--main-accent-colour, yellow);
  border-right-style: solid;
  border-width: 0.1rem;
}

/* Add a border radius to all tables. (https://stackoverflow.com/a/4094151/14290169). */
tr:first-child th:first-child {
  border-top-left-radius: var(--component-border-radius, 0.2rem);
}

tr:first-child th:last-child {
  border-top-right-radius: var(--component-border-radius, 0.2rem);
}

tr:last-child td:first-child {
  border-bottom-left-radius: var(--component-border-radius, 0.2rem);
}

tr:last-child td:last-child {
  border-bottom-right-radius: var(--component-border-radius, 0.2rem);
}

/* Sticky column and row - https://stackoverflow.com/a/53526213/14290169 */
.table-wrapper {
  position: relative;
  overflow: auto;
  overflow-y: hidden;
  /* overflow: hidden; */
  white-space: nowrap;
  max-height: 50rem;
  /* Limit the height of table to allow the header row to be locked. */
}

.sticky-col {
  /* Add a sticky-col class that is applied to each table dynamically in JavaScript files. */
  background-color: var(--main-background-colour, green);
  position: -webkit-sticky;
  position: sticky;
  z-index: 1;
  /* sticky-col */
}

.first-col {
  /* Add a first-col class that is applied to each table dynamically in JavaScript files. */
  width: max-content;
  left: 0rem;
}

.first-cell {
  /* Add a first-cell class that is applied to each table dynamically in JavaScript files. */
  z-index: 2;
  /* first-cell. Keep the top left cell high enough to keep it at the top of the order for both x and y scrolling. */
  border-top-left-radius: var(--component-border-radius, 0.2rem);
}

/* Other classes and styles. */
.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* Add a hidden class for hiding components that are not yet ready or shouldn't be shown. */
.hidden {
  display: none !important;
}

/* Add a class to stop scrolling in certain divs. */
.noscroll {
  overflow: hidden;
}

/* Add an id for fading in an item over two seconds. */
.fadein {
  animation: fadein 2s ease forwards;
}

@keyframes fadein {
  from {
    display: none;
    opacity: 0;
  }

  to {
    display: block;
    opacity: 1;
  }
}

/* 3. Dropdown styling */

/* Add a top holder class for all common selection container styling. */
.selection-container {
  /* background-color: yellowgreen; */
  padding-bottom: 1rem;
  text-align: center;
  position: relative;
  /* The position has to be set for zindex to work. */
  margin: auto;
  height: max-content;
}

/* Common styling for new and old dropdown components. */
select {
  background-color: rgba(255, 255, 255, 0.1);
  font-size: var(--component-font-size,
      12px);
  /* Set the font size to be consistent for all components. */
}

/* Note that option is only used for old dropdown component and isn't compatible with the new dropdown component on mobile. */
option {
  color: black;
  /* The font colour of the text. */
  background-color: var(--dropdown-component-background,
      green);
  /* Background of dropdown matches iOS inbuilt dropdown component. */
  font-size: var(--component-font-size,
      12px);
  /* Set the font size to be consistent for all components. */
}

.selection-container option {
  background-color: var(--dropdown-component-background,
      green);
  /* Background of dropdown matches iOS inbuilt dropdown component. */
  /* background-color: red; */
  color: black;
}

select>option:hover,
select>option:focus {
  background-color: orange;
  /* Background of dropdown matches iOS inbuilt dropdown component. */
}

/* Old Dropdown Components - using the built in dropdown component. */

/* Add a class for all common selection dropdown styling. */
.selection-dropdown {
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--secondary-accent-colour, white);
  border: none;
  text-align: center;
  width: 20%;
  min-width: 9rem;
  height: 1.5rem;
  margin: auto;
  /* font-size: 0.8rem; /* Relative to root (html) value. */
  font-size: var(--component-font-size,
      12px);
  /* Set the font size to be consistent for all components. */
  cursor: pointer;
  /* Turn the cursor into a pointer when over the dropdown. */
  border-radius: var(--component-border-radius, 0.2rem);
}

.selection-dropdown:hover,
.selection-dropdown:focus {
  border: 2px solid var(--main-accent-colour, yellow);
}

/* New Dropdown Component - using the custom built dropdown component. */

/* Add a class for the button for all common selection dropdown styling. */
/* Style the dropdown button. */
.selection-dropdown-button {
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--secondary-accent-colour, white);
  border: none;
  text-align: center;
  width: 20%;
  min-width: 9rem;
  height: 1.5rem;
  margin: auto;
  /* font-size: 0.8rem; /* Relative to root (html) value. */
  font-size: var(--component-font-size,
      12px);
  /* Set the font size to be consistent for all components. */
  cursor: pointer;
  /* Turn the cursor into a pointer when over the dropdown. */
  border-radius: var(--component-border-radius, 0.2rem);
}

/* Dropdown button on hover & focus */
.selection-dropdown-button:hover,
.selection-dropdown-button:focus {
  background-color: rgba(255, 255, 255, 0.2);
  border: 2px solid var(--main-accent-colour, yellow);
}

/* Style the dropdown button downwards arrow. */
button>.selection-dropdown-arrow-icon {
  display: inline;
  /* Set the down arrow to be displayed alongside the text. */
}

/* Style the small white downwards arrow. */
.selection-dropdown-arrow-icon {
  height: 0.6rem;
  width: 0.6rem;
  filter: brightness(0) invert(1);
  /* Ensure the icon is white. */
  float: right;
  margin-right: 0.3rem;
  margin-top: 0.2rem;
}

/* Style the content once the button is clicked. */
/* Dropdown Content (Hidden by Default) */
.selection-dropdown-content {
  background-color: var(--main-background-colour, green);
  background-color: var(--dropdown-component-background,
      green);
  /* Background of dropdown matches iOS inbuilt dropdown component. */
  /* background-color: #490bf3; */
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  width: fit-content;
  width: -moz-fit-content;
  width: 14rem;
  /* Need a specific value to work */
  height: 15rem;
  min-height: 4rem;
  max-height: 20rem;
  border: none;
  border-radius: var(--component-border-radius, 0.2rem);
  border-radius: var(--dropdown-component-border-radius,
      0.2rem);
  /* Corner radius of dropdown matches iOS inbuilt dropdown component. */
  overflow-y: none;
  /* Disable vertical scroll in the main container. */
}

/* Style the hover over links. */
.selection-dropdown-content option:hover {
  background-color: rgba(255,
      255,
      255,
      0.1);
  /* Change color of dropdown links on hover. */
}

/* Style the header section of the dropdown content which holds the search icon and input text. */
.selection-dropdown-content-header-section {
  background-color: var(--main-background-colour,
      green);
  /* The background colour behind the text. */
  background-color: var(--dropdown-component-background,
      green);
  /* Background of dropdown matches iOS inbuilt dropdown component. */
  /* background-color: violet; */
  padding: 0.5rem;
  /* Add padding within the search header section for spacing. */
  border-bottom: 0.1rem solid var(--secondary-accent-colour, white);
  /* Add a border along the bottom. */
  border-bottom: 1px solid var(--dropdown-component-accent, black);
  /* Add a border along the bottom. */
  position: sticky;
  /* Sticky acts as static and becomes fixed when the top becomes 0. https://blog.webdevsimplified.com/2022-01/css-position/?fromNewsletter=true */
  top: 0;
  left: 0;
  width: 13.5rem;
  height: var(--dropdown-component-header-height,
      2.5rem);
  /* Set the height to be equal to the global variable. */
  min-height: var(--dropdown-component-header-height,
      2.5rem);
  /* Set the height to be equal to the global variable. */
  border-top-left-radius: var(--dropdown-component-border-radius,
      0.2rem);
  /* Corner radius of dropdown matches iOS inbuilt dropdown component. */
  border-top-right-radius: var(--dropdown-component-border-radius,
      0.2rem);
  /* Corner radius of dropdown matches iOS inbuilt dropdown component. */
}

/* Style the small search icon. */
.selection-dropdown-search-icon {
  height: 1rem;
  width: auto;
  /*filter: brightness(0) invert(1); /* Ensure the icon is white. */
  position: relative;
  margin-right: 0.2rem;
  /* Add a small margin to the right to push the icon away from the text field. */
  top: 0.2rem;
  /* Offset the height of the icon slightly to vertically align it with the text field. */
}

/* The search field */
.selection-dropdown-search-bar {
  width: 80%;
  position: relative;
  font-size: var(--component-font-size,
      12px);
  /* Set the font size to be consistent for all components. */
  padding: 0.2rem;
  /* Add some padding inside the search text field to make space. */
}

/* The search field when it gets focus/clicked on */
.selection-dropdown-search-bar:focus {
  outline: 3px solid var(--main-accent-colour, yellow);
}

/* Style the options section of the dropdown content which holds all of the loaded in options. */
.selection-dropdown-content-option-section {
  /* background-color: #ce641d; */
  position: relative;
  width: fit-content;
  width: -moz-fit-content;
  width: 14rem;
  height: calc(100% - var(--dropdown-component-header-height, 2.5rem) - 5%);
  /* Make the height of the content to be the full height of the component minus the header height and a small offset to stop the lines overlapping the border radii. */
  overflow-y: scroll;
  /* Enable vertical scroll in the options container. */
}

/* Style the dropdown menu items that appears when the user has clicked. */
/* .selection-dropdown-content-option-section > .selection-dropdown-option { */
.selection-dropdown-option {
  /*color: white; /* The font colour of the text. */
  color: black;
  /* The font colour of the text. */
  position: static;
  margin: auto;
  padding: 0.5rem;
  width: fit-content;
  width: -moz-fit-content;
  width: 14rem;
  height: 1.8rem;
  min-height: 1rem;
  max-height: 1.8rem;
  font-size: var(--component-font-size,
      12px);
  /* Set the font size to be consistent for all components. */
  border-bottom: 1px solid var(--dropdown-component-accent, black);
  /* Add a border along the bottom. */
}

/* 4. Information bar styling */

.information-bar {
  /* background-color: aqua; */
  width: 100%;
  text-align: center;
  font-size: var(--information-bar-text-size, 0.7rem);
  font-style: italic;
  margin-bottom: 1rem;
}

.information-bar a {
  /* background-color: aqua; */
  color: var(--main-accent-colour, yellow);
  width: 100%;
  text-align: center;
  font-size: var(--information-bar-text-size, 0.7rem);
  font-style: italic;
  margin-bottom: 1rem;
}

/* mouse over link */
.information-bar a:hover {
  color: var(--main-accent-colour, yellow);
  cursor: pointer;
  font-weight: bold;
}

/* unvisited link */
.information-bar a:link {
  color: var(--main-accent-colour, yellow);
}

/* visited link */
.information-bar a:visited {
  color: var(--main-accent-colour, yellow);
}


/* selected link */
.information-bar a:active {
  color: var(--main-accent-colour, yellow);
  font-weight: bold;
}

/* 5. Stats ToolTip styling */

/* For all of the below - see https://www.w3schools.com/css/css_tooltip.asp */
/* Stats Tooltip container */
.stats-tooltip {
  /* background-color: red; */
  position: relative;
  display: inline-block;
}

/* Tooltip text */
.stats-tooltip .stats-tooltip-text {
  /* background-color: blue; */
  background-color: var(--tooltip-background-colour, grey);
  visibility: hidden;
  /* Initially set the visibility as hidden. */
  /* min-width: 20rem; */
  width: 90%;
  min-height: 1rem;
  /* max-height: 30rem; */
  /* min-width: 150%; */
  /* overflow: visible; */
  padding: 0.5rem 0.5rem;
  /* Add interior padding to the tool tip. */
  border-radius: var(--component-border-radius,
      0.2rem);
  /* Add a border-radius to all tool tips. */
  /* Position the tooltip text below the text its explaining. */
  position: absolute;
  z-index: 1;
  /* stats-tooltip */
  bottom: 110%;
  /* Position above the container div. */
  left: 50%;
  /* Center align the tooltip across the page. */
  margin-left: -45%;
  /* Use half of the width, to center the tooltip */
  opacity: 0;
  /* This will make the tooltip text invisible when it's not being hovered on */
  transition: opacity 1s;
  /* Fade the tool in when hovered over. https://www.bitdegree.org/learn/css-tooltip */
}

/* Show the stats tooltip text when you mouse over the stats tooltip container */
.stats-tooltip:hover .stats-tooltip-text {
  visibility: visible;
  /* Change the visibility to visible when hovered on. */
  opacity: 1;
  /* Fade the tool in when hovered over. https://www.bitdegree.org/learn/css-tooltip */
}

/* Add a tool tip arrow. https://www.bitdegree.org/learn/css-tooltip. */
.stats-tooltip .stats-tooltip-text::after {
  content: " ";
  position: absolute;
  top: 100%;
  /* At the bottom of the tooltip */
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: var(--tooltip-background-colour, grey) transparent transparent transparent;
}

/* Style the text within the tooltip. */
.stats-tooltip-text {
  font-size: 12.8px;
  /* Fallback value. */
  font-size: 0.7rem;
  /* Relative to root (html) value. */
  text-transform: none;
  text-align: left;
  color: black;
}

/* 6. Icon Styling */

/* Create an icon class to apply to all icons across the site. */
.stat-icon {
  height: 20px;
  /* Fallback value. */
  height: 1.4rem;
  width: auto;
  padding-bottom: 0.2rem;
  /* Add space to the next icon below. */
}

/* Create a class to turn the icons white. */
.stat-icon.white {
  filter: brightness(0) invert(1);
  /* Ensure the icon is white. */
}

/* Create a class to turn the icons red. */
.stat-icon.red {
  -webkit-filter: invert(19%) sepia(94%) saturate(7013%) hue-rotate(358deg) brightness(97%) contrast(113%);
  /* Ensure the icon is red. https://stackoverflow.com/a/50942954/14290169. */
  filter: invert(19%) sepia(94%) saturate(7013%) hue-rotate(358deg) brightness(97%) contrast(113%);
  /* Ensure the icon is red. https://stackoverflow.com/a/50942954/14290169. */
}

/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------

Section 3

---------------------------------------------------------------------------------------------------------------------------------------------------------------- */

/* Everything below initially designed for mobile. */

header {
  background-color: var(--main-background-colour, green);
  height: var(--headerHeight);
  position: fixed;
  z-index: 5;
  /* Header. Position the header right at the front of most items. */
}

/* Header Section */
.header-area {
  /* background-color: violet; */
  position: fixed;
  width: 100%;
  display: grid;
  grid-template-columns: 4rem 1fr 4rem;
  grid-template-rows: var(--headerHeight, 2.5rem);
  /* Fallback if needed. */
  grid-template-rows: var(--headerHeight);
  /* Make the header a decent height. */
  gap: 0 0.3rem;
  /* First value is between rows, second columns. */
  grid-template-areas: "Logo Title Options";
  border-bottom: 0.125rem solid var(--secondary-accent-colour, white);
}

/* Style the Dorkinians logo in the top left corner. */
.logo-container {
  /* background-color: purple; */
  grid-area: Logo;
  padding: 0.3rem;
}

.logo {
  height: 2.5rem;
  /* Fallback if needed. */
  height: calc(var(--headerHeight) - 0.7rem);
  /* Make the burger icon just smaller than the header height. */
  width: auto;
}

/* Style the central title section. */
.title-container {
  /* background-color: red; */
  grid-area: Title;
  padding-top: 0.8rem;
}

/* Style the menu options button in the top right corner. */
.options-container {
  /* background-color: blue; */
  grid-area: Options;
  padding: 0.3rem;
}

#options-button {
  color: var(--secondary-accent-colour, white);
  /* filter: invert(1) hue-rotate(180deg); */
  top: 0rem;
  left: 0rem;
  height: 2.5rem;
  /* Fallback if needed. */
  height: calc(var(--headerHeight) - 0.7rem);
  /* Make the burger icon just smaller than the header height. */
  width: auto;
  display: block;
  font-size: 2.5rem;
  cursor: pointer;
  margin: 0rem;
  padding: 0rem;
}

#options-button:hover {
  color: var(--main-accent-colour, yellow);
}

/* Top Left Dorkinians Logo */

/* Add a rotation set up for the Dorkinians logo in the top left. */
.rotate {
  animation: rotation 3s;
}

.linear {
  animation-timing-function: linear;
}

.infinite {
  animation-iteration-count: infinite;
}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(359deg);
  }
}

/* Loading Page */

.loading-page {
  /* Change the below property on/off to hide/show the loading page. */
  /* display: none !important; */

  /* Note that background is controlled by theme, so look at the CSS theme sheets. */
  background-size: cover;
  /*background-attachment: fixed; /* https://stackoverflow.com/questions/19363978/how-to-use-100-css-background-image-with-scrolling-content */
  background-color: var(--main-background-colour, black);
  /* background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab); */
  /* background-image: linear-gradient(100deg, #f44b13 10%, #ce641d 25%, #490bf3 50%, var(--main-background-colour) 75%, #236f38 95%); */
  background-image: linear-gradient(120deg,
      #236f38 10%,
      var(--main-background-colour) 35%,
      #490bf3 50%,
      #ce641d 65%,
      #f44b13 90%);
  background-size: 250% 250%;
  animation: gradient 30s ease infinite;
  /* https://1stwebdesigner.com/15-css-background-effects/ */
  position: fixed;
  min-height: 100%;
  height: 100%;
  width: 100%;
  z-index: 100;
  /* loading-page */
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: 0.3fr 1fr 0.2fr 0.3fr 0.2fr 1fr;
  gap: 0 0;
  /* First value is between rows, second columns. */
  grid-template-areas:
    "TopSpace"
    "Logo"
    "Title"
    "Phrases"
    "Count";
}

@keyframes gradient {

  /* https://1stwebdesigner.com/15-css-background-effects/ */
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

.loading-page-container {
  /* background-color: lightgreen; */
  text-align: center;
  display: flex;
  /* Set up the container to allow vertical and horizontal alignment. https://www.freecodecamp.org/news/how-to-center-anything-with-css-align-a-div-text-and-more/ */
  align-items: center;
  /* Vertically align all child elements that sit within .loading-page-container */
  justify-content: center;
  /* Horizontally align all child elements that sit within .loading-page-container */
}

#loading-page-logo-container {
  /* background: red; */
  grid-area: Logo;
}

#dorkinians-logo-large {
  padding-top: 3rem;
  height: 15rem;
  width: auto;
}

#loading-page-title-container {
  /* background: purple; */
  padding-top: 1.5rem;
  grid-area: Title;
  color: var(--secondary-accent-colour, white);
  /* Colour of the text. */
}

#loading-page-loading-phrase-container {
  /* background: green; */
  grid-area: Phrases;
  color: var(--secondary-accent-colour, white);
  margin-top: 0rem;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  /* Vertically align all child elements that sit within .loading-page-container */
  height: 4rem;
  opacity: 1;
  transition: opacity 1s;
}

#loading-page-loading-counter-container {
  /* background: yellow; */
  grid-area: Count;
  color: var(--secondary-accent-colour, white);
  margin-top: 0rem;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  /* Vertically align all child elements that sit within .loading-page-container */
}

#loading-counter {
  margin: 0 auto;
  text-align: center;
}

/* Add a fadeout animation that fades the opacity of the background out and then sets the display to be none. */
.fadeout {
  opacity: 1;
  animation: maketransparent 1s linear;
}

@keyframes maketransparent {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    display: none !important;
  }
}

/* Snap tabs styling */
/* The css styling used for SnapTabs. https://web.dev/building-a-tabs-component/. */

.snap-tabs-container {
  /* background-color: green; */
  position: fixed;
  left: 0rem;
  padding-top: 0rem;
  width: 100%;

  /* Add the below if positioning snap-tabs at the top of the page. */
  top: var(--headerHeight,
      3.2rem);
  /* Offset the snap-tabs-container below the fixed header. */
  height: calc(100% - var(--headerHeight, 3.2rem));
  /* Make the height of the snap-tabs-container the full screen height minus the fixed header. */

  /* Add the below if positioning snap-tabs at the bottom of the page. */
  /* top: 0rem; */
  /*height: calc(100vh - var(--headerHeight, 2.8rem) - var(--ChromeSafari-bottom-bar-height, 5.6rem)); /* Calculate the height of the snap-tabs-container as the viewport height, minus the fixed header height and minus the Chrome/Safari browser bar height (estimated). */
  /*min-height: calc(100vh - var(--headerHeight, 2.8rem) - var(--ChromeSafari-bottom-bar-height, 5.6rem)); /* Same calculation as above. */

  /* Below is copied from body above. */
  box-sizing: border-box;
  display: grid;
  align-content: center;
  justify-content: center;
  place-content: center;
  /* font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif; */
  z-index: 2;
  /* snap-tabs-container */
  overflow: hidden;
}

/* Original (but modified) Snap Tabs CSS Styling. */
/* Specific snap-tabs styling with elements not used elsewhere on site. */
snap-tabs {
  --accent: var(--snap-tabs-hue) 100% 54%;
  --accent-reduced: var(--snap-tabs-hue) 90% 90%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

#snap-tabs-header-section {
  top: var(--headerHeight, 3.2rem);
  height: var(--snap-tab-header-height, 2.5rem);
  z-index: 5;
  /* snap-tabs-header-section. Position the snap tabs header right at the front of most items. */

  /* Hide the scrollbars within this section. https://blog.hubspot.com/website/hide-scrollbar-css */
  -ms-overflow-style: none;
  /* for Internet Explorer, Edge */
  scrollbar-width: none;
  /* for Firefox */
  overflow-x: scroll;
}

#snap-tabs-header-section::-webkit-scrollbar {
  /* Hide the scrollbars within this section. https://blog.hubspot.com/website/hide-scrollbar-css */
  display: none;
  /* for Chrome, Safari, and Opera */
}

snap-tabs>section {
  block-size: 100%;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
}

#snap-tabs-main-section {
  position: relative;

  /* Add the below if positioning snap-tabs at the top of the page. */
  padding-top: var(--snap-tab-header-height,
      3rem);
  /* Position the main content of the snap tabs below the snap tabs header. */

  /* Add the below if positioning snap-tabs at the bottom of the page. */
}

/* Add a section with class .scroll-snap-x. */
.scroll-snap-x {
  overflow-x: auto;
  overflow-y: hidden;
  overflow: auto hidden;
  overscroll-behavior-x: contain;
  -ms-scroll-snap-type: x mandatory;
  scroll-snap-type: x mandatory;
}

section.scroll-snap-x {
  padding-bottom: 0rem;
  /* Remove normal section bottom padding for this one snap tab case. */
}

@media (prefers-reduced-motion: no-preference) {
  .scroll-snap-x {
    scroll-behavior: smooth;
  }
}

@media (hover: none) {
  .scroll-snap-x {
    scrollbar-width: none;
  }

  .scroll-snap-x::-webkit-scrollbar {
    width: 0rem;
    height: 0rem;
  }
}

snap-tabs>section>article {
  /* background-color: blue; */
  scroll-snap-align: start;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  /* padding: var(--vertical-space) var(--horizontal-space); */
  padding: 0rem 0rem;
  /* Control the padding around the anchor hyperlink text. */
}

article {
  color: var(--secondary-accent-colour, white);
  box-sizing: border-box;
  font-size: 1rem;
  line-height: 1;
}

/* Control the snap-tabs-header section. Currently positioned at the bottom of the page. */
snap-tabs>snap-tabs-header {
  --text-active-color: var(--main-accent-colour, yellow);
  background-color: var(--main-background-colour, green);

  /* Add the below if positioning snap-tabs at the top of the page. */
  border-bottom: 0.125rem solid var(--main-accent-colour, yellow);

  /* Add the below if positioning snap-tabs at the bottom of the page. */
  /* top: calc(100vh - var(--headerHeight, 2.8rem) - var(--ChromeSafari-bottom-bar-height, 5.6rem)); /* Position the snap tabs header to sit just above the Chrome and Safari browser bottom section. */
  /* border-top: 0.125rem solid var(--main-accent-colour, yellow); */

  position: fixed;
  /* Fix the position of the snap-tabs-header to stop weird movement behaviour. */
  left: 0rem;
  /* Force the header section to the left. */
  width: 100vw;
  /* Set the width to be the full viewport width. */
  flex-shrink: 0;
  min-height: -moz-fit-content;
  /* For older versions of Safari and iOS */
  min-height: -webkit-fit-content;
  /* For Samsung Internet */
  min-height: -webkit-fill-available;
  /* For modern browsers */
  min-height: fit-content;
  display: flex;
  flex-direction: column;
}

snap-tabs>snap-tabs-header>nav {
  display: flex;
}

/* Format the hyperlinks within the snap tabs header section. */
snap-tabs>snap-tabs-header a {
  --text-color: var(--secondary-accent-colour,
      white);
  /* Need the variable --text-color as needed in the JavaScript. */
  /*--text-color: var(--accent-color-2, white); /* Need the variable --text-color as needed in the JavaScript. */
  color: var(--text-color,
      white);
  /* Change the colour of the non active snap tabs header links. */
  scroll-snap-align: start;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  font-size: 1rem;
  /* Make the snap-tabs-header hyperlinks larger than normal hyperlinks. */
  text-decoration: none;
  padding: var(--vertical-space) var(--horizontal-space);
}

/* Format the hyperlinks on hover within the snap tabs header section. */
snap-tabs>snap-tabs-header a:hover {
  background: hsl(var(--accent) / 10%);
  font-size: inherit;
}

/* Format the hyperlinks on focus within the snap tabs header section. */
snap-tabs>snap-tabs-header a:focus {
  outline-offset: -0.5ch;
  border-left: 0.125rem solid var(--main-accent-colour, yellow);
  border-right: 0.125rem solid var(--main-accent-colour, yellow);
}

/* The snap-indicator is the underline of the header text that appears on mobile. */
snap-tabs>snap-tabs-header>.snap-indicator {
  /* background: hsl(var(--accent)); */
  background: var(--main-accent-colour, yellow);
  inline-size: 0rem;
  block-size: var(--indicator-size);
  /* block-size: 3rem; */
  border-radius: var(--indicator-size);
  /* z-index: 5; */
}

@media (prefers-reduced-motion: reduce) {
  snap-tabs .snap-indicator {
    visibility: hidden;
  }
}

snap-tabs a,
snap-tabs article,
snap-tabs snap-tabs-header,
snap-tabs nav,
snap-tabs section {
  /* Note that color is controlled by theme, so look at the CSS theme sheets. */
  outline-color: hsl(var(--accent));
  outline-offset: -0.3rem;
}

h2 {
  /* font-size: 1.5rem; */
  -webkit-margin-after: 0.5rem;
  margin-block-end: 0.5rem;
  line-height: 1;
}

h2:first-of-type {
  -webkit-margin-before: 0rem;
  margin-block-start: 0rem;
}

p {
  max-inline-size: 35ch;
  margin-block: 0.5ch;
}

p+p {
  -webkit-margin-before: 1rem;
  margin-block-start: 1rem;
}

/* Pop Up Box */

#pop-up-box {
  /* Change the below property on/off to hide/show the pop up box. */
  display: none !important;

  background: var(--main-background-colour, green);

  /* Set the position of the box to be bang in the center of the screen. */
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 30;
  /* pop-up-box. Have the pop up in front of all other items on the page. */

  /* Control and set the size of the box based on the content. */
  min-height: 20%;
  /* At minimum, have the height at 20%. By default, this is the size of the box. */
  max-height: 60%;
  /* At maximum, have the height at 60%. */
  overflow: scroll;
  /* Allow the user to scroll through any displayed text that is too long. */
  width: var(--pagewidth, 95%);

  /* Style the pop up box. */
  border: 0.125rem solid var(--secondary-accent-colour, white);
  border-radius: var(--section-border-radius, 2rem);
  padding: 0.7rem;
  /* Add internal padding to the pop up box. */
}

/* The x close button. */
#pop-up-box #pop-up-box-close-button {
  position: absolute;
  top: 0.7rem;
  /* Offset the button from the top of the page. */
  right: 1.5rem;
  font-size: 2.25rem;
  margin-left: 3.125rem;
  padding: 0.2rem;
}

#pop-up-box-container {
  /* background: #490bf3; */
  height: 100%;
  width: 100%;
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: 1.5rem 1fr;
  gap: 0 0;
  /* First value is between rows, second columns. */
}

#pop-up-box-header-container {
  /* background: red; */
  height: 1.5rem;
}

#pop-up-box-header-container h3 {
  display: inline-block;
  line-height: normal;
  vertical-align: middle;
}

#pop-up-box-message-container {
  /* background: pink; */
  height: max-content;
  width: 100%;
  overflow-y: scroll;
}

#pop-up-box-message-text {
  max-inline-size: none;
  /* Remove some carry over p styling from the snap tabs to stop a weird word wrap. */
}

/* Style the text in the pop up box. */
#pop-up-box a,
h3,
p {
  color: var(--secondary-accent-colour, var(--secondary-accent-colour, white));
}

/* Set the initial pop up boxes to have display: none */

#background-overlay-pop-up-box {
  display: none;
}

#background-overlay-side-menu {
  display: none;
}

#background-overlay-totw-player-info {
  display: none;
}

#totw-player-info-box {
  display: none;
}

#background-overlay-selection-dropdown-player-stats {
  display: none;
}

#background-overlay-selection-dropdown-comparison {
  display: none;
}

/* Scroll Bar Styling - https://www.digitalocean.com/community/tutorials/css-scrollbars */
/* Works on Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.5) rgba(255, 255, 255, 0.1);
  /* scrollbar-color: blue orange; */
}

/* Works on Chrome, Edge, and Safari */
*::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

*::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  /* background: orange; */
  border-radius: 20px;
}

*::-webkit-scrollbar-thumb {
  /* background-color: blue; */
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 20px;
  /* border: 3px solid orange; */
}

/* SideMenu Component styling */

/* The css styling used for the side menu component. Side Menu is the full side menu that appears on click of the options icon. */

#side-menu {
  background: var(--main-background-colour, green);
  /* background-color: lightblue; */
  height: 100%;
  width: 0rem;
  /* Width of sideMenu is modified dynamically in sideMenu.js. */
  position: fixed;
  z-index: 20;
  /* Set the z index to be in front of other items. */
  top: 0rem;
  right: -0.1rem;
  /* Slightly position the side-menu off to the side to avoid seeing the border. */
  overflow-x: hidden;
  transition: 0.5s;
  /* padding-top: 3.75rem; */
  border-left: solid 0.125rem var(--main-accent-colour, yellow);
  display: inline;

  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: max-content max-content;
  gap: 0 0;
  /* First value is between rows, second columns. */
  grid-template-areas:
    "TopContainer"
    "MainContainer";
}

#side-menu-top-container {
  background: var(--main-background-colour, green);
  /* background-color: darkcyan; */
  grid-area: TopContainer;
  /*position: relative; /* Fix the top container section so that it doesn't scroll within the side menu. */

  position: sticky;
  /* Sticky acts as static and becomes fixed when the top becomes 0. https://blog.webdevsimplified.com/2022-01/css-position/?fromNewsletter=true */
  top: 0;
  left: 0;

  /* top: 0rem; /* Lock the container to the top of the side menu. */
  /* height: 6rem; */
  height: 100px;
  /* Try adding height in fixed pixels instead of REM to keep header always visible. */
  /* padding-top: 1rem; */
  padding-top: 12px;
  /* Try adding height in fixed pixels instead of REM to keep header always visible. */
  /*width: 80%; /* Set the width to be the same as the width of the open side menu. */
  width: 100%;
  display: flex;
  /* Add flex to the top level container. */
  flex-direction: column;
  align-items: center;
  /* Vertically center the div's inside the container. */
  z-index: 25;
  /* side-menu-top-container */
}

/* The x close button. */
#side-menu-top-container #side-menu-close-button {
  position: absolute;
  top: 0.7rem;
  /* Offset the button from the top of the page. */
  top: 8px;
  /* Try adding height in fixed pixels instead of REM to keep header always visible. */
  right: 1.5rem;
  font-size: 2.25rem;
  margin-left: 3.125rem;
  padding: 0.2rem;
}

#side-menu-close-button {
  text-decoration: none;
  z-index: 26;
  /* side-menu-close-button */
}

/* The side menu Dorkinians logo. */
#side-menu-dorkinians-logo {
  height: 80px;
  z-index: 26;
  /* side-menu-dorkinians-logo */
}

/* Container holds all of the smaller icon and text containers. */
#side-menu-main-container {
  background: rgba(255, 255, 255, 0.1);
  /* background-color: lightpink; */
  padding: 1rem 0.5rem;
  /* Add padding to the left and right of the links to offset them from the far left and right. */
  grid-area: MainContainer;
  position: relative;
  /*top: 7.5rem; /* Offset the main container below the top container. */
  display: flex;
  /* Add flex to the top level container. */
  flex-direction: column;
  align-items: center;
  /* Vertically center the div's inside the container. */
  justify-content: flex-start;
  /* Horizontally start the links at the far left of the menu. */
  height: max-content;
  width: 90%;
  overflow-y: scroll;
  margin: 0rem auto 5rem auto;
  /* Add an offset below the main container so all side menu options are available. */
  z-index: 1;
  /* side-menu-main-container */
  border-radius: var(--border-radius, 0.2rem);
  /* Add a border radius. */
  line-height: 1;
}

/* Style the text in the side menu. */
#side-menu h3 {
  color: var(--main-accent-colour, yellow);
}

#side-menu a,
h4,
p {
  color: var(--secondary-accent-colour, white);
  margin: auto 0rem;
  padding: 0rem;
}

#side-menu p {
  font-size: 0.8rem;
}

/* Style the header text in the side menu. */
.side-menu-section-header {
  text-align: center;
  text-decoration: none;
  display: block;
  transition: 0.3s;
  height: max-content;
  padding-bottom: 0.5rem;
  text-transform: uppercase;
  font-weight: 900;
  font-family: "Roboto", sans-serif;
  margin: 0rem;
  /* Remove all older margins from the main page styling. */
}

/* Style the hyperlinks. */
#side-menu a {
  display: block;
  transition: 0.3s;
  margin-bottom: 1.25rem;
  /* text-transform: uppercase; */
  font-weight: 900;
  font-family: "Roboto", sans-serif;
}

#side-menu a:hover {
  color: var(--main-accent-colour, yellow);
  cursor: pointer;
}

/* Style the buttons in the side-menu. */
.side-menu-button {
  background: transparent;
  /* Transparent background. */
  color: var(--secondary-accent-colour, white);
  margin: 0 0.5rem;
  border: 2px solid var(--main-accent-colour, yellow);
  border-radius: 6px;
  cursor: pointer;
  text-decoration: none;
  text-transform: uppercase;
  width: 2rem;
  position: relative;
}

.side-menu-button:hover {
  background-color: var(--main-accent-colour, yellow);
  color: var(--main-background-colour, green);
}

#side-menu-button-change-font-size-increment {
  margin-left: 0.5;
}

/* Style all side menu sections. */
.side-menu-section {
  width: 100%;
  padding: 1.5rem 0rem 0rem 0rem;
  /* Add padding at the top of each section. */
}

/* Add a container to hold each menu icon. */
.side-menu-icon-container {
  /* background-color: lightgreen; */
  height: 2rem;
  display: flex;
  align-content: center;
  justify-content: center;
}

/* Add styling for the icons in the side menu. */
.side-menu-icon {
  height: 2rem;
  filter: brightness(0) invert(1);
  margin: 0 0.8rem 0 0.2rem;
  /* Add a margin either side of the icons. */
}

/* Add a container to hold each menu text. */
.side-menu-text-container {
  /* background-color: blueviolet; */
  height: 2rem;
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-content: flex-start;
  padding: 0rem 0rem;
}

/* Style the site details section. */
#side-menu-site-details-section {
  /* background-color: red; */
  position: relative;
  width: 100%;
  height: max-content;
  padding: 0rem;
  margin: 0rem;
}

#side-menu-site-details-grid-section {
  /* background-color: purple; */
  display: grid;
  grid-template-columns: 1fr max-content;
  grid-template-rows: 1.5rem 1.5rem 1.5rem 1.5rem;
  gap: 0rem 0.2rem;
  /* First value is between rows, second columns. */
  justify-items: stretch;
  align-items: stretch;
  justify-content: stretch;
  align-content: stretch;
}

.side-menu-site-details-grid-container {
  height: 1.5rem;
  justify-self: start;
  align-self: start;
}

/* Style the actions section. */
#side-menu-actions-section {
  /* background-color: green; */
  position: relative;
  width: 100%;
}

#side-menu-actions-section-grid {
  display: grid;
  grid-template-columns: max-content 1fr;
  grid-template-rows: 2rem 2rem;
  gap: 0.5rem 0.2rem;
  /* First value is between rows, second columns. */
}

.side-menu-action-button-container {
  display: grid;
  grid-template-columns: 70% 15% 15%;
  grid-template-rows: 1fr;
}

/* Style the quick links section. */
#side-menu-quick-links-section {
  /* background-color: orange; */
  position: relative;
  width: 100%;
}

a>h4 {
  margin-top: 0.5rem;
}

#side-menu-quick-links-section-grid {
  display: grid;
  grid-template-columns: max-content 1fr;
  grid-template-rows: 2rem 2rem;
  gap: 0.5rem 0.2rem;
  /* First value is between rows, second columns. */
}

/* Style the additional section. */
#side-menu-additional-section {
  /* background-color: yellow; */
  position: relative;
  width: 100%;
}

.side-menu-additional-section-item-container {
  /* background-color: blueviolet; */
  height: 1rem;
  width: 100%;
  justify-content: center;
  align-content: flex-start;
  padding: 0.5rem 0rem;
}

/* Add a style to flip one of the icons. */
.flip-image {
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
}

/* Footer Section */

/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------

Section 4

---------------------------------------------------------------------------------------------------------------------------------------------------------------- */

/* Tabs Section */

/* Everything below initially designed for mobile. */

/* 1. Homepage Tab */

#homepage-next-fixtures-header-text {
  padding-bottom: 0.5rem;
}

#homepage-next-fixtures-sub-header-text {
  padding-bottom: 1rem;
  font-style: italic;
}

#homepage-next-fixtures-team-container {
  /* background-color: #ce641d; */
  display: grid;
  width: 100%;
  grid-template-columns: max-content max-content max-content max-content max-content;
  grid-template-rows: 1fr;
  gap: 0.3rem 1rem;
  /* First value is between rows, second columns. */
  /* justify-items: stretch; */
  justify-items: start;
  /* Align the cells in the grid horizontally to the left. */
  /* align-items: stretch; */
  align-items: center;
  /* Align the cells in the grid vertically central to the row. */
  justify-content: stretch;
  /* Stretch the width of the grid to the full width of the container. */
  align-content: stretch;
  /* Stretch the width of the grid to the full height of the container. */
  overflow-x: scroll;
  /* Always show the x scroll bar. */
}

#homepage-next-fixtures-team-container::-webkit-scrollbar:horizontal {
  height: 5px;
}

#homepage-next-fixtures-team-container p {
  /* color: red; */
  font-size: 0.8rem;
}

#homepage-next-fixtures-team-container h4 {
  /* color: red; */
  color: var(--main-accent-colour, yellow);
  font-size: 0.8rem;
}

.next-fixtures-grid-item {
  /* background-color: aqua; */
  /* display: inline-grid; */
  justify-self: start;
  /* Align the content of the cells horizontally to the left. */
  align-self: flex-start;
  /* Align the content of the cells vertically to the top of the row. */
}

.homepage-weather-container {
  /* background-color: yellow; */
  grid-area: Weather;
  padding: 0.3rem;
}

#homepage-club-captains-and-awards-grid-container {
  display: grid;
  width: 100%;
  grid-template-columns: 50% 50%;
  grid-template-rows: 1fr;
  gap: 0.3rem 0rem;
  /* First value is between rows, second columns. */
  /* justify-items: stretch; */
  justify-items: start;
  /* Align the cells in the grid horizontally to the left. */
  /* align-items: stretch; */
  align-items: center;
  /* Align the cells in the grid vertically central to the row. */
  justify-content: stretch;
  /* Stretch the width of the grid to the full width of the container. */
  align-content: stretch;
  /* Stretch the width of the grid to the full height of the container. */
}

.homepage-grid-item {
  /* background-color: red; */
  height: 2.4rem;
  width: 100%;
  margin: 0;
  padding: 0.4rem 0 0.4rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

#homepage-club-captains-and-awards-grid-container h4 {
  font-size: 0.8rem;
  color: var(--main-accent-colour, yellow);
  padding-right: 0.2rem;
  /* Add a slight amount of padding to the right of the heading text to leave a gap to the players names. */
}

/* 2. Club Stats Tab */

#club-stats-area {
  /* background-color: violet; */
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: max-content max-content max-content;
  gap: 1rem 0.3rem;
  /* First value is between rows, second columns. */
  grid-template-areas:
    "TotalClubAndTeamStats"
    "TeamSeasonResults"
    "AllClubResults";
}

/* Whole Club Stats Section */
#club-stats-total-club-and-team-stats-container {
  /* background-color: blue; */
  grid-area: TotalClubAndTeamStats;
  padding: 0.3rem;
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: max-content max-content;
  gap: 1rem 0.3rem;
  /* First value is between rows, second columns. */
  grid-template-areas:
    "HeaderSection"
    "StatsSection";
}

/* Style the div holding the header and info text. */
#club-stats-total-club-and-team-stats-header-container {
  /* background-color: purple; */
  width: 100%;
  padding-bottom: 1rem;
  grid-area: HeaderSection;
}

#club-stats-total-club-and-team-stats-header-container span {
  /* background-color: yellow; */
  font-size: var(--information-bar-text-size, 0.7rem);
  font-style: italic;
  font-weight: normal;
}

#club-stats-total-club-and-team-stats-stats-grid-container {
  /* background-color: orange; */
  grid-area: StatsSection;
  display: grid;
  grid-template-columns: 60% 40%;
  grid-template-rows: repeat(11, max-content);
  gap: 0.5rem 0rem;
  /* First value is between rows, second columns. */
}

.club-stats-grid-item {
  /* background-color: red; */
  height: 2.4rem;
  margin: 0;
  padding: 0.4rem 0 0.4rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

#club-stats-total-club-and-team-stats-stats-grid-container h5 {
  font-size: 0.9rem;
  font-weight: normal;
}

#club-stats-total-club-and-team-stats-stats-grid-container p {
  font-size: 0.9rem;
  font-weight: normal;
  text-align: right;
}

#club-stats-total-club-and-team-stats-stats-grid-container h5:first-child,
#club-stats-total-club-and-team-stats-stats-grid-container p:nth-child(2) {
  border-top: none;
  /* Remove the interior border from the first two items. */
}

/* Team Season Results Section */
#club-stats-team-season-results-container {
  visibility: hidden;
  /* Remove when ready to show on the page. */
  background-color: green;
  grid-area: TeamSeasonResults;
  padding: 0.3rem;
}

/* All Club Results Section */
#club-stats-all-club-results-container {
  visibility: hidden;
  /* Remove when ready to show on the page. */
  background-color: red;
  grid-area: AllClubResults;
  padding: 0.3rem;
}

/* 3. Player Stats Tab */

/* Common Tab Styling */
.player-stats-top-container {
  /* background-color: greenyellow; */
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: 1fr;
  gap: 0rem 0rem;
  /* First value is between rows, second columns. */
}

.player-stats-stat-container {
  /* background-color: violet; */
  position: relative;
  width: calc(var(--pagewidth, 85%) - 10%);
  /* Set the width of each row container based on page width. */
  display: grid;
  grid-template-columns: 70% 20% 10%;
  /* First value is the text, second the stat value, last the image. */
  grid-template-rows: 1fr;
  gap: 0rem 0.2rem;
  /* First value is between rows, second columns. */
  margin: 0 auto;
}

/* Add a class just for the divs that hold the yellow and red cards. */
.player-stats-stat-container div {
  margin-left: 0.6rem;
}

.player-stats-stat-container h5 {
  /* background-color: red; */
  margin-top: 0.2rem;
  /* Force a vertical alignment of the h5 text. */
  text-align: right;
  white-space: nowrap;
}

.player-stats-stat-container img {
  /* background-color: blue; */
  margin-left: 0.4rem;
}

/* This Season Stats */
/* #player-stats-this-season-top-container {
	background-color: greenyellow;	
} */
/* .player-stats-this-season-stat-container {
	background-color: violet;
} */
/* Add a class just for the divs that hold the yellow and red cards. */
/* .player-stats-this-season-stat-container div {
	background-color: rgb(132, 130, 238);
} */
/* .player-stats-this-season-stat-container h5 {
	background-color: red;
} */
/* .player-stats-this-season-stat-container img {
	background-color: blue;
} */

/* Past Season Stats */
#player-stats-past-seasons-table {
  background-color: #490bf3;
}

/* All Time Stats */
/* #player-stats-all-time-top-container {
	background-color: lightblue;
} */

/* 4. Team of the Week Tab */

/* Top level section to hold all tab content. */
#team-of-the-week-area {
  /* background-color: violet; */
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: max-content max-content max-content;
  gap: 0.2rem 0.3rem;
  /* First value is between rows, second columns. */
  grid-template-areas:
    "WeekSelection"
    "TeamOfTheWeek"
    "TopPerformers";
  padding-bottom: 0rem;
  /* Remove when id="totw-top-performers-container" re-added. */
}

/* Top selection section. */
#totw-week-selection-container {
  /* background-color: blue; */
  grid-area: WeekSelection;
  padding: 0.3rem;
}

#TOTW-season-selection-dropdown {
  min-width: 60px;
}

#TOTW-week-selection-dropdown {
  min-width: 12rem;
}

/* Team of the Week pitch container. */
#totw-team-of-the-week-container {
  /* background-color: yellow; */
  grid-area: TeamOfTheWeek;
  /* padding: 0.3rem; */
  padding-bottom: 0rem;
  /* Remove when id="totw-top-performers-container" re-added. */
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: max-content max-content;
  gap: 1rem 0.3rem;
  /* First value is between rows, second columns. */
  grid-template-areas:
    "HeaderSummary"
    "Pitch";
}

#team-of-the-week-header-summary {
  /* background-color: blue; */
  background-color: rgba(255, 255, 255, 0.1);
  padding: 0.3rem;
  border-radius: var(--border-radius, 0.2rem);
  grid-area: HeaderSummary;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 140px;
  gap: 0rem 0rem;
  /* First value is between rows, second columns. */
}

#team-of-the-week-header-summary-text {
  /* background-color: green; */
  text-align: center;
  margin: 0 auto;
  /* Centrally align the text in the container. */
}

#totw-total-points {
  font-size: 3rem;
  padding-bottom: 1.2rem;
}

#totw-week-number-players {
  font-size: 0.8rem;
}

#team-of-the-week-header-summary-star-man {
  /* background-color: greenyellow; */
  text-align: center;

  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

#team-of-the-week-pitch-area {
  grid-area: Pitch;
  position: relative;
  margin: 0 auto;
  /* Center the whole pitch on the screen. */
  width: 100%;
  /* height: 520px; */
  min-height: 250px;
  height: max-content;
  /* height: 100%; */

  /* min-width: 820px; */
  /* background-size: 420px 100%; */
  background-size: 100% auto;
  /* background-size: 500px 100%; */
  background-image: url("https://fantasy.premierleague.com/static/media/pitch-bud.50582128.svg");
  background-repeat: no-repeat;
  /* background-attachment: fixed; */
  background-position: center top;
}

/* Style the div holding the kit, name and points box. */
.totw-player-div {
  /* background-color: #ce641d; */
  height: 80px;
  width: 20%;
  /* padding: 0px auto; */
  position: absolute;
  top: 0px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.totw-player-div-player {
  width: 20%;
}

/* Format the Dorkinians Kit image. */
.totw-dorkinians-kit {
  position: relative;
  top: 0;
  /* width: 40%;
	height: auto; */
  margin: 0 auto 4px auto;
  /* width: auto; */
}

.totw-dorkinians-kit-player {
  width: 40%;
  height: auto;
}

.totw-dorkinians-kit-star-man {
  height: 100px;
}

/* Format the boxes below the kit. */
.totw-player-box {
  position: relative;
  /* top: -28%; */
  /* left: 4%; */
  height: max-content;
  min-height: 1rem;
  width: max-content;
  padding: 3px;
  color: white;
  text-align: center;
  white-space: nowrap;
}

/* Format the players name box below the kit. */
.totw-player-name-box {
  background-color: #00753a;
  min-width: 65px;
  font-size: 0.7rem;
}

/* Format the players name box below the kit. */
.totw-player-points-box {
  background-color: #00ff87;
  color: black;
  min-width: 65px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  font-size: 0.6rem;
}

/* Format Star Man slightly differently. */
.totw-player-div-star-man {
  padding-top: 10px;
  width: 60px;
  position: relative;
}

.totw-player-box-star-man {
  position: relative;
  /* top: -28%; */
  /* left: 4%; */
  height: max-content;
  min-height: 1rem;
  width: max-content;
  min-width: 100px;
  padding: 3px;
  color: white;
  text-align: center;
  white-space: nowrap;
}

#totw-player-pos-star-man-name {
  background-color: #00753a;
  font-size: 0.8rem;
}

#totw-player-pos-star-man-points {
  background-color: #00ff87;
  color: black;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  font-size: 0.7rem;
}

/* Pop Up Boxes - Hidden by default */
#pop-up-box {
  display: none;
  background: var(--main-background-colour, green);
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 30;
  min-height: 20%;
  max-height: 60%;
  overflow: scroll;
  width: var(--pagewidth, 95%);
  border: 0.125rem solid var(--secondary-accent-colour, white);
  border-radius: var(--section-border-radius, 2rem);
  padding: 0.7rem;
}

/* TOTW Player Info Pop Up Box */

#totw-player-info-box {
  /* Change the below property on/off to hide/show the totw-player-info box. */
  display: none;
  background: var(--main-background-colour, green);

  /* Set the position of the box to be bang in the center of the screen. */
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 30;
  /* pop-up-box. Have the totw-player-info in front of all other items on the page. */

  /* Control and set the size of the box based on the content. */
  min-height: 20%;
  /* At minimum, have the height at 20%. By default, this is the size of the box. */
  max-height: 60%;
  /* At maximum, have the height at 60%. */
  overflow: scroll;
  /* Allow the user to scroll through any displayed text that is too long. */
  width: var(--pagewidth, 95%);

  /* Style the totw-player-info box. */
  border: 0.125rem solid var(--secondary-accent-colour, white);
  border-radius: var(--section-border-radius, 2rem);
  padding: 0.7rem;
  /* Add internal padding to the totw-player-info box. */
}

/* Style the text in the totw-player-info box. */
#totw-player-info-box a,
h3,
p,
span {
  color: var(--secondary-accent-colour, var(--secondary-accent-colour, white));
}

/* The x close button. */
#totw-player-info-box #totw-player-info-box-close-button {
  position: absolute;
  top: 0.7rem;
  /* Offset the button from the top of the page. */
  right: 1.5rem;
  font-size: 2.25rem;
  margin-left: 3.125rem;
  padding: 0.2rem;
}

#totw-player-info-box-container {
  /* background: #490bf3; */
  height: 100%;
  width: 100%;
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: 1.5rem 1fr;
  gap: 0 0;
  /* First value is between rows, second columns. */
}

#totw-player-info-box-header-text {
  /* background: red; */
  height: 1.5rem;
}

#totw-player-info-box-header-container h3 {
  display: inline-block;
  line-height: normal;
  vertical-align: middle;
}

#totw-player-info-box-result {
  /* background: green; */
  position: relative;
  height: max-content;
  width: 100%;
  font-size: 0.7rem;
  padding: 0.8rem;
}

/* Format the table in the pop up. */
#totw-player-info-box-gameweek-table {
  border-radius: none;
  border-collapse: collapse;
  font-size: 14px;
  /* Fallback value. */
  font-size: 0.9rem;
  /* Relative to root (html) value. */
}

/* Format the table headers. */
#totw-player-info-box-gameweek-table th {
  box-shadow: inset 0rem 0rem 0rem var(--main-accent-colour, yellow),
    inset 0rem -0.25rem 0rem var(--main-accent-colour, yellow);
  /* Add a box-shadow as a bottom border so that it scrolls with the header. */
  font-style: bold;
  /* Make the header text bold */
  font-size: 14px;
  /* Fallback value. */
  font-size: 0.9rem;
  /* Relative to root (html) value. */
  text-align: center;
  /* By default, center all table text. */
  padding: var(--table-padding,
      0.2rem);
  /* Add padding within the header cell to give the table space. */
  height: 2rem;
  background: rgba(255, 255, 255, 0.1);
}

/* Format the table cells. */
#totw-player-info-box-gameweek-table td {
  padding: 0.5rem;
  /* Add padding within the table cells to give the table space. */
}

/* Add a top border radius to the last row. (https://stackoverflow.com/a/4094151/14290169). */
#totw-player-info-box-gameweek-table tr:last-child {
  box-shadow: inset 0rem 0.2rem 0rem var(--secondary-accent-colour, white);
  /* Add a box-shadow as a top border. */
  font-weight: bold;
  z-index: 2;
}

#totw-player-info-box-season-details {
  /* background: blue; */
  padding-top: 2rem;
}

#totw-top-performers-container {
  /* background-color: red; */
  grid-area: TopPerformers;
  padding: 0.3rem;
}

#FTP-month-rank-1 {
  font-weight: bolder;
  font-size: 0.9rem;
}

#FTP-month-player-1 {
  font-weight: bolder;
  font-size: 0.9rem;
}

#FTP-month-score-1 {
  font-weight: bolder;
  font-size: 0.9rem;
}

/* 5. Comparison Tab */

/* Style the full holding comparison div. */
.comparison-area {
  /* background-color: violet; */
  width: 100%;
  display: grid;
  grid-template-columns: 45% 6% 45%;
  grid-template-rows: 2rem 1rem 1.2rem max-content;
  /* Repeat the same height row x number of times. */
  gap: 1rem 1%;
  /* First value is between rows, second columns. */
  grid-template-areas:
    "PlayerSelection1 Blank PlayerSelection2"
    "Player1Stats Blank Player2Stats"
    "StatCategorySelection StatCategorySelection StatCategorySelection"
    "ComparisonStatsTable ComparisonStatsTable ComparisonStatsTable";
}

/* Style the player 1 selection container. */
.comparison-player-1-selection-container {
  /* background-color: blue; */
  grid-area: PlayerSelection1;
  padding: 0.3rem;
  width: 100%;
}

/* Add some unique styling to the player 1 selection dropdown component. */
#comparison-player-1-selection-dropdown-contents {
  /* background-color: red; */
  /* width: 14rem; */
  position: relative;
  min-width: 13rem !important;
  left: 0;
}

/* Style the player 2 selection container. */
.comparison-player-2-selection-container {
  /* background-color: green; */
  grid-area: PlayerSelection2;
  padding: 0.3rem;
  width: 100%;
}

/* Add some unique styling to the player 2 selection dropdown component. */
#comparison-player-2-selection-dropdown-contents {
  /* background-color: red; */
  /* width: 14rem; */
  position: relative;
  min-width: 13rem !important;
  float: right;
}

.comparison-player-1-stats-container {
  /* background-color: yellow; */
  grid-area: Player1Stats;
  padding: 0.3rem;
}

.comparison-player-2-stats-container {
  /* background-color: red; */
  grid-area: Player2Stats;
  padding: 0.3rem;
}

.comparison-stat-category-selection-container {
  /* background-color: blue; */
  grid-area: StatCategorySelection;
  /* padding: 0.3rem; */
}

/* Add a class to style the overall holding container of all stats rows. */
.comparison-stats-table {
  /* background-color: purple; */
  width: 100%;
  grid-area: ComparisonStatsTable;
  display: grid;
  flex-flow: column wrap;
  grid-template-columns: 100%;
  /* 1 column of full width. */
  grid-template-rows: repeat(12,
      1.5rem);
  /* Repeat the same height row x number of times. */
  gap: 0.2rem 0;
  /* First value is between rows, second columns. */
  margin: 0 auto 0 auto;
}

/* Add a class to style each row container of the comparison table. */
.comparison-stats-table-row-container {
  /* background-color: lightgreen; */
  display: grid;
  /* flex-flow: column wrap; */
  width: 100%;
  grid-template-columns:
    3fr minmax(4rem, 1fr) minmax(28px, 0.5fr) 15% minmax(4rem, 1fr) 3fr;
  /* 5 columns of varying width. */
  grid-template-rows: 1.5rem;
  /* One row height. */
  /*gap: 0.5rem 0.3rem; /* First value is between rows, second columns. */
}

/* Style the explanation font on the left of the comparison tab. */
.comparison-stats-table-row-container p {
  font-size: 0.6rem;
  align-self: center;
  /* Vertically align the text to the center point of the row container. */
}

div.cell {
  /* background: LightBlue; */
  /* border: 1px solid Blue; */
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  align-items: center;
  text-align: center;
}

/* Below two classes, id and animation are copies from online YouTube progress bar tutorial: https://www.youtube.com/watch?v=4LBRMSk6PLY&ab_channel=PedroTech */
.bar-container {
  /* background-color: red; */
  position: relative;
  /* height: 1.5rem; */
  /* border-radius: 1rem; */
  /* width: 100%; */
}

/* Create an initial styling for the comparison bars which start white. */
.bar-container .comparison-stat-bar {
  background-color: var(--secondary-accent-colour, white);
  /* background-color: green; */
  position: absolute;
  height: 80%;
  border-radius: 0.3rem;
  width: 0%;
}

@keyframes progress-animation {
  0% {
    width: 0%;
  }

  100% {
    width: 100%;
  }
}

.bar-right {
  left: 0rem !important;
  /* Lock the bar to the left side of its container. */
  justify-self: start;
  /* Position the bar container to the left side of its container. */
}

.bar-left {
  right: 0rem !important;
  /* Lock the bar to the right side of its container. */
  justify-self: end;
  /* Position the bar container to the right side of its container. */
}

/* Create a class to be added to the bar that is greater/or less. */
.yellow {
  background-color: var(--main-accent-colour, yellow) !important;
}

/* Create a container class to house the icons. */
.comparison-icons-container {
  background-color: orange;
  /* grid-area: Icons; */
  padding: 3.5rem 0rem 0.3rem 0rem;
  text-align: center;
}

/* Create two card shapes using CSS. */
.card-icon {
  border-radius: 2px;
  width: 0.9rem;
  height: 1.1rem;
  transform: rotate(20deg);
}

.card-icon#yellow-card {
  background-color: yellow;
}

.card-icon#red-card {
  background-color: red;
}

/* 6. Tables, Results & Fixtures Tab */

.dorkiniansTable {
  padding-top: 1rem;
}

.dorkiniansTableHeaderText {
  padding-bottom: 0.5rem;
  text-align: center;
}

.dorkiniansTableDiv {
  text-align: center;
  padding: 1rem 0rem
}

.AFCTable {
  padding-top: 0.5rem;
  padding-bottom: 1.5rem;
}

.AFCResultsAndFixtures {
  padding-top: 0.5rem;
  padding-bottom: 2rem;
}

.tables-results-fixtures-text-replacement {
  padding-bottom: 2rem;
}

/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------

Section 5

---------------------------------------------------------------------------------------------------------------------------------------------------------------- */

/* Main styling sheet media queries. */

/* Scale up for screens larger than mobile. Resizing the webpage for all devices. */

/* https://www.thesitewizard.com/css/mobile-friendly-responsive-design.shtml
	240 pixels (old Android portrait mode)
	320 pixels (iPhone 3 to 5 and iPhone SE portrait mode)
	375 pixels (iPhone 6, 6s, 7, 8 and X portrait)
	384 pixels (Android Nexus portrait)
	414 pixels (iPhone 6 Plus, 6s Plus, 7 Plus and 8 Plus portrait)
	480 pixels (iPhone 3 and 4 landscape mode)
	568 pixels (iPhone 5 and iPhone SE landscape)
	600 pixels (Android Nexus landscape, Kindle portrait)
	667 pixels (iPhone 6, 7 and 8 landscape)
	736 pixels (iPhone 6 Plus, 7 Plus and 8 Plus landscape)
	768 pixels (iPad portrait)
	812 pixels (iPhone X landscape)
	1024 pixels (iPad landscape) */

@media only screen and (min-device-width: 320px) and (max-device-width: 360px) {

  /* Narrow Smartphones */
  :root {
    /* background: lightblue; */
    /* --headerHeight: 2.8rem; Define the header height variable. */
    --pagewidth: 98%;
    /* Used for controlling the width of items on each page */
  }

  /* Team Of The Week Tab */
  /* Season selection dropdown. */
  #TOTW-season-selection-dropdown {
    min-width: 80px;
  }

  /* TOTW Pitch Container. */
  #team-of-the-week-pitch-area {
    height: 340px;
    /* Format the height of the TOTW pitch container. */
    background-size: 170% auto;
    /* Format how much of the background the pitch SVG fills. */
  }

  /* Format the boxes below the kit. */
  .totw-player-box {
    width: -moz-fit-content;
    width: fit-content;
    max-width: 40px;
  }

  /* Format the players name box below the kit. */
  .totw-player-name-box {
    font-size: 0.6rem;
  }

  /* Format the players point box below the kit. */
  .totw-player-points-box {
    font-size: 0.5rem;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
  }

  /* Format the star man text boxes. */
  .totw-player-box-star-man {
    min-width: 110px;
  }
}

@media only screen and (min-device-width: 360px) and (max-device-width: 420px) {

  /* Smartphones - Covers most phones such as iPhone SE (my phone). */
  :root {
    /* background: blue; */
    /* --headerHeight: 2.8rem; Define the header height variable. */
    --pagewidth: 96%;
    /* Used for controlling the width of items on each page */
  }

  /* Team Of The Week Tab */
  /* Season selection dropdown. */
  #TOTW-season-selection-dropdown {
    min-width: 90px;
  }

  /* TOTW Pitch Container. */
  #team-of-the-week-pitch-area {
    height: 340px;
    /* Format the height of the TOTW pitch container. */
    background-size: 160% auto;
    /* Format how much of the background the pitch SVG fills. */
  }

  /* Format the boxes below the kit. */
  .totw-player-box {
    width: -moz-fit-content;
    width: fit-content;
    min-width: 63px;
  }

  /* Format the players name box below the kit. */
  .totw-player-name-box {
    font-size: 0.6rem;
  }

  /* Format the players point box below the kit. */
  .totw-player-points-box {
    font-size: 0.5rem;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
  }

  /* Format the star man text boxes. */
  .totw-player-box-star-man {
    min-width: 110px;
  }
}

@media only screen and (min-device-width: 420px) and (max-device-width: 480px) {

  /* Slightly Wider Smartphones */
  :root {
    /* background: darkblue; */
    /* --headerHeight: 2.8rem; Define the header height variable. */
    --pagewidth: 96%;
    /* Used for controlling the width of items on each page */
  }

  /* Team Of The Week Tab */
  /* TOTW Pitch Container. */
  #team-of-the-week-pitch-area {
    height: 400px;
    /* Format the height of the TOTW pitch container. */
    background-size: 160% auto;
    /* Format how much of the background the pitch SVG fills. */
  }

  /* Format the boxes below the kit. */
  .totw-player-box {
    width: -moz-fit-content;
    width: fit-content;
    min-width: 63px;
  }

  /* Format the players name box below the kit. */
  .totw-player-name-box {
    font-size: 0.6rem;
  }

  /* Format the players point box below the kit. */
  .totw-player-points-box {
    font-size: 0.5rem;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
  }

  /* Format the star man text boxes. */
  .totw-player-box-star-man {
    min-width: 110px;
  }
}

@media only screen and (min-width: 480px) and (max-width: 620px) {

  /* Smaller Landscape mobiles or Reduced windows on Desktops and Laptops - for when a user reduces the size of their window. */
  :root {
    /* background: lightgreen; */
    /* --headerHeight: 4rem; Define the header height variable. */
    --pagewidth: 95%;
    /* Used for controlling the width of items on each page */
  }

  html {
    font-size: 18px;
    /* Add a top level font size that all other CSS is relative to. */
  }

  /* Team Of The Week Tab */
  /* TOTW Pitch Container. */
  #team-of-the-week-pitch-area {
    height: 460px;
    /* Format the height of the TOTW pitch container. */
    background-size: 150% auto;
    /* Format how much of the background the pitch SVG fills. */
  }

  /* Format the boxes below the kit. */
  .totw-player-box {
    width: -moz-fit-content;
    width: fit-content;
    min-width: 75px;
  }

  /* Format the players name box below the kit. */
  .totw-player-name-box {
    font-size: 0.7rem;
  }

  /* Format the players point box below the kit. */
  .totw-player-points-box {
    font-size: 0.6rem;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
  }

  /* Format the star man text boxes. */
  .totw-player-box-star-man {
    min-width: 110px;
  }
}

@media only screen and (min-width: 620px) and (max-width: 768px) {

  /* Larger Landscape mobiles or Reduced windows on Desktops and Laptops - for when a user reduces the size of their window. */
  :root {
    /* background: darkgreen; */
    /* --headerHeight: 4rem; Define the header height variable. */
    --pagewidth: 95%;
    /* Used for controlling the width of items on each page */
  }

  html {
    font-size: 18px;
    /* Add a top level font size that all other CSS is relative to. */
  }

  /* Team Of The Week Tab */
  /* TOTW Pitch Container. */
  #team-of-the-week-pitch-area {
    height: 480px;
    /* Format the height of the TOTW pitch container. */
    background-size: 120% auto;
    /* Format how much of the background the pitch SVG fills. */
  }

  /* Format the boxes below the kit. */
  .totw-player-box {
    width: -moz-fit-content;
    width: fit-content;
    min-width: 85px;
  }

  /* Format the players name box below the kit. */
  .totw-player-name-box {
    font-size: 0.8rem;
  }

  /* Format the players point box below the kit. */
  .totw-player-points-box {
    font-size: 0.7rem;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
  }

  /* Format the star man text boxes. */
  .totw-player-box-star-man {
    min-width: 110px;
  }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {

  /* Covers iPads and other tablets. */
  :root {
    /* background: orange; */
    /* --headerHeight: 4rem; Define the header height variable. */
    --pagewidth: 80%;
    /* Used for controlling the width of items on each page */
  }

  html {
    font-size: 20px;
    /* Add a top level font size that all other CSS is relative to. */
  }

  /* Team Of The Week Tab */
  /* TOTW Pitch Container. */
  #team-of-the-week-pitch-area {
    height: 600px;
    /* Format the height of the TOTW pitch container. */
    background-size: 140% auto;
    /* Format how much of the background the pitch SVG fills. */
  }

  /* Format the boxes below the kit. */
  .totw-player-box {
    width: -moz-fit-content;
    width: fit-content;
    min-width: 100px;
  }

  /* Format the players name box below the kit. */
  .totw-player-name-box {
    font-size: 0.8rem;
  }

  /* Format the players point box below the kit. */
  .totw-player-points-box {
    font-size: 0.7rem;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
  }

  /* Format the star man text boxes. */
  .totw-player-box-star-man {
    min-width: 110px;
  }
}

@media only screen and (min-width: 1024px) and (max-width: 1223px) {

  /* Reduced windows on Desktops and Laptops - for when a user reduces the size of their window. */
  :root {
    /* background: cyan; */
    /* --headerHeight: 4rem; Define the header height variable. */
    --pagewidth: 80%;
    /* Used for controlling the width of items on each page */
  }

  html {
    font-size: 20px;
    /* Add a top level font size that all other CSS is relative to. */
  }

  /* Team Of The Week Tab */
  /* TOTW Pitch Container. */
  #team-of-the-week-pitch-area {
    height: 600px;
    /* Format the height of the TOTW pitch container. */
    background-size: 140% auto;
    /* Format how much of the background the pitch SVG fills. */
  }

  /* Format the boxes below the kit. */
  .totw-player-box {
    width: -moz-fit-content;
    width: fit-content;
    min-width: 110px;
  }

  /* Format the players name box below the kit. */
  .totw-player-name-box {
    font-size: 0.8rem;
  }

  /* Format the players point box below the kit. */
  .totw-player-points-box {
    font-size: 0.7rem;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
  }

  /* Format the star man text boxes. */
  .totw-player-box-star-man {
    min-width: 110px;
  }
}

@media only screen and (min-width: 1224px) {

  /* Desktops and Laptops - For most normal size screen desktops and laptops. */
  :root {
    /* background: red; */
    /* --headerHeight: 4rem; Define the header height variable. */
    --pagewidth: 80%;
    /* Used for controlling the width of items on each page */
  }

  html {
    font-size: 28px;
    /* Add a top level font size that all other CSS is relative to. */
  }

  /* Team Of The Week Tab */
  /* TOTW Pitch Container. */
  #team-of-the-week-pitch-area {
    height: 600px;
    /* Format the height of the TOTW pitch container. */
    width: 70%;
    /* Format the width of the TOTW pitch container. */
    background-size: 140% auto;
    /* Format how much of the background the pitch SVG fills. */
  }

  /* Format the boxes below the kit. */
  .totw-player-box {
    width: -moz-fit-content;
    width: fit-content;
    min-width: 120px;
  }

  /* Format the players name box below the kit. */
  .totw-player-name-box {
    font-size: 0.8rem;
  }

  /* Format the players point box below the kit. */
  .totw-player-points-box {
    font-size: 0.7rem;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
  }

  /* Format the star man text boxes. */
  .totw-player-box-star-man {
    min-width: 110px;
  }
}

@media only screen and (min-width: 1824px) {

  /* Desktops and Laptops - For larger monitors and displays. */
  :root {
    /* background: purple; */
    /* --headerHeight: 4rem; Define the header height variable. */
    --pagewidth: 70%;
    /* Used for controlling the width of items on each page */
  }

  html {
    font-size: 30px;
    /* Add a top level font size that all other CSS is relative to. */
  }

  /* Team Of The Week Tab */
  /* TOTW Pitch Container. */
  #team-of-the-week-pitch-area {
    height: 600px;
    /* Format the height of the TOTW pitch container. */
    width: 60%;
    /* Format the width of the TOTW pitch container. */
    background-size: 140% auto;
    /* Format how much of the background the pitch SVG fills. */
  }

  /* Format the boxes below the kit. */
  .totw-player-box {
    width: -moz-fit-content;
    width: fit-content;
    min-width: 120px;
  }

  /* Format the players name box below the kit. */
  .totw-player-name-box {
    font-size: 0.8rem;
  }

  /* Format the players point box below the kit. */
  .totw-player-points-box {
    font-size: 0.7rem;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
  }

  /* Format the star man text boxes. */
  .totw-player-box-star-man {
    min-width: 110px;
  }
}

/* Add a set up for media devices with preference for dark mode. */

/* https://polypane.app/blog/the-complete-guide-to-css-media-queries/
	https://levelup.gitconnected.com/dynamic-dark-light-mode-on-the-web-d55e4c0d3aa9 */

/* @media (prefers-color-scheme: dark) {
		:root {
			background: #000000;
			filter: invert(1) hue-rotate(180deg);
		}
		img {
			opacity: .75;
			transition: opacity .5s ease-in-out;
		}
		img:hover {
			opacity: 1;
		}
	} */