/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* End of reset */




:root {  /* setting custom variables for easy uniform colors and fonts, and for easy changing through javascript */
    --white: #FFFFFF;
    --black: #000000;
    --gray1: #F8F8F8;
    --gray2: #E0E0E0;
    --gray3: #C0C0C0;
    --gray4: #999999;
    --gray5: #666666;
    --gray6: #333333;
    --gray7: #111111;

    --red1: #FF0000;
    --red2: #FF6347;
    --red3: #B22222;
    --red4: #8B0000;

    --orange1: #FFA500;
    --orange2: #FF8C00;
    --orange3: #FF7F50;

    --yellow1: #FFFF00;
    --yellow2: #FFD700;
    --yellow3: #F0E68C;

    --green1: #90EE90;
    --green2: #32CD32;
    --green3: #008000;
    --green4: #006400;
    --lime: #00FF00;
    --olive: #808000;

    --blue1: #ADD8E6;
    --blue2: #87CEEB;
    --blue3: #1E90FF;
    --blue4: #007BFF;
    --blue5: #00008B;
    --cyan: #00FFFF;
    --teal: #008080;

    --purple1: #800080;
    --purple2: #8A2BE2;
    --purple3: #9370DB;
    --violet: #EE82EE;

    --pink1: #FF69B4;
    --pink2: #FF1493;
    --pink3: #FFC0CB;

    --brown1: #D2B48C;
    --brown2: #A0522D;
    --brown3: #5C4033;
    --beige: #F5F5DC;

    --magenta: #FF00FF;
    --indigo: #4B0082;
    --navy: #000080;
    --maroon: #800000;
    --coral: #FF7F50;
    --salmon: #FA8072;
    --khaki: #F0E68C;
    --mint: #98FF98;
    --turquoise: #40E0D0;
    --gold: #FFD700;
    --silver: #C0C0C0;
    --bronze: #CD7F32;
    --rust: #B7410E;
    --cream: #FFFDD0;
    --apricot: #FBCEB1;
    --lavender: #E6E6FA;
    --plum: #DDA0DD;
    --orchid: #DA70D6;
    --primary-font: Arial, sans-serif;
    --secondary-font: Helvetica, sans-serif;
}


body { 
  justify-content: center;
  align-items: center;
  width: 1280px;
  margin: auto;
  



  -webkit-font-smoothing: antialiased; /* Chrome, Safari, Edge */
  -moz-osx-font-smoothing: grayscale;  /* Firefox on macOS */
}



/* #region header */

header {
  display: flex;
  flex-direction: column; /* stack children vertically */
  align-items: center; /* optional, centers content */
}

/* Banner container */
.banner { /* tries to give blue to white from machine as travel effects like in game, starting at machine */
  margin-top: 40px;
  width: 100%;
  height: 100px; /* adjust as needed */
  background: linear-gradient(to right, 
                              var(--white) 0%,
                              var(--white) 10%,
                              var(--blue4) 10%,   /* blue starts at 0% */
                              var(--blue2) 50%,  /* transition to lighter blue at 50% */
                              var(--white) 80%  /* white at 100% */
                             );
  display: flex;
  align-items: center;
  position: relative;
}

/* Inner flex container to hold image and text */
.banner-inner { 
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 0 50px;
}


.banner-image {/* give image some movement distortion */
  flex: 0 0 auto;
  transform: skewX(-20deg); /* skew left */
  overflow: visible;
}

.banner-image img { /* slight adjustments to size and placement */
  display: block;
  margin-top: 30px;
  height: 200px; /* adjust image height */
  transform: skewX(10deg); /* counter skew so image itself is straight */
}

/* Text container */
.banner-text {/* gives text a bold pop out effect*/
  flex: 1;
  margin-left: 30px;
  color: #fff;
  text-shadow: 2px 2px 5px var(--black);
}
/* title and subtitle adjustments */
.banner-text .title {
  font-size: 3rem;
  font-weight: 900;
  margin: 0;
}

.banner-text .subtitle {
  font-size: 1.5rem;
  margin-top: 10px;
  font-weight: 600;
  margin-left: 20px;
}




