* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  /* colors */
  --bgHome: #5b99c2;
  --bgContent: #96c9f4;
  --bgButton: #1a4870;
  --txtColor1: #1f316f;
  --txtColor2: #f9dbba;
  color: black;
  /* scrollbar-width: none; */
  scrollbar-width: thin; /* Can be 'auto', 'thin', or 'none' */
  scrollbar-color: #1f316f #96c9f4; /* Handle color and track color */
}
p {
  text-align: center;
  font-family: monospace;
}
a {
  color: inherit;
  text-decoration: none;
}
img {
  width: 100%;
  height: 100%;
}
body {
  overflow-x: hidden;
}
span{
  color: blue;
}

ul li {
  list-style: none;
  cursor: pointer;
}

h1,
h2,
h3,
h4 {
  font-family: monospace;
  width: max-content;
}

/* for the Error massages */
h6 {
  color: red;
}

button {
  border: none;
  border-radius: 30px;
  background-color: var(--bgButton);
  color: var(--bgContent);
  width: 150px;
  height: 5dvh;
  cursor: pointer;
}
button:hover {
  color: var(--bgButton);
  background-color: var(--bgContent);
  transition: 0.5s;
  box-shadow: 3px 3px 3px 3px;
}

/* it is a نقطه ملونه 😂 */
.cirule {
  background-color: rgb(9, 249, 253);
  width: 9px;
  height: 0.9dvh;
  border-radius: 100px;
  display: inline-block;
  margin-top: 0.3rem;
  margin-right: 0.5rem;
}