styles.css

:root {
  --chart-color: #1C1B1A;
  --primary-color: #878580;
  --secondary-color: #CECDC3;
  --bg-color: #100F0F;
  --hover-color: rgb(243, 57, 119);
}

html {
  scroll-behavior: smooth;
  scroll-snap-type: y proximity;
}

/* Slower scroll animation */
@keyframes scroll {
  0% {
      transform: translateY(0);
  }
  100% {
      transform: translateY(-100%);
  }
}

/* Body styles */
body {
  background-color: var(--bg-color);
  opacity: 1;
  background-size: 50px 50px, 50px 50px, 10px 10px, 10px 10px;
  background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;
  text-align: center; /* Center text within the body */
  font-family: "Vazir", sans-serif; /* Specify a font */
  margin: 0; /* Remove default body margin */
}

/* Style for the page title */
.page-title {
  font-size: 51px;
  font-family: 'Orbitron', sans-serif;
  color: var(--secondary-color); /* Dark gray text color */
  transition: color 0.3s; /* Smooth color transition on hover */
  margin-top: 17px;
  margin-bottom: unset;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Add a subtle shadow effect */
}

/* Hover effect for the page title */
.page-title:hover {
  color: var(--hover-color); /* Change text color to black on hover */
}

.sub-title {
  margin-top: -10px;
  font-family: 'Orbitron', sans-serif !important;
  color: var(--secondary-color);
  font-weight: 300;
  font-size: 16px;
}

.h2 {
  color: var(--secondary-color);
  font-weight: 500;
  font-size: 19px;
}

.item-heading {
  margin-top: 15px;
  margin-bottom: unset;
}

.chart-heading {
  margin-top: 15px;
  margin-bottom: 15px;
}

.footer {
  display: block;
  font-family: 'Orbitron', sans-serif;
  text-decoration: unset;
  color: var(--secondary-color);
  font-weight: 700;
  font-size: 15px;
  padding: 10px;
}

.footer:hover {
  text-decoration: underline;
}

/* Style for the container of all scatter plots */
#scatter-plots {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
}

/* Style for the container of each scatter plot */
.container-div {
  flex: 0 0 calc(50% - 20px); /* Set each chart to occupy 50% width with a gap */
  box-sizing: border-box; /* Include padding and border in width calculation */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* Add a subtle shadow effect */
  background-color: var(--chart-color);
  text-align: center; /* Center text within the chart container */
  width: 100%; /* Set the width to 100% for all devices */
  margin: 10px;
}

/* Style for the Date axis (X) */
.xaxis text {
  display: none; /* Hide hours, minutes, and seconds */
}

/* Style for the hover text on the Date axis (X) */
.xaxis.hovertext {
  display: initial; /* Display Day, Month, and Year */
}

/* Style for the <h3> tag within each chart container */
.scatter-plot h3 {
  margin: 0; /* Remove margin for <h3> */
  color: darkblue; /* Set text color to dark blue */
  text-align: center; /* Center the text horizontally */
}

/* Style for the Y-axis labels (round to 1 decimal place) */
.yaxis text {
  font-size: 14px; /* Adjust font size */
}

/* Style for the chart title <h3> */
.chart-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;

  direction: rtl;
  text-decoration: none;
  font-size: 18px;
  font-weight: 600;
  margin: 5px 20px 20px 10px;
  padding: 17px;
  color: var(--secondary-color);
  transition: ease-in-out 200ms;

  border-bottom: solid var(--primary-color) 1px;
}

/* Hover effect for the chart title <h3> */
.chart-title:hover {
  color: var(--hover-color);
  /* border-bottom: solid var(--hover-color) 2px; */
}

.title-line {
  border: none; /* Remove the default border */
  border-top: 2px solid var(--secondary-color); /* Set the border to a solid line */
  margin: auto ; /* Add margin for spacing */
}

/* Center-align the table of contents horizontally and vertically */
#table-of-contents {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: auto;
  /* Set the desired width (e.g., 60% of the screen) for desktops */
  width: 100%;
}

span {
  color: var(--secondary-color);
}

span > a {
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  color: var(--secondary-color);
  transition: ease-in-out 200ms;
}

span > a:hover {
  color: var(--hover-color);
}


@media (min-width: 769px) {
  #table-of-contents {
    width: 60%;
  }
}

/* Media query for smaller screens (e.g., screens up to 768px wide) */
@media (max-width: 768px) {
  .container-div {
    flex: 0 0 100%;
  }
}

@media (min-width: 769px) {
  .title-line {
    width: 60%; /* Set the width to 60% for desktops */
  }
}

/* Define a CSS class for the scroll-to-top button */
.scroll-to-top-button {
  display: none; /* Initially, hide the button */
  position: fixed;
  bottom: 15px;
  right: 15px;
  background-color: var(--primary-color); /* Background color of the button */
  color: var(--secondary-color); /* Text color */
  border: none;
  border-radius: 50px;
  padding: 10px 20px;
  cursor: pointer;
  transition: opacity 0.3s; /* Add a smooth fade-in effect */
  z-index: 9999; /* Set a high z-index to place the button on top */
}

.scroll-to-top-button:hover {
  background-color: var(--hover-color); /* Background color on hover */
}

/* CSS */
button {
  align-items: center;
  background-color: var(--bg-color);
  border: 0;
  border-radius: 10px;
  box-sizing: border-box;
  color: #ffffff;
  cursor: pointer;
  display: inline-flex;
  font-family: "Vazir";
  font-size: 12;
  font-weight: 600;
  justify-content: center;
  line-height: 20px;
  max-width: 480px;
  overflow: hidden;
  padding: 5px;
  padding-left: 10px;
  padding-right: 10px;
  text-align: center;
  touch-action: manipulation;
  transition: background-color 0.167s cubic-bezier(0.4, 0, 0.2, 1) 0s, box-shadow 0.167s cubic-bezier(0.4, 0, 0.2, 1) 0s, color 0.167s cubic-bezier(0.4, 0, 0.2, 1) 0s;
  user-select: none;
  -webkit-user-select: none;
  vertical-align: middle;
}

button:hover,
button:focus { 
  background-color: rgb(243, 57, 119);
  color: #ffffff;
}

button:active {
  background: rgb(116, 26, 56);
  color: rgb(255, 255, 255, .7);
}

button:disabled { 
  cursor: not-allowed;
  background: rgba(0, 0, 0, .08);
  color: rgba(0, 0, 0, .3);
}