* {
  margin: 0;
  padding: 0;
  font-size: 16px;
  font-family: "Poppins", sans-serif;
  box-sizing: border-box;
}

body {
  background-color: #fcf7ff;
}

/* header  */

header {
  width: 100%;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1rem;
  box-shadow: 0 0 20px rgb(0 0 0 / 20%);
}

.headerclass {
  display: flex;
  justify-content: space-between;
  /* margin: 1.5rem 1rem; */
}

.headerclass a {
  text-decoration: none;
}
/* 
header .background {
  z-index: -1;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: auto;
  opacity: 15%;
} */

.div-logo p {
  font-size: 20px;
  font-weight: 600;
  color: #303030;
}

.dotin {
  color: #777;
  font-size: 14px;
}

.div-logo p:hover {
  -webkit-mask-image: linear-gradient(
    -75deg,
    rgba(0, 0, 0, 0.6) 30%,
    #000 50%,
    rgba(0, 0, 0, 0.6) 70%
  );
  -webkit-mask-size: 200%;

  mask-image: linear-gradient(
    -75deg,
    rgba(0, 0, 0, 0.6) 30%,
    #000 50%,
    rgba(0, 0, 0, 0.6) 70%
  );

  mask-size: 200%;
  animation: shine 2s infinite;
}

@-webkit-keyframes shine {
  from {
    -webkit-mask-position: 150%;
  }

  to {
    -webkit-mask-position: -50%;
  }
}

.div-logo {
  display: flex;
  align-items: center;
  cursor: pointer;
}
/* 
.div-logo p {
  margin-left: 10px;
  font-weight: 600;
  color: black;
} */

.logo {
  width: 30px;
}

/* end header */

/* main content */

form {
  width: 100%;
}
.inputs {
  width: 100%;
  display: flex;
  flex-basis: auto;
  margin: auto;
  justify-content: space-between;
  /* flex-direction: column; */
}

.inputs input,
.inputs select,
.author-details input {
  padding: 2px 15px;
  border: 2px solid rgba(240, 192, 212, 1);
  outline: none;
  background-color: white;
}

/* .year-picker,
.day-picker {
  width: 100px;
} */

/* .month-picker,
.year-picker,
.day-picker {
  background-color: #fff;
} */

.date-picker {
  background-color: white;
}

.txt {
  text-transform: capitalize;
  border: 2px solid rgba(240, 192, 212, 1);
  outline: none;
  resize: none;
  width: 100%;
  padding: 5px 10px;
}

main {
  margin: 1em 4rem;
}

.content {
  margin-top: 1rem;
}

.btn-div {
  width: 100%;
  margin-top: 1rem;
  text-align: center;
}

.submit-btn {
  border: 2px solid white;
  border-radius: 25px;
  padding: 4px 25px;
  color: white;
  background-color: rgba(112, 66, 135, 1);
  cursor: pointer;
}

.gender {
  margin-left: 5px;
}

/* drag and drop */
.drag-area {
  background-color: white;
  height: 300px;
  width: 250px;
  border: 3px dashed rgba(240, 192, 212, 1);
}

.drag-process {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin: 10px auto;
}

h3 {
  margin-bottom: 20px;
  font-weight: 500;
}

.drag-area .icon {
  font-size: 50px;
  color: rgb(238, 102, 158);
}

.drag-area .header {
  font-size: 16px;
  /* font-weight: 500; */
  color: #34495e;
}

.drag-area .support {
  font-size: 12px;
  color: gray;
  margin: 10px 0 15px 0;
}

.drag-area .button {
  font-size: 20px;
  font-weight: 500;
  color: rgb(219, 75, 135);
  cursor: pointer;
}

.drag-area.active {
  border: 2px solid #1683ff;
}

.drag-area img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.clear {
  margin-left: auto;
  margin-right: auto;
  margin-top: 20px;
  background-color: darkred;
  padding: 2px 10px;
  border-radius: 15px;
  display: none;
  /* font-weight: 600; */
  color: rgb(255, 255, 255);
  cursor: pointer;
  text-decoration: none;
  width: 100px;
  text-align: center;
}

hr {
  width: 75%;
  border: 1px solid rgba(240, 192, 212, 1);
  margin-right: auto;
  margin-left: auto;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.author-details p {
  font-weight: 500;
  margin-bottom: 1rem;
}

.author-details div {
  display: block;
  margin-right: 1rem;
}

.error {
  color: red;
}


/* alert modal */

.alert {
	display: none;
	border-radius: 20px;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	background-color: rgb(54, 151, 24);
	margin: 20px auto auto auto;
	z-index: 10;
	padding: 5px 15px;
	width: 200px;
	color: white;
	box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);
	-webkit-animation-name: animatetop;
	-webkit-animation-duration: 0.4s;
	animation-name: animatetop;
	animation-duration: 0.4s;
	text-align: center;
	align-items: center;
}

@media only screen and (max-width: 970px) {
  .inputs {
    flex-direction: column;
  }
  .drag-area {
    /* width: 100%; */
    margin: 10px 0;
  }
}

@media only screen and (max-width: 490px) {
  main {
    margin: 1rem;
  }

  .drag-area {
    width: 100%;
    height: 250px;
  }
  /* .year-picker,
  .day-picker {
    width: 90px;
  } */

  .Name,
  .age,
  .animal,
  .author-name,
  .author-email {
    width: 100%;
  }

  .author-details div {
    margin: 0;
  }

  .other-input {
    margin-top: 10px;
  }
}