/* Import Google Fonts - this loads the Roboto font family from Google's servers */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap');


@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap');


/* Style the entire body of the webpage */
body {
  font-family: 'Source Code Pro', sans-serif;  /* Set the font to Roboto, with sans-serif as backup */
  background-color: #293af2;          /* Set background color to white */
  color: #fffbfb;                        /* Set text color to dark gray (almost black) */
  margin: 0;                          /* Remove default spacing around the body */
  padding: 0;                         /* Remove default internal spacing */
}
.source-code-pro-mine {
  font-family: "Source Code Pro", monospace;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

/* Style the header section at the top of the page */
header {
  display: flex;                      /* Use flexbox layout for flexible positioning */
  justify-content: space-between;     /* Spread items evenly across the header */
  align-items: center;                /* Center items vertically */
  padding: 24px 40px;                 /* Add 24px top/bottom, 40px left/right spacing inside */
  border-bottom: 1px solid #ffffff;      /* Add a light gray line at the bottom */
  font-size: 14px;                    /* Set font size to 14 pixels */
}

/* Style the left section of the header */
header .left {
  color: #fdfdfd;                        /* Set text color to light gray */
}

/* Style the center section of the header */
header .center {
  font-weight: 400;                   /* Set font weight to normal (not bold) */
  text-align: center;                 /* Center the text horizontally */
}

/* Style the span element inside the center section */
header .center span {
  font-size: 12px;                    /* Make this text smaller (12 pixels) */
  color: #f0f0f0;                        /* Set text color to medium gray */
}

/* Style links in the right section of the header */
header .right a {
  color: #fdfdfd;                        /* Set link color to black */
  text-decoration: none;              /* Remove the underline from links */
  font-weight: 400;                   /* Set font weight to normal */
}

/* Style the main content area */
main {
  max-width: 800px;                   /* Limit the maximum width to 800 pixels */
  margin: 60px auto;                  /* Add 60px top/bottom margin, center horizontally */
  padding: 0 20px;                    /* Add 20px left/right padding, no top/bottom */
}

/* Style the project year/date */
.project-meta {
  font-size: 14px;                    /* Set font size to 14 pixels */
  color: #e4e3e3;                        /* Set text color to light gray */
  margin-bottom: 8px;                 /* Add 8 pixels of space below this element */
}

/* Style the main project title */
.project-title {
  font-size: 24px;                    /* Set font size to 24 pixels (larger) */
  font-weight: 400;                   /* Set font weight to normal (not bold) */
  margin-bottom: 4px;                 /* Add 4 pixels of space below this element */
}

/* Style the project subtitle */
.project-subtitle {
  font-size: 16px;                    /* Set font size to 16 pixels */
  color: #ffffff;                        /* Set text color to light gray */
  margin-bottom: 24px;                /* Add 24 pixels of space below this element */
}

/* Style the advisor information */
.advisor {
  font-size: 14px;                    /* Set font size to 14 pixels */
  margin-bottom: 40px;                /* Add 40 pixels of space below this element */
  color: #ffffff;                        /* Set text color to dark gray */
}

/* Style section titles (like "Abstract", "Motivation") */
.section-title {
  font-weight: 700;                   /* Make the text bold */
  text-transform: uppercase;          /* Convert text to all capital letters */
  margin-top: 40px;                   /* Add 40 pixels of space above this element */
  margin-bottom: 12px;                /* Add 12 pixels of space below this element */
  font-size: 14px;                    /* Set font size to 14 pixels */
}

/* Style all paragraph elements */
p {
  font-size: 16px;                    /* Set font size to 16 pixels */
  line-height: 1.6;                   /* Set space between lines to 1.6 times the font size */
  margin-bottom: 24px;                /* Add 24 pixels of space below each paragraph */
  color: #ffffff;                        /* Set text color to dark gray (almost black) */
}

/* ======================================== */
/* POLL CONTAINER STYLES */
/* ======================================== */

/* Main poll container */
.poll-container {
  margin-bottom: 40px;                /* Space below the poll */
  padding: 32px;                      /* Internal spacing */
  border: 2px solid #e0e0e0;          /* Subtle border */
  border-radius: 12px;                /* Rounded corners */
  background-color: #fafafa;          /* Very light background */
  text-align: center;                 /* Center all content */
}

/* Poll question styling */
.poll-question h3 {
  font-size: 20px;                    /* Larger font for the question */
  font-weight: 500;                   /* Medium font weight */
  margin-bottom: 24px;                /* Space below the question */
  color: #333;                        /* Dark gray text */
}

/* Vote buttons container */
.vote-buttons {
  display: flex;                       /* Use flexbox for button layout */
  justify-content: center;             /* Center buttons horizontally */
  gap: 20px;                          /* Space between buttons */
  margin-bottom: 24px;                /* Space below buttons */
  flex-wrap: wrap;                    /* Allow buttons to wrap on small screens */
}

/* Individual vote button styling */
.vote-btn {
  display: flex;                       /* Use flexbox for button content */
  flex-direction: column;              /* Stack text and count vertically */
  align-items: center;                 /* Center content horizontally */
  justify-content: center;             /* Center content vertically */
  min-width: 120px;                   /* Minimum button width */
  padding: 20px 24px;                 /* Internal spacing */
  border: none;                        /* No border */
  border-radius: 8px;                 /* Rounded corners */
  font-size: 16px;                    /* Font size */
  font-weight: 500;                   /* Medium font weight */
  cursor: pointer;                    /* Hand cursor on hover */
  transition: all 0.3s ease;          /* Smooth transitions */
  font-family: 'Roboto', sans-serif;  /* Consistent font */
  position: relative;                 /* For hover effects */
  overflow: hidden;                   /* Hide overflow for effects */
}

/* New neutral styling for all vote buttons */
.vote-btn {
  background-color: white;
  border: 2px solid #ccc;
  color: #111;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.vote-btn:hover {
  border-color: #a855f7; /* Purple on hover */
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(168, 85, 247, 0.2);
}

/* Temporary purple flash on click */
.vote-btn:active {
  background-color: #a855f7;
  color: white;
  transform: scale(0.98);
}


/* Vote text styling */
.vote-text {
  font-size: 18px;                    /* Larger font for vote text */
  font-weight: 600;                   /* Bold font weight */
  margin-bottom: 8px;                 /* Space below text */
}

/* Vote count styling */
.vote-count {
  font-size: 24px;                    /* Large font for count */
  font-weight: 700;                   /* Bold font weight */
  background: rgba(255, 255, 255, 0.2); /* Semi-transparent background */
  padding: 4px 12px;                  /* Internal spacing */
  border-radius: 20px;                /* Rounded background */
  min-width: 40px;                    /* Minimum width for count */
  display: inline-block;              /* Block display for padding */
}

/* Total votes display */
.total-votes {
  margin-top: 20px;                   /* Space above total */
  padding: 16px;                      /* Internal spacing */
  background-color: white;            /* White background */
  border-radius: 8px;                 /* Rounded corners */
  border: 1px solid #e0e0e0;          /* Light border */
}

.total-votes p {
  margin: 0;                          /* Remove default margin */
  font-size: 14px;                    /* Smaller font */
  color: #666;                        /* Medium gray text */
}

.total-votes span {
  font-weight: 600;                   /* Bold font weight */
  color: #333;                        /* Dark gray text */
}

/* ======================================== */
/* TUTORIAL STYLES */
/* ======================================== */

/* Tutorial steps container */
.tutorial-steps {
  margin-bottom: 40px;                /* Space below tutorial */
}

/* Individual tutorial step */
.step {
  margin-bottom: 24px;                /* Space between steps */
  padding: 20px;                      /* Internal spacing */
  background-color: #f8f9fa;          /* Light background */
  border-left: 4px solid #007bff;     /* Blue left border */
  border-radius: 4px;                 /* Rounded corners */
}

.step h4 {
  margin: 0 0 8px 0;                  /* Remove default margin, add bottom margin */
  font-size: 16px;                    /* Font size */
  font-weight: 600;                   /* Bold font weight */
  color: #007bff;                     /* Blue text */
}

.step p {
  margin: 0;                          /* Remove default margin */
  font-size: 14px;                    /* Smaller font */
  color: #666;                        /* Medium gray text */
  line-height: 1.5;                   /* Tighter line height */
}

/* Status display styling */
.status-display {
  padding: 16px;                      /* Internal spacing */
  background-color: #f8f9fa;          /* Light background */
  border-radius: 8px;                 /* Rounded corners */
  border: 1px solid #e0e0e0;          /* Light border */
  margin-bottom: 40px;                /* Space below status */
}

.status-display p {
  margin: 0;                          /* Remove default margin */
  font-size: 14px;                    /* Smaller font */
  font-weight: 500;                   /* Medium font weight */
}

/* ======================================== */
/* RESPONSIVE DESIGN */
/* ======================================== */

/* Mobile devices (screens smaller than 768px) */
@media (max-width: 768px) {
  main {
    margin: 40px auto;                /* Reduce top/bottom margin */
    padding: 0 16px;                  /* Reduce left/right padding */
  }

  header {
    padding: 16px 20px;               /* Reduce header padding */
    flex-direction: column;           /* Stack header items vertically */
    gap: 8px;                         /* Space between header items */
  }

  .poll-container {
    padding: 24px 16px;               /* Reduce poll container padding */
  }

  .vote-buttons {
    flex-direction: column;           /* Stack buttons vertically */
    gap: 16px;                        /* Reduce gap between buttons */
  }

  .vote-btn {
    min-width: 100%;                  /* Full width buttons */
    padding: 16px 20px;               /* Reduce button padding */
  }

  .vote-text {
    font-size: 16px;                  /* Smaller font for mobile */
  }

  .vote-count {
    font-size: 20px;                  /* Smaller count font for mobile */
  }

  .step {
    padding: 16px;                    /* Reduce step padding */
  }
}

/* ======================================== */
/* ANIMATIONS */
/* ======================================== */

/* Slide in animation for vote confirmations */
@keyframes slideIn {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* Slide out animation for vote confirmations */
@keyframes slideOut {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(100%);
    opacity: 0;
  }
}

/* Pulse animation for vote counts */
@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

/* Apply pulse animation when vote counts update */
.vote-count.updated {
  animation: pulse 0.3s ease-in-out;
}