:root {
    --cat-margin: 100px;
}

body {
    font-family: 'Inter', sans-serif;
    color: #CBD5E1;
    font-size: 16px;
    margin: 0;
    background-color: #0F172A;
}

h1 {
    font-family: 'Inter', sans-serif; 
    color: #F8FAFC;
    font-weight: 700;
}

a {
    color: #22D3EE;
}

button, input, textarea, select {
    font: inherit;
}

button {
    border-radius: 5px;
    background-color: #22D3EE;
    color: #0F172A;
    width: 80px;
    height: 30px;
}

.text-fields {
    border-radius: 10px;
    background-color:#1E293B;
    padding-left: 6px;
    color:#22D3EE;
    border: 2px solid #22D3EE;
}

.button-styling {
    border: 2px solid #0F172A;
}

/* Particle Text */
.particle-text {
  position: relative;
  width: 100%;
  height: 360px;
  margin: 0;
  overflow: hidden;
  font-size: clamp(48px, 12vw, 128px);
  font-weight: 700;
}

.particle-text canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.particle-text__label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
} 

/* Home page */
.home-body {
    margin: 0;
    padding: 0;
}

.home-header{
    display: flex;
    align-items: center;
}

.big-text {
    font-size: 100px;
    margin-bottom: 20px
}

.header-site-name {
    margin-left: 100px;
    margin-right: 100px;
}

.home-segment-one {
    display: flex;
    padding: 40px;
    height: 400px;
    align-items: center;
    justify-content: center;
    background-color: #1E293B;
}

.home-segment-two {
    display: flex;
    flex-direction: column;
    padding: 200px;
    height: 200px;
    align-items: center;
    justify-content: center;
}

#countdown-text {
    color: #22D3EE;
    font-size: 100px;
    font-weight: 600;
}

#countdown {
    color: #22D3EE;
    font-size: 100px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.big-title-text {
    font-size: 150px;
    text-align: center;
    flex: none;
}

.title-text {
    font-size: 100px;
    margin-top: -5px;
    flex: none;
}

.header-link {
    text-decoration: none;
    color: inherit;
}

.header-nav {
    display: flex;
    align-items: center;
    gap: 40px;
}

.header-nav a {
    margin: 0;
    color: #22D3EE;
}

.home-header .header-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
}

.home-header .header-nav > a {
    margin: 0;
    padding: 0;
    width: auto;
    min-width: 0;
    flex: 0 0 auto;
}

.image-general {
    flex: auto;
}

/* Register Selection Page */
.register-link{
    color: #22D3EE;
    margin-left: auto;
    margin-right: 100px;
}

.register-h1 {
    text-align: center;
    margin-top: 100px;
    font-size: 30px;
}

.register-selection {
    display: flex;
    justify-content: center;
    align-items: center;
}

.register-selection > a > div {
    flex: none;
    height: 400px;
    width: 330px;
    border-radius: 15px;
    margin-top: 100px;
    margin-bottom: 100px;
    margin-right: 150px;
    margin-left: 150px;
    background-color: #1E293B;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

/* Border Glow */
.register-selection .border-glow-inner {
  padding: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: transparent;
}

.border-glow-card {
  --card-bg: #1E293B;
  --border-radius: 28px;
  --glow-color: #22D3EE;
  --glow-radius: 40px;
  --color-one: #A78BFA;
  --color-two: #F472B6;
  --color-three: #22D3EE;

  --cursor-angle: 45deg;
  --glow-opacity: 0;
  --color-opacity: 0;

  --mesh:
    radial-gradient(
      at 80% 55%, var(--color-one), transparent 55%
    ),
    radial-gradient(
      at 20% 20%, var(--color-two), transparent 55%
    ),
    radial-gradient(
      at 80% 10%, var(--color-three), transparent 55%
    ),
    linear-gradient(var(--color-one), var(--color-three));

  --cone: conic-gradient(
    from var(--cursor-angle),
    black 0%,
    transparent 20%,
    transparent 80%,
    black 100%
  );

  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  width: 100%;
  max-width: 480px;
  border: 1px solid #475569;
  border-radius: var(--border-radius);
  background: var(--card-bg);
  color: #F8FAFC;
  font-family: 'Inter', sans-serif;
  overflow: visible;
}

.border-glow-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  border: 2px solid transparent;
  border-radius: inherit;
  background:
    linear-gradient(var(--card-bg), var(--card-bg)) padding-box,
    var(--mesh) border-box;

  -webkit-mask-image: var(--cone);
  mask-image: var(--cone);

  opacity: var(--color-opacity);
  transition: opacity 0.25s ease;
  pointer-events: none;
  z-index: 0;
}

