/* Interactive Elements */

button,

input[type="submit"] {

  background-color: #000000;

  color: #ffffff;

  padding: 0.5rem 1rem;

  border: none;

  border-radius: 4px;

  cursor: pointer;

  transition: background-color 0.3s ease;

}



button:hover,

input[type="submit"]:hover {

  background-color: #333333;

}



input[type="text"],

input[type="email"],

input[type="password"] {

  border: 1px solid #000000;

  padding: 0.5rem;

  width: 100%;

  border-radius: 4px;

}



input[type="text"]:focus,

input[type="email"]:focus,

input[type="password"]:focus {

  border-color: #333333;

  outline: none;

}



input[type="checkbox"],

input[type="radio"] {

  display: none;

}



input[type="checkbox"] + label,

input[type="radio"] + label {

  position: relative;

  padding-left: 1.5rem;

  cursor: pointer;

}



input[type="checkbox"] + label:before,

input[type="radio"] + label:before {

  content: '';

  position: absolute;

  left: 0;

  top: 0;

  width: 1rem;

  height: 1rem;

  border: 1px solid #000000;

  border-radius: 4px;

  background-color: #ffffff;

}



input[type="checkbox"]:checked + label:before {

  background-color: #000000;

}