@import url('https://fonts.googleapis.com/css2?family=Karla&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lilita+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Comic+Neue&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oswald&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Alatsi&display=swap');

*{
  font-size: 14px;
}

body {
	background-color: black;
	color: #f4f4f5;
  font-family: 'Karla', sans-serif;
}

.ubuntu{
	font-family: 'Ubuntu', sans-serif;
}

.lil{
    font-family: 'Lilita One', cursive;
 }

.div {
  padding: 1rem; /* Equivalent to p-2 in Tailwind */
  background-color: #27272a; /* Equivalent to bg-zinc-700 in Tailwind */
  border-radius: 0.25rem; /* Equivalent to rounded in Tailwind */
    color: #a1a1aa;
}

.input {
  padding: 0.5rem; /* Equivalent to p-2 in Tailwind */
  background-color: #3f3f46; /* Equivalent to bg-zinc-600 in Tailwind */
  border-radius: 0.25rem; /* Equivalent to rounded in Tailwind */
  width: 100%; /* Equivalent to w-full in Tailwind */
  font-family: 'Comic Neue', cursive;
  color: white;
}

.label {
  display: block; /* Equivalent to block in Tailwind */
  font-size: 0.875rem; /* Equivalent to text-sm in Tailwind */
  color: #d4d4d8;
}

.button {
  background-color: #0ea5e9 !important; /* Equivalent to bg-sky-500 in Tailwind */
  color: white; /* Equivalent to text-white in Tailwind */
  font-family: 'Ubuntu', sans-serif; /* Equivalent to ubuntu in Tailwind */
  padding: 0.5rem;
  width: 100%;
  border: 1px solid #7dd3fc; /* Equivalent to border and border-sky-300 in Tailwind */
  border-radius: 0.25rem;
}

.button:hover {
  background-color: #0369a1 !important; /* Equivalent to hover:bg-sky-700 in Tailwind */
}

.error {
  padding-left: 0.5rem; /* Equivalent to px-2 in Tailwind */
  padding-right: 0.5rem; /* Equivalent to px-2 in Tailwind */
  padding-top: 0.25rem; /* Equivalent to py-1 in Tailwind */
  padding-bottom: 0.25rem; /* Equivalent to py-1 in Tailwind */
  background-color: #fee2e2; /* Equivalent to bg-red-200 in Tailwind */
  border: 1px solid #f56565; /* Equivalent to border and border-red-300 in Tailwind */
  color: #b91c1c; /* Equivalent to text-red-500 in Tailwind */
}

.success {
  padding-left: 0.5rem; /* Equivalent to px-2 in Tailwind */
  padding-right: 0.5rem; /* Equivalent to px-2 in Tailwind */
  padding-top: 0.25rem; /* Equivalent to py-1 in Tailwind */
  padding-bottom: 0.25rem; /* Equivalent to py-1 in Tailwind */
  background-color: #bbf7d0; /* Equivalent to bg-red-200 in Tailwind */
  border: 1px solid #86efac; /* Equivalent to border and border-red-300 in Tailwind */
  color: #15803d; /* Equivalent to text-red-500 in Tailwind */
}

.comic{
      font-family: 'Comic Neue', cursive;
}

/* Style for the "heading" class */
.heading {
  font-family: 'Ubuntu', sans-serif;
  margin-top: -1.75rem; /* Equivalent to -7 in Tailwind (7 * 0.25rem) */
  font-size: 1.125rem; /* Equivalent to text-lg in Tailwind */
}

/* Style for the inner span element */
.heading span {
  padding: 0.25rem 1rem; /* Equivalent to px-2 py-1 in Tailwind */
  background-color: #e0f2fe; /* Equivalent to bg-zinc-300 in Tailwind */
  color: #0369a1; /* Equivalent to text-black in Tailwind */
  border-radius: 9999px; /* Equivalent to rounded-full in Tailwind */
}

.heading1{
  font-family: 'Ubuntu', sans-serif;
  background-color: #e0f2fe; /* Equivalent to bg-zinc-300 in Tailwind */
  color: #0369a1; /* Equivalent to text-black in Tailwind */
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
  padding: 0.25rem;
  padding-left: 0.5rem;

}

.oswald{
  font-family: 'Oswald', sans-serif;
}

.Alatsi{
font-family: 'Alatsi', sans-serif;
}

.custom-border {
    border-top-width: 4px;
    border-color: #DC2626; /* Red-700 */
    border-style: solid;
}

.custom-margin {
    margin-top: -1.5rem; /* -mt-6 equivalent */
}

.custom-text {
    font-size: 1.875rem; /* text-3xl equivalent */
    color: #facc15; /* Yellow-400 */
    font-family: 'Oswald', sans-serif;
    background-color: #18181b; /* Zinc-900 */
    padding-right: 0.5rem; /* pr-2 equivalent */
}

.custom-text-white {
    color: #ffffff; /* White text */
    font-size: 1.875rem; /* text-3xl equivalent */
}