.border-glow-card::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background: var(--mesh);

  -webkit-mask-image: var(--cone);
  mask-image: var(--cone);

  opacity: calc(var(--color-opacity) * 0.12);
  transition: opacity 0.25s ease;
  pointer-events: none;
  z-index: 0;
}

.border-glow-card > .edge-light {
  position: absolute;
  inset: calc(-1 * var(--glow-radius));
  border-radius: inherit;

  -webkit-mask-image: var(--cone);
  mask-image: var(--cone);

  opacity: var(--glow-opacity);
  transition: opacity 0.25s ease;
  pointer-events: none;
  z-index: 1;
}

.border-glow-card > .edge-light::before {
  content: "";
  position: absolute;
  inset: var(--glow-radius);
  border-radius: inherit;

  box-shadow:
    inset 0 0 0 1px var(--glow-color),
    inset 0 0 8px -3px var(--glow-color),
    0 0 8px -3px var(--glow-color),
    0 0 20px -7px var(--glow-color);
}

.border-glow-inner {
  position: relative;
  z-index: 2;
  padding: 32px;
}

.border-glow-inner h2 {
  margin: 0 0 12px;
}

.border-glow-inner p {
  margin: 0;
  color: #CBD5E1;
  line-height: 1.6;
}

@media (prefers-reduced-motion: reduce) {
  .border-glow-card::before,
  .border-glow-card::after,
  .border-glow-card > .edge-light {
    transition: none;
  }
}

.sign-in-box.border-glow-card {
  --card-bg: #1E293B;
  --border-radius: 15px;
  overflow: visible;
  box-sizing: content-box;
}

.sign-in-box > .border-glow-inner {
  padding: 0;
  background: transparent;
}

.register-selection-images {
    width: 270px;
    height: 270px;
    flex: none;
}

/* Register Competitor */
.register-title {
    color: #22D3EE;
    font-size: 70px;
    font-weight: 600;
}


.register-competitor-info {
    margin-top: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex-direction: column;
}

.register-competitor-info > div {
    border-radius: 15px;
    background-color: #1E293B;
    padding: 40px;
    width: 400px;
    height: 700px;
    text-align: left;
    align-items: center;
    flex: none;
}

.register-competitor-info > .border-glow-card {
  box-sizing: content-box;
}

.register-competitor-info .border-glow-inner {
  padding: 0;
}

#team-names-and-grades {
    margin-bottom: 0px;
}

.name-input, input[type="password"]{
    width: 200px;
    height: 30px;
    font-size: 18px;
    margin-top:8px;
}

input[type="email"]{
    field-sizing: content;
    width: 300px;
    height: 30px;
    font-size: 18px;
    margin-top:8px;
}

#grade, #category {
    size:80px;
    font-size: 20px;
    margin-top:8px;
}

#confirm-password:user-invalid {
    border-color: #dc3545;
    background-color: #fff5f5;
    outline-color: #dc3545;
}

.register-button, .register-button a {
    border-radius: 5px;
    background-color: #22D3EE;
    color: #0F172A;
    width: 80px;
    height: 30px;
}

/* Sign in page */
.sign-in-info {
    margin-top: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex-direction: column;
}

.sign-in-info > div {
    border-radius: 15px;
    background-color: #1E293B;
    padding: 40px;
    width: 300px;
    height: 300px;
    text-align: left;
    align-items: center;
    flex: none;
}

.sign-in-button, .sign-in-button a {
    border-radius: 5px;
    background-color: #22D3EE;
    color: #0F172A;
    width: 70px;
    height:30px;
}

/* Verification page */
.verification {
    margin-top: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex-direction: row;
}

.verification > div {
    border-radius: 15px;
    background-color: #1E293B;
    margin-top: 150px;
    padding: 40px;
    width: 450px;
    height: 500px;
    text-align: left;
    align-items: center;
    flex: none;
    flex-direction: column;
    display: flex;
    align-items: center;
    text-align: center;
}