/* NAV BAR STYLING */
nav {
    background-color: var(--green2); /* dark green background for contrast */
    padding: 10px 20px;
    text-align: center;
    border-radius: 12px;
    margin: 0 auto;
    max-width: 1200px;
    width:1200px;
    height: 100px;
    clear: both; /* forces nav below any floated content */
}

nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    gap: 50px; /* space between buttons */
}

nav ul li {
    display: inline-block;
}

nav ul li a {
    display: inline-block;
    text-decoration: none;
    padding: 8px 18px;
    border-radius: 12px;
    background-color: var(--green1); /* lighter green for buttons */
    color: var(--black, #000);
    font-weight: bold;
    font-size: 1rem;
    transition: all 0.25s ease;
    box-shadow: 0 3px 6px rgba(0,0,0,0.2);
}

nav ul li a:hover {
    background-color: var(--green2); /* darkens on hover */
    color: var(--white, #fff);
    transform: translateY(-2px); /* subtle lift effect */
    box-shadow: 0 5px 10px var(--black);
}

nav ul li a:active {
    transform: translateY(1px); /* pressed effect */
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* #endregion */





main{
  margin-top: 80px;
  margin-left: 20px;
}

/* #region spider Chart */
/* makes the spider chart title big, bold, colorful, centered, with a gradient background and a prominent plum border */
#spiderChart h2{
  display: block;
  font-weight: bolder;
  color: var(--lime);
  font-size: 4rem;
  background-color: var(--indigo);
  background: linear-gradient(to right, 
                              var(--white) 0%,
                              var(--indigo) 50%,  /* transition to lighter blue at 50% */
                              var(--white) 100% /* white at 100% */
                             );
  text-align: center;
  display: block;
  width: 1000px;
  margin: auto;
  border: 10px outset var(--plum);
}

/* centers all selection items in the selection area horizontally and vertically */
#selectionArea {
  align-items: center;
  margin: auto;
  align-self: center;
  justify-content: center;
  text-align: center;
}

/* makes selection area titles larger and gives vertical spacing for visual separation */
#selectionArea h3{
  font-size: 1.5rem;
  margin-top: 10px;
  font-weight: 600;
  margin-bottom: 20px;
}

/* lays out control elements in a row with spacing between them, and vertically centers them */
.controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* gives select inputs and buttons padding, font sizing, and rounded corners for easier interaction */
select, #spiderChart button {
  padding: 8px 12px;
  font-size: 16px;
  border-radius: 6px;
  border: none;
}

/* makes buttons visually pop with bright blue background, white text, pointer cursor, and smooth transition */
#spiderChart button {
  background-color: #0af;
  color: white;
  cursor: pointer;
  transition: 0.2s;
}

/* slightly darkens button on hover for interactive feedback */
#spiderChart button:hover {
  background-color: #09c;
}

/* arranges combo gallery in a grid with spacing, fits nicely in screen, prevents it from getting too wide */
#comboGallery {
    margin-top: 20px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 16px;
    width: 30%;          /* Fit nicely inside 1280px */
    max-width: 1200px;   /* Prevent too wide */
    margin-left: 8%;
    margin-right: auto;
}

/* wraps images in combo gallery in a row with padding, rounded corners, and subtle background for separation */
.combo-images {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;           /* Slightly bigger gap */
    padding: 10px;
    background: #f0f0f0;
    border-radius: 10px;
}

/* sets consistent image height for gallery and slightly rounds corners for a cleaner look */
.combo-img {
    height: 70px;         /* Smaller for full screen fit */
    border-radius: 6px;  /* Optional: round corners */
}

/* creates color boxes with consistent size, rounded corners, and subtle border for contrast */
.combo-color-box {
    width: 50px;         /* Slightly bigger square for color */
    height: 50px;
    border-radius: 6px;
    border: 2px solid #0003;
}

/* centers chart container on page and gives it fixed size for consistent layout */
.chart-container {
  position: relative;
  width: 969px;
  height: 864px;
  margin: auto;
}

/* positions chart background absolutely, covers container, gives transparency for visual layering */
.chart-background {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  opacity: 0.3; /* adjust transparency */
}

