@font-face {
  font-family: 'Lalezar';
  src: url('Lalezar-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Vazir';
  src: url('Vazirmatn-Bold.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}


body {
  background-color: #f0f0f0;
}

h3 {
  font-family: 'Vazir';
}

.realInput {
  font-family: 'Vazir';
  border-radius: 5px;
  border-style: solid;
  border-width: 1px;
  border-color: black;
  padding: 10px;
}


a {
  font-family: 'Vazir';
}


p {
  font-family: 'Vazir';
}


#sub {
  font-family: 'Vazir';
  font-size: 30px;
  background-color: rgb(0, 51, 255);
  color: white;
  border-style: solid;
  border-width: 0px;
  border-radius: 10px;
  transition: 0.5s ease;
  animation: grow 0.5s forwards;


}


@keyframes grow {
  from {
    width: 100px;
  }
  to {
    width: 210px;
  }
}
#sub:hover {
  font-family: 'Vazir';
  font-size: 30px;
  background-color: rgb(86, 120, 255);
  color: white;
  border-style: solid;
  border-width: 0px;
  border-radius: 10px;

}

#forDes {
  display: grid;
  gap: 10px;
  padding: 30px 0px 30px 0px;
}