.verification .verification-box > div {
    display: flex;
    flex-direction: row;
}

.verification-input {
    width: 3ch;
    height: 4ch;
    margin: 10px;
    font-size: 30px;
    text-align: center;
}
/* Rules */
.rules-body {
    align-items: center;
    text-align: center;
}

.rules-full {
    display: flex;
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 100px;
    padding-left: 100px;
    padding-right: 100px;
    text-align: center;
    justify-content: center;
    flex-direction: row;
    align-items: flex-start;
}

.rules-full > .border-glow-card{
    background-color:#1E293B;
    width: 50px;
    height: auto;
    border-radius: 25px;
    flex: 1 1 0%;
    margin-right: 100px;
    margin-left: 100px;
    display: block;
    align-items: center;
    justify-content: center;
}

.rules-full .border-glow-inner{
    padding: 0;
    width: 100%
}

.rule-toggle {
    display: block;
    width: 100%;
    min-height: 100px;
    padding: 20px;
    box-sizing: border-box;
    border: none;
    border-radius: 25ps;
    background: transparent;
    color: inherit;
    font-family: inherit;
    font-size: 50px;
    text-align: center;
    cursor: pointer;
}

.rules-full .rule-details {
    padding: 20px 28px;
    border-top: 1px solid #475569;
    border-radius: 0 0 25px 25px;
    background: rgb(0 0 0 / 15%);
    text-align: left;
    font-size: 16px;
    line-height: 1.6;
}

.rules-full .rule-details[hidden] {
    display: none;
}

.rule-details ol {
    margin: 0;
    padding-left: 24px;
}

.rule-details li + li {
    margin-top: 10px;
}

/* Submit code */
.submit-space {
    display: flex;
    margin-left: 20px;
    margin-right: 20px;
    text-align: center;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

#description {
    width: 382px;
    height: 100px;
    padding: 10px 12px;
    box-sizing: border-box;
    resize: vertical;
}

#github-link {
    width: 382px;
    min-width: 382px;
    transition: width 0.1s ease;
    box-sizing: border-box;
}

.large-text {
    font-size: 100px;
    flex: none;
}

/* Leaderboard */
.leaderboard-space {
    display: flex;
    margin-left: 20px;
    margin-right: 20px;
    text-align: center;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

.selection-button, .selection-button a {
    margin-top: -50px;
    margin-bottom: 50px;
    border-radius: 15px;
    background-color: #22D3EE;
    color: #0F172A;
    width: 100px;
    height: 30px;
}

.leaderboard-categories {
    display: flex;
    height: 50px;
    width: 800px;
    background-color: #1E293B;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.sort-button-place {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: right;
}

.leaderboard-categories #cat-team-name {
    margin-right: var(--cat-margin);
}

.leaderboard-categories #cat-proj-name {
    margin-right: var(--cat-margin);
    margin-left: var(--cat-margin);
}

.leaderboard-categories #cat-likes {
    margin-left: var(--cat-margin);
}

.submission1 {
    display: flex;
    height: 50px;
    width: 800px;
    background-color: #1E293B;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.submission1 #sub1-user {
    margin-right: var(--cat-margin);
    font-weight: 16;
}

.submission1 #sub1-proj-name {
    margin-right: var(--cat-margin);
    margin-left: var(--cat-margin);
    font-weight: 16;
}

.submission1 #sub1-likes {
    margin-left: var(--cat-margin);
    font-weight: 16;
}

/* View Project Page */
.name-and-description {
    display: flex;
    height: 200px;
    background-color: #1E293B;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.name-and-description h1 {
    margin-right: 50px;
    margin-left: 200px;
    flex: 1 0 0%;
    min-width: 0
}

.name-and-description p {
    margin-right: 50px;
    margin-left: 50px;
    flex: 1 0 0%;
    overflow-wrap: break-word;
    min-width: 0
}

.proj-links {
    display: flex;
    height: 200px;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.proj-links p {
    margin-right: 250px;
    margin-left: 250px;
}

.proj-place-button {
    display: flex;
    align-items: center;
    justify-content: center;
}

.scoring-button {
    width: 150px;
}