/* positions canvas above background for drawing charts */
#myCanvas {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
}

/* #endregion spider Chart */

/* #region Direct Comparison */
/* styles the direct comparison header with large bold text, gradient background, double border, rounded corners, padding, and subtle shadow for a standout effect */
#direct-combo-comparison h3 { 
  font-weight: bolder;
  font-size: 3.5rem;
  text-align: center;
  color: var(--yellow);
  background: linear-gradient(
                  135deg, 
                  var(--blue2) 0%, 
                  var(--gold) 50%, 
                  var(--blue2) 100%
                  );
  border: 8px double var(--green2);
  padding: 10px 20px;
  border-radius: 15px;
  text-shadow: 2px 2px 5px var(--black);
}

/* centers content, limits width, and uses sans-serif for clean readable text */
.direct-combo-comparison { 
    width: 90%;
    max-width: 1200px;
    margin: 30px auto;
    font-family: sans-serif;
}

/* adds spacing below secondary headers and centers text */
.direct-combo-comparison h3 {
    margin-bottom: 16px;
    text-align: center;
}

/* styles subheaders as small circular badges with background color, padding, bold italic text, border, and spacing */
.direct-combo-comparison h4{
  margin: auto;
  text-align: center;
  font-size: 1rem;
  font-style: italic;
  font-weight: bold;
  background-color: var(--beige);
  padding: 7px;
  border-radius: 50%;
  margin-bottom: 20px;
  border: 4px outset var(--pink2);
}

/* lays out combo selection in a grid with named areas, spacing, and alignment for consistent layout */
.combo-selection {
    display: grid;
    grid:
        "c1 c2 . ." 30px
        "r1 r2 . ." 40px
        "m1 m2 btn km" 40px
        / 200px 200px 150px 100px;
    gap: 20px;
    align-items: center;
    margin-left: 250px;
}

/* assigns first combo title to grid area */
.combo-selection h4:nth-of-type(1) { 
  grid-area: c1; 
}
#rider1 { 
  grid-area: r1; 
}
#machine1 { 
  grid-area: m1; 
}

/* assigns second combo title and inputs to grid areas */
.combo-selection h4:nth-of-type(2) { 
  grid-area: c2; 
}
#rider2 { 
  grid-area: r2; 
}
#machine2 { 
  grid-area: m2; 
}

/* styles compare button with gradient, border, rounded corners, bold uppercase text, padding, and pointer cursor for interactivity */
#gridCompareBtn {
    grid-area: btn; 
    background: linear-gradient(145deg, var(--pink1), var(--pink2));
    border: 3px outset var(--pink3);
    border-radius: 12px;
    color: var(--white);
    font-weight: bold;
    font-size: 1rem;
    padding: 10px 20px;
    cursor: pointer;
    text-transform: uppercase;
}

/* hover effect for compare button: reverses gradient for visual feedback */
#gridCompareBtn:hover {
    background: linear-gradient(145deg, var(--pink2), var(--pink1));
}

/* pressed effect for compare button: inset border to simulate button press */
#gridCompareBtn:active {
    border: 3px inset var(--pink3);
}

/* styles km/mi toggle button with padding, border, background color, bold text, rounded corners, pointer cursor, and smooth transition */
#kmOrMi {
  grid-area: km;
  justify-self: start;
  padding: 6px 10px;
  border-radius: 8px;
  border: 2px solid var(--plum);
  background-color: var(--pink3);
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s ease;
}

/* hover effect for km/mi button: slightly changes background for interactivity feedback */
#kmOrMi:hover {
  background-color: var(--pink1);
}

/* lays out comparison data in a grid with columns for stats and choices, adds spacing, padding, rounded corners, and light background for readability */
.comparison-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr; /* 4 columns: stat | choice1 | choice2 | diff */
    gap: 8px 12px; /* row-gap 8px, column-gap 12px */
    background: #f5f5f5;
    padding: 12px;
    border-radius: 10px;
    width: 1100px;
    margin: auto;
    margin-bottom: 300px;
}

/* sets small images in headers with slight margin for spacing */
.choice-header img{
    height: 20px;
    margin-right: 3px;
}

