textarea {
  height: 150px;
}

.title {
  margin-top: 50px;
  margin-bottom: 0;
}

.title-number {
  font-size:48px;
  margin: 4px;
}

.subtitle {
  margin-top: 5px;
  margin-bottom: 15px;
  font-size: 18px;
}

.jqEasyCounterMsg {
  font-family: Poppins-Regular, sans-serif !important;
}

/* Theme Toggle Button */
.theme-toggle {
  font-size: 20px;
  padding: 4px 8px;
  margin-left: 10px;
  vertical-align: middle;
  cursor: pointer;
  border: none;
  background: transparent;
  line-height: 1;
}

.theme-toggle:hover {
  background: rgba(0,0,0,0.1);
  border: none;
}

/* Dark Mode - via class or system preference */
@media (prefers-color-scheme: dark) {
  body:not(.light-mode) {
    background: #1a1a1a;
    color: #e0e0e0;
  }

  body:not(.light-mode) h1,
  body:not(.light-mode) h2,
  body:not(.light-mode) h3,
  body:not(.light-mode) h4,
  body:not(.light-mode) h5,
  body:not(.light-mode) h6 {
    color: #f0f0f0;
  }

  body:not(.light-mode) a,
  body:not(.light-mode) a:visited {
    color: #8ab4f8;
  }

  body:not(.light-mode) a:hover,
  body:not(.light-mode) a:focus {
    color: #aecbfa;
  }

  body:not(.light-mode) strong {
    color: #f0f0f0;
  }

  body:not(.light-mode) button:not(.theme-toggle),
  body:not(.light-mode) input[type="submit"],
  body:not(.light-mode) input[type="reset"],
  body:not(.light-mode) input[type="button"] {
    background-color: #333;
    color: #e0e0e0;
    border: 1px solid #555;
  }

  body:not(.light-mode) button:not(.theme-toggle):hover,
  body:not(.light-mode) input[type="submit"]:hover,
  body:not(.light-mode) input[type="reset"]:hover,
  body:not(.light-mode) input[type="button"]:hover {
    background: #444;
    color: #fff;
    border: 1px solid #666;
  }

  body:not(.light-mode) button:not(.theme-toggle):active,
  body:not(.light-mode) input[type="submit"]:active,
  body:not(.light-mode) input[type="reset"]:active,
  body:not(.light-mode) input[type="button"]:active {
    background: #555;
  }

  body:not(.light-mode) input[type="text"],
  body:not(.light-mode) input[type="password"],
  body:not(.light-mode) input[type="email"],
  body:not(.light-mode) textarea,
  body:not(.light-mode) select {
    background: #2a2a2a;
    border: 1px solid #444;
    color: #e0e0e0;
  }

  body:not(.light-mode) input[type="text"]:focus,
  body:not(.light-mode) input[type="password"]:focus,
  body:not(.light-mode) input[type="email"]:focus,
  body:not(.light-mode) textarea:focus {
    border: 1px solid #666;
    color: #f0f0f0;
    box-shadow: 0 0 3px rgba(255,255,255,.2);
  }

  body:not(.light-mode) blockquote,
  body:not(.light-mode) blockquote p {
    color: #aaa;
  }

  body:not(.light-mode) blockquote {
    border-left: 1px solid #444;
  }

  body:not(.light-mode) hr {
    border-color: #444;
  }

  body:not(.light-mode) .theme-toggle:hover {
    background: rgba(255,255,255,0.1);
  }
}

/* Dark Mode - via manual toggle */
body.dark-mode {
  background: #1a1a1a;
  color: #e0e0e0;
}

body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6 {
  color: #f0f0f0;
}

body.dark-mode a,
body.dark-mode a:visited {
  color: #8ab4f8;
}

body.dark-mode a:hover,
body.dark-mode a:focus {
  color: #aecbfa;
}

body.dark-mode strong {
  color: #f0f0f0;
}

body.dark-mode button:not(.theme-toggle),
body.dark-mode input[type="submit"],
body.dark-mode input[type="reset"],
body.dark-mode input[type="button"] {
  background-color: #333;
  color: #e0e0e0;
  border: 1px solid #555;
}

body.dark-mode button:not(.theme-toggle):hover,
body.dark-mode input[type="submit"]:hover,
body.dark-mode input[type="reset"]:hover,
body.dark-mode input[type="button"]:hover {
  background: #444;
  color: #fff;
  border: 1px solid #666;
}

body.dark-mode button:not(.theme-toggle):active,
body.dark-mode input[type="submit"]:active,
body.dark-mode input[type="reset"]:active,
body.dark-mode input[type="button"]:active {
  background: #555;
}

body.dark-mode input[type="text"],
body.dark-mode input[type="password"],
body.dark-mode input[type="email"],
body.dark-mode textarea,
body.dark-mode select {
  background: #2a2a2a;
  border: 1px solid #444;
  color: #e0e0e0;
}

body.dark-mode input[type="text"]:focus,
body.dark-mode input[type="password"]:focus,
body.dark-mode input[type="email"]:focus,
body.dark-mode textarea:focus {
  border: 1px solid #666;
  color: #f0f0f0;
  box-shadow: 0 0 3px rgba(255,255,255,.2);
}

body.dark-mode blockquote,
body.dark-mode blockquote p {
  color: #aaa;
}

body.dark-mode blockquote {
  border-left: 1px solid #444;
}

body.dark-mode hr {
  border-color: #444;
}

body.dark-mode .theme-toggle:hover {
  background: rgba(255,255,255,0.1);
}

label {
  display: block;
  font-size: 14px;
  margin-bottom: 6px;
}

@font-face {
  font-family: 'Poppins-Regular';
  src: url('../fonts/Poppins-Regular.eot');
  src: url('../fonts/Poppins-Regular.eot?#iefix') format("embedded-opentype"),
  url('../fonts/Poppins-Regular.woff') format("woff"),
  url('../fonts/Poppins-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'Poppins-Medium';
  src: url('../fonts/Poppins-Medium.eot');
  src: url('../fonts/Poppins-Medium.eot?#iefix') format("embedded-opentype"),
  url('../fonts/Poppins-Medium.woff') format("woff"),
  url('../fonts/Poppins-Medium.ttf') format('truetype');
}