/* Reset some default styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  /* Use a sans-serif font for the body text */
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  /* Set a light gray background color */
  background-color: #f5f5f5;
  /* Add some padding to the body */
}

h1,
h2 {
  /* Center the heading and add some margin */
  text-align: center;
  margin-bottom: 20px;
}

form {
  /* Center the form and set a max width */
  margin: 0 auto;
  max-width: 600px;
}

label {
  /* Add some margin to the labels */
  margin-top: 10px;
  display: block;
}

input {
  /* Style the inputs */
  width: 100%;
  padding: 10px;
  margin-top: 5px;
  border: 1px solid #ddd;
  border-radius: 5px;
}

button {
  /* Style the button */
  display: block;
  width: 100%;
  padding: 10px;
  margin-top: 20px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

button:hover {
  /* Add a hover effect to the button */
  background-color: #0056b3;
}

#results {
  /* Add some margin to the results div */
  margin-top: 20px;
}

#network {
  /* Center the network div and add some margin */
  margin: 20px auto;
  border: 1px solid #ddd;
  border-radius: 5px;
}

#warning {
  /* Style the warning message */
  background-color: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
  border-radius: 5px;
  padding: 10px;
  margin-top: 20px;
  text-align: center;
  font-weight: bold;
}

li {
  background-color: #ffffff;
  color: #000000;
  border: 3px solid #000000;
  border-radius: 5px;
  padding: 10px;
  margin-top: 20px;
  text-align: center;
  cursor: pointer;
  font-weight: bold;
}

li:hover {
  background-color: #ffe206;
  color: #000000;
  border: 3px solid #000000;
  border-radius: 5px;
  padding: 10px;
  margin-top: 20px;
  text-align: center;
  cursor: pointer;
  font-weight: bold;
}

footer {
  text-align: center;
  padding: 20px;
}

a {
  color: #000000;
  text-decoration: none;
}
/* HTML: <div class="loader"></div> */
/* HTML: <div class="loader"></div> */
.loader {
  width: 150px;
  aspect-ratio: 1;
  display: grid;

  animation: l16 1s infinite linear;
  /* ceneter the loader and flows over the page */
  margin: 0 auto;

  top: 50%;
  left: 50%;
}

.loader {
  width: 40px;
  aspect-ratio: 1;
  --c: linear-gradient(#000 0 0);
  --r1: radial-gradient(farthest-side at bottom, #000 93%, #0000);
  --r2: radial-gradient(farthest-side at top, #000 93%, #0000);
  background: var(--c), var(--r1), var(--r2), var(--c), var(--r1), var(--r2),
    var(--c), var(--r1), var(--r2);
  background-repeat: no-repeat;
  animation: l2 1s infinite alternate;
}
/* HTML: <div class="loader"></div> */
.loader {
  margin-top: 50px;
  width: calc(80px / cos(45deg));
  height: 14px;
  background: repeating-linear-gradient(-45deg, #000 0 15px, #0000 0 20px)
    left/200% 100%;
  animation: l3 2s infinite linear;
}
@keyframes l3 {
  100% {
    background-position: right;
  }
}