/* aligns elements in choice headers for neat vertical stacking */
.choice-header div {
  display: flex;
  align-items: flex-start;
  margin-bottom: 4px;
  margin-left: 5px;
  align-self: flex-start;
}

/* ensures choice header text stacks vertically */
.choice-header{
  flex-direction: column;
}

/* styles each grid item with padding, centers content, adds bottom border, and sets font size */
.grid-item {
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #ddd;
    font-size: 16px;
}

/* styles stat headers with bold text and light gray background for differentiation */
.stat-header {
    font-weight: bold;
    background: #ddd;
}

/* styles choice headers with bold text, dark background, and blue text for contrast */
.choice-header {
    font-weight: bold;
    background: var(--black);
    color:#09c;
}

/* styles difference headers with bold text and light background for clarity */
.diff-header {
    font-weight: bold;
    background: #eee;
}

/* aligns stat names to the left and adds padding for readability */
.stat-name {
    justify-content: flex-start;
    padding-left: 12px;
    font-weight: 500;
}

/* styles stat values with white background and rounded corners for emphasis */
.stat-value {
    background: #fff;
    border-radius: 6px;
}

/* styles stat differences with light gray background, rounded corners, and semi-bold text */
.stat-diff {
    background: #f0f0f0;
    border-radius: 6px;
    font-weight: 500;
}

/* #endregion Direct Comparison*/








/* #region Carousel*/
/* styles the character showcase header with bold, large text, centered alignment, gradient neon animation, border, padding, and rounded corners for a vibrant title */
#characterShowcase h2 {
  font-weight: bolder;
  font-size: 3rem;
  text-align: center;
  max-width: 1000px;
  margin: auto;
  margin-bottom: 10px;

  /* Gradient text animation for neon effect */
  background: linear-gradient(
    270deg,
    var(--magenta),
    var(--cyan),
    var(--violet),
    var(--cyan),
    var(--magenta)
  );
  background-size: 600% 600%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  animation: neonGradient 20s ease infinite;

  /* adds padding, border, and rounded corners for visual emphasis */
  padding: 15px 20px;
  border: 4px solid var(--plum);
  border-radius: 15px;
}

/* animates gradient background for neon glow effect */
@keyframes neonGradient {
  0%   { background-position: 0%   50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0%   50%; }
}

/* lays out character display in a grid with image, name, description, title, and stats, centers content, adds padding and rounded corners */
#characterDisplay{
  display: grid;
  grid:
    "img name" 50px
    "img description" 40px
    "img title" 30px
    "img stats"  260px
    /50% 50%;
  background-color: var(--blue1);
  Max-width: 100%;
  width:95%;
  align-self: center;
  padding:10px;
  border-radius: 30%;
  justify-self: center; 
  margin: auto;
}

/* positions character image in grid, sets max size, centers image in cell */
#charImage { 
  grid-area: img; 
  max-height: 300px;
  align-self: self-end;
  max-width: 400px;
  justify-self: end; 
  align-self: center;
}

/* styles character name with large, bold, italic text and spacing */
#charName { 
  grid-area: name; 
  font-size: 2.5rem;
  font-weight: bold;
  font-style: italic;
  padding-top:10px;
}

/* centers character description vertically in its grid cell */
#charDescription { 
  grid-area: description; 
  align-self: center;
}

/* styles character title with bold text and medium size */
#characterDisplay h4{ 
  grid-area: title; 
  font-weight: bold;
  font-size: 1.5rem;
}

/* styles character stats area with background, rounded corners, padding, and fixed width */
#charStats { 
  grid-area: stats; 
  background-color: var(--gray1);
  border-radius: 5% 10% 10% 5%;
  padding:5px 0;
  width:250px;
}

/* adds horizontal borders between table rows in stats for readability */
#charStats tr td{
  border-bottom: 1px solid var(--black);
}

/* styles stat names in table: bold, bigger font, and padding for alignment */
.charStatName{
  font-size: 1.2rem;
  font-weight: 900;
  width: 130px;
  padding:2px;
  padding-left: 5px;
}

