@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 95vh;
  background-color: #f9fbfe;
  font-family: "Roboto", system-ui;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 806px;
  height: 500px;
  background-color: #4872b1;
  border-radius: 10px;
  margin-top: 10px;
  padding-bottom: 20px;
  box-shadow: 2px 3px 2px rgba(0, 0, 0, 0.4);
}
.flex {
  display: flex;
  gap: 1px;
  width: 370px;
}
.container .box {
  width: 620px;
  padding: 20px;
}
.title {
  font-size: 30px;
  text-align: center;
  color: #fafcff;
  margin-top: 30px;
  margin-bottom: 28px;
}
.search {
  display: flex;
  justify-content: flex-start;
  align-items: end;
  gap: 10px;
  margin-bottom: 40px;
}
.input-search {
  display: grid;
}
.input-search label {
  font-size: 20px;
  font-weight: bold;
  color: #444444;
  margin-bottom: 2px;
}

.input-xl {
  text-indent: 10px;
  font-size: 20px;
  font-style: italic;
  width: 380px;
  height: 40px;
  outline: none;
  color: rgba(68, 68, 68, 0.8);
}
.input-lg {
  font-size: 20px;
  font-style: italic;
  width: 212px;
  height: 40px;
  outline: none;
  text-indent: 10px;
  color: rgba(68, 68, 68, 0.8);
}
.input-md {
  font-size: 20px;
  font-style: italic;
  width: 100px;
  height: 40px;
  outline: none;
  text-indent: 10px;
  color: rgba(68, 68, 68, 0.8);
}

#buscar {
  font-size: 20px;
  color: rgb(227, 238, 248);
  background-color: #705fda;
  width: 200px;
  height: 40px;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  transition: 0.4s ease;
  border: 1px solid #5a49c5;
}
#buscar:hover {
  border: 1px solid #61df58;
  background-color: #1db012;
}
#limpar {
  font-size: 20px;
  color: rgb(227, 238, 248);
  background-color: transparent;
  width: 200px;
  height: 40px;
  margin-right: 5px;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  transition: 0.4s ease;
  border: 1px solid #d17179;
}
#limpar:hover {
  background-color: #e13543;
  border: 1px solid #bb1d2a;
}
.container .box button {
  height: 40px;
}

.data-contents {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 600px;
}
.data-contents div {
  margin-right: 10px;
  margin-bottom: 5px;
}
.data-contents label {
  display: block;
  font-size: 20px;
  font-weight: bold;
  line-height: 1.4;
  color: #444444;
  margin-bottom: 2px;
}

/* ----------  Responsive Layout ----------- */

@media (max-width: 704px) {
  body {
    height: 90vh;
    background-color: #4872b1;
  }
  .container .box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .container {
    margin-top: 50px;
    height: auto;
    border-radius: 5px;
  }
  .title {
    margin-top: 10px;
  }
  .flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 380px;
  }
  .search {
    justify-content: center;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
  }
  #buscar {
    width: 380px;
  }

  #limpar {
    width: 380px;
  }
  .data-contents div {
    margin-right: 0px;
    margin-bottom: 0px;
  }
  .data-contents {
    justify-items: center;
    align-content: center;
    gap: 8px;
    width: 400px;
  }
  .data-contents {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .data-contents label {
    width: 100px;
  }

  .input-lg {
    width: 380px;
  }
  .input-md {
    width: 180px;
  }
}

@media (max-width: 443px) {
  #buscar {
    width: 300px;
  }

  #limpar {
    width: 300px;
  }
  .flex {
    width: 300px;
  }

  .input-xl {
    width: 300px;
  }

  .input-lg {
    width: 300px;
  }
  .input-md {
    width: 140px;
  }
}

.git {
  text-decoration: none;
  margin-top: 30px;
}