/* Import Open Sans from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Agdasima:wght@400;700&family=Anonymous+Pro:ital,wght@0,400;0,700;1,400;1,700&display=swap');

/* Apply it globally */
body {
  font-family: 'Open Sans', sans-serif;
  background-color: #f8f9fa;
}


#hero {
	background: linear-gradient(32deg, #00F260, #0575E6);
	background-size: cover;        /* Stretch and scale */
	background-position: center;   /* Center it */
	background-repeat: no-repeat;
	background-attachment: fixed;  /* Make it fixed during scroll */                /* Will only work if html is positioned */
	position: relative;            /* Needed for z-index to take effect */
	padding-top: 8rem !important;
	padding-bottom: 8rem !important;
}

/*------------------------- STUDENT REGISTRATION ----------------------------*/
#student-registration .form-wrapper {
  max-width: 720px;
  margin: 0 auto;
}
#student-registration .readonly-display {
  padding: 0.5rem;
  background-color: #f8f9fa;
  border: 1px solid #ced4da;
  border-radius: 0.375rem;
  min-height: 38px;
}
#student-registration .word-input {
  text-align: center;
  font-weight: bold;
  cursor: pointer;
}
#student-registration .refresh-icon {
  cursor: pointer;
  font-size: 1.5rem;
  margin-left: 10px;
  vertical-align: middle;
}
/*---------------------------------------------------------------------------*/


















/* ---- particles.js container (non-conflicting) ---- */
#particles-js {
  position: fixed; /* Ensures it stays behind other elements */
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -2; /* Behind your .hero-image which is z-index -1 */
  background-color: transparent;
  background-image: none;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  pointer-events: none; /* Prevents interference with UI */
}

/* ---- stats.js styles (optional debug info) ---- */
.count-particles {
  background: rgba(0, 0, 34, 0.8);
  position: absolute;
  top: 48px;
  left: 0;
  width: 80px;
  color: #13E8E9;
  font-size: 0.8em;
  text-align: left;
  text-indent: 4px;
  line-height: 14px;
  padding-bottom: 2px;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: bold;
  z-index: 9999;
  border-radius: 0 0 3px 3px;
}

.js-count-particles {
  font-size: 1.1em;
}