/* styles stat values with dotted left border and padding for separation */
.charStatValue{
  border-left: 1px dotted var(--black);
  padding-left: 5px;
  width:100px;
}

/* alternates row backgrounds in stats for easier readability */
#charStats tr:nth-child(even) {
    background: var(--gray2);
}

/* sets carousel images to fixed height and centers them */
.characterCarousel img{
  height:100px;
  justify-self: center;
}

/* reduces opacity of non-active slides and smooth transition for visual focus */
.characterCarousel .slick-slide {
    opacity: 0.4;
    transition: all 0.5s ease;
}

/* highlights currently active slide with full opacity and scale */
.characterCarousel .slick-current {
    opacity: 1;
    transform: scale(1);
}

/* ensures carousel images are centered within slides */
.slick-slide img {
  display: block;
  margin: 0 auto;
}

/* positions carousel arrows inline for custom layout */
.characterCarousel .slick-arrow {
    position: static !important;  
    display: inline-block;
}

/* centers carousel content and adds bottom spacing */
.characterCarousel {
    text-align: center;
    padding-bottom: 20px;
    margin-bottom: 10px;
}

/* styles carousel arrows as clickable circles with color, size, font size, and subtle margin */
.characterCarousel .slick-arrow {
    width: 100px;               
    height: 70px;
    background-color: var(--magenta); 
    color: white;              
    border-radius: 50%;        
    font-size: 3rem;           
    line-height: 50px;         
    text-align: center;        
    cursor: pointer;
    margin: 15px;
    transition: background-color 0.3s, transform 0.2s;
}

/* positions previous arrow at a fixed location */
.slick-prev{
  display:  block !important;
  margin-left: 450px !important;
}

/* positions next arrow at a fixed location */
.slick-next{
  display:  block !important;
  margin-left: 700px !important;
}

/* hover effect on arrows: changes background color and slightly enlarges for feedback */
.characterCarousel .slick-arrow:hover {
    background-color: var(--pink2);
    transform: scale(1.1);    
}

/* ensures slides, track, and list stack correctly with proper z-index */
.slick-slide,
.slick-track,
.slick-list {
  z-index: 1 !important;
}

/* styles autoplay button: padding, rounded corners, color, centered, positioned above carousel for interaction */
#carouselAutoplayBtn {
  padding: 10px 14px;
  border-radius: 6px;
  border: none;
  background-color: var(--indigo);
  color: var(--beige);
  cursor: pointer;
  display: block;
  margin: auto;
  margin-top: -130px;
  margin-bottom: 110px;
  
  position: relative;  
}

/* styles autoplay button when turned off with gray background to indicate inactive state */
#carouselAutoplayBtn.off {
  background-color: #999;
}

/* #endregion Carousel*/










/* #region Machine Showcase */
/* styles the machine showcase header with bold, large text, centered alignment, gradient neon animation, border, padding, and rounded corners for a vibrant title */
#machineShowcase h2 {
  font-weight: bolder;
  font-size: 3rem;
  text-align: center;
  max-width: 1000px;
  margin: auto;
  margin-bottom: 10px;

  /* Gradient text animation for neon effect */
  background: linear-gradient(
    270deg,
    var(--blue1),
    var(--green1),
    var(--gold),
    var(--green1),
    var(--blue1)
  );
  background-size: 600% 600%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  animation: machineGradient 20s ease infinite;

  /* adds padding, border, and rounded corners for visual emphasis */
  padding: 15px 20px;
  border: 4px solid var(--blue2);
  border-radius: 15px;
}

/* animates gradient background for neon glow effect */
@keyframes machineGradient {
  0%   { background-position: 0%   50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0%   50%; }
}

/* lays out machine sort controls in a row, wraps if needed, centers content, and adds spacing */
#machineSortControls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  font-family: sans-serif;
}

/* styles labels with bold text and spacing from controls */
#machineSortControls label {
  font-weight: bold;
  font-size: 1rem;
  margin-right: 5px;
}

