@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,700;1,400;1,800&display=swap');

*{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

body {
    font-family: 'Poppins';
    background-color: hsl(0, 0%, 94%);
}

section {
  width: 50%;
  background-color: hsl(0, 0%, 100%);
  border-radius: 20px 20px 139px 20px;
  padding: 50px;
  margin:100px auto;
}

.row {
  display: grid;
  grid-template-columns: repeat(3, 10.733vw);
}

label {
  color: hsl(0, 1%, 44%);
  font-weight:700;
  font-size: 15px;
  letter-spacing: 1.5px;
}

input {
  width: 85%;
  font-size: 28px;
  font-weight: 700;
  color: hsl(0, 0%, 8%);
  padding: 15px;
  border: 1px solid hsl(0, 0%, 86%);
  border-radius: 7px;
  margin: 0.45rem 0 0.5rem 0;
}
::placeholder {
  color: hsl(0, 1%, 44%);
}

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
}

input[type=number] {
  appearance: textfield;
}
input:hover,
input:focus {
  border-color: hsl(259, 100%, 65%);
  outline-color: hsl(259, 100%, 65%);
  cursor: pointer;
}

/* .sub {
  display: flex;
} */

button {
  cursor: pointer !important;
  height: 86px;
  width: 88px;
  border-radius: 50%;
  background-color: hsl(259, 100%, 65%);
  border: 0px;
  /* margin-left: auto; */
}
.wrapper:before {
  display: inline-block;
  content: " ";
  height: 2px;
  width: 598px;
  background-color: hsl(0, 0%, 86%);
  vertical-align: text-top;
}
button:hover {
  background-color: hsl(0, 0%, 8%);
}

.results {
  font-weight: 800;
  font-size: 75px;
  font-style: italic;
}

.results span { 
  color: hsl(259, 100%, 65%);
}

              /* ERROR MESSAGES */

.empty__string-input {
  border-color: hsl(0, 100%, 67%);
}
.empty__string-label {
  color: hsl(0, 100%, 67%);
}
.empty__string-input:hover,
.empty__string-input:focus {
  border-color: hsl(0, 100%, 67%);
  outline-color: hsl(0, 100%, 67%);
}
.empty__string__text,
.invalid__string__whole,
.invalid__string__day,
.invalid__string__month,
.invalid__string__year {
  color: hsl(0, 100%, 67%);
  font-size: 13px;
  font-style: italic;
  display: none;
}