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

body {
  font-family: "Poppins", sans-serif;
}

.screenConotainer {
  width: 375px;
  padding: 88px 16px 238px 16px;
  background-color: #F0F0F0;
}

.container {
  margin: 0 auto;
  width: 343px;
  padding: 48px 12px;
  background-color: #FFFFFF;
  border-radius: 24px 24px 100px 24px;
}

.formItems {
  display: flex;
  width: 320px;
  gap: 28px;
}

.formItem {
  display: flex;
  flex-direction: column;
  width: 87px;
}

.formItem h2 {
  font-family: "Poppins", sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
  letter-spacing: 0.25em;
  text-align: left;
  color: #716F6F;
  margin-bottom: 4px;
}

input {
  padding: 12px 16px;
  font-size: 20px;
  font-weight: 700;
  line-height: 30px;
  letter-spacing: 0.01em;
  text-align: left;
  font-family: "Poppins", sans-serif;
  color: #151515;
  border: 1px solid #DCDCDC;
  border-radius: 8px;
  margin-bottom: 15px;
}

hr {
  margin-bottom: 85px;
  border: 1px solid #DCDCDC;
}

button {
  width: 64px;
  height: 64px;
  gap: 8px;
  border-radius: 216px;
  background: #854DFF;
  border: #854DFF;
  position: relative;
  left: 125px;
  top: 33px;
}

span {
  display: inline-flex;
  align-items: center;
  gap: 40px;
  font-size: 56px;
  font-style: italic;
  font-weight: 800;
  line-height: 61.6px;
  letter-spacing: -0.02em;
  text-align: left;
  color: #8E59FF;

}

span h1{
  font-family: "Poppins", sans-serif;
  font-size: 56px;
  font-style: italic;
  font-weight: 800;
  line-height: 61.6px;
  letter-spacing: -0.02em;
  text-align: left;
  color: #151515;
}

.datesArea {
  width: 295px;
}

.uyariDay {
  font-family: 'Poppins' , sans-serif;
  font-size: 13px;
  font-style: italic;
  font-weight: 400;
  line-height: 21px;
  text-align: left;
  color: #FF5959;
}

.uyariMonth {
  font-family: 'Poppins' , sans-serif;
  font-size: 13px;
  font-style: italic;
  font-weight: 400;
  line-height: 21px;
  text-align: left;
  color: #FF5959;
}

.uyariYear {
  font-family: 'Poppins' , sans-serif;
  font-size: 13px;
  font-style: italic;
  font-weight: 400;
  line-height: 21px;
  text-align: left;
  color: #FF5959;
}

.formItemTitle {
  color: black; /* Başlangıçta siyah renk */
}

.formItem.invalid .formItemTitle {
  color: red;
}

.formItem.invalid input {
  border: 2px solid red;
}
@media(width >= 1110px) {
  .screenConotainer{
    margin: 0 auto;
    padding: 300px 154px;
    width: 1440px;
  }

  .container{
    margin: 0 auto;
    border-radius: 24px 24px 200px 24px;
    width: 840px;
    padding: 56px 56px;
  }

  .formItems {
    width: 728px;
    gap: 120px;
  }

  input {
    width: 160px;
    font-family: 'Poppins' , sans-serif;
    font-size: 32px;
    font-weight: 700;
    line-height: 48px;
    letter-spacing: 0.01em;
    text-align: left;

  }

  button {
    width: 96px;
    height: 96px;
    gap: 8px;
    border-radius: 216px;
    position: relative;
    left: 600px;
    top: 48px;
  }

  span {
    font-family: "Poppins", sans-serif;
    font-size: 104px;
    font-style: italic;
    font-weight: 800;
    line-height: 114.4px;
    letter-spacing: -0.02em;
    text-align: left;
    width: 728px;
  }

  .span h1 {
    font-size: 104px;
    font-style: italic;
    font-weight: 800;
    line-height: 114.4px;
    letter-spacing: -0.02em;
    text-align: left;
    width: 301px;
  }

  button:hover {
    background-color: #151515;
  }

  .formItemTitle {
    color: black; /* Başlangıçta siyah renk */
  }
  
  .formItem.invalid .formItemTitle {
    color: red;
  }
  
  .formItem.invalid input {
    border: 2px solid red;
  }
}