/* styles dropdowns with padding, border, background, cursor pointer, and smooth hover transition */
#machineSortControls select {
  padding: 6px 12px;
  font-size: 1rem;
  border-radius: 6px;
  border: 2px solid var(--gray3, #333);
  background-color: var(--gray1, #f8f8f8);
  cursor: pointer;
  transition: border-color 0.3s, box-shadow 0.3s;
}

/* hover effect for dropdowns: changes border color and adds subtle glow */
#machineSortControls select:hover {
  border-color: var(--blue2, #007BFF);
  box-shadow: 0 0 5px var(--blue2, #007BFF);
}

/* styles sort buttons with padding, rounded corners, border, bold text, and smooth hover transition */
#machineSortControls button {
  padding: 6px 14px;
  font-size: 1rem;
  border-radius: 6px;
  border: 2px solid var(--gray3, #333);
  background-color: var(--white, #fff);
  cursor: pointer;
  font-weight: bold;
  transition: background-color 0.3s, border-color 0.3s, color 0.3s;
}

/* hover effect for buttons: changes background, text, and border colors for interactivity */
#machineSortControls button:hover {
  background-color: var(--blue1);
  color: var(--white);
  border-color: var(--blue2);
}

/* active sort button: highlights selection with blue background and white text */
#machineSortControls button.active {
  background-color: var(--blue2);
  color: var(--white);
  border-color: var(--blue2);
}

/* sets small machine images in accordion with spacing and vertical alignment */
#accordion img{
  height:40px;
  margin-right:10px;
  vertical-align:middle;
}

/* lays out accordion content in a grid with image, name, description, title, and stats; sets column sizes, spacing, and centering */
#accordion > div {
    display: grid;
    grid:
        "img name" 50px
        "img description" 40px
        "img title" 30px
        "img stats" 350px
        / 500px 500px; /* columns: 500px each */
    gap: 5px 5px;
    align-items: start;
    padding: 10px 0;
    margin: auto;
    margin: 0 auto;        
}

/* positions first image in grid, sets height, contains image, centers in cell */
#accordion div img:first-of-type {
    grid-area: img;
    height: 300px;
    object-fit: contain;
    align-self: center;
    justify-self: end;
}

/* positions machine name in grid, sets large bold italic font */
#accordion div h4:first-of-type {
    grid-area: name;
    margin: 0;
    font-size: 3rem;
    font-weight: bold;
    font-style: italic;
}

/* positions description in grid and centers vertically */
#accordion div p {
    grid-area: description;
    margin: 0;
    align-self: center;
}

/* positions second h4 as stats title, bold with medium font size */
#accordion div h4:nth-of-type(2) {
    grid-area: title;
    margin: 0;
    font-weight: bold;
    font-size: 1.5rem;
}

/* positions machine stats table in grid, full width, collapse borders */
#accordion div table.machine-stats-table {
    grid-area: stats;
    width: 100%;
    border-collapse: collapse;
}

/* adds borders and padding to table cells for readability */
.machine-stats-table th,
.machine-stats-table td {
    border: 1px solid #ccc;
    padding: 6px 10px;
    text-align: left;
}

/* sets full width for table, margin-top spacing, slightly smaller font */
.machine-stats-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
    font-size: 0.95rem;
}

/* repeats border and padding to ensure consistency */
.machine-stats-table th,
.machine-stats-table td {
    border: 1px solid #ccc;
    padding: 6px 10px;
}

/* styles table header with light background and bold text */
.machine-stats-table th {
    background: #f0f0f0;
    font-weight: bold;
}

/* alternates row backgrounds for readability */
.machine-stats-table tr:nth-child(even) {
    background: #fafafa;
}

/* #endregion machine Showcase */



/* centers the footer horizontally, adds top spacing, padding, and a green background for visual separation */
footer{
  margin: auto;
  margin-top: 50px;
  padding: 30px;
  text-align: center;
  background-color: var(--green2);
}

/* makes paragraph inside footer a circular badge, centers it, adds bold text and larger font for emphasis, and gives apricot background for contrast */
footer p{
  border-radius: 50%;
  background-color: var(--apricot);
  width: 200px;
  padding: 30px 10px;
  margin: auto;
  font-weight: bold;
  font-size: 1.5rem;
}