body,
html {
  height: 100%;
  overflow-y: hidden;
}

* {
  box-sizing: border-box;
}

/* Bordered form */
form {
  border: 3px solid #f1f1f1;
  border-radius: 30px;
  padding: 15px;
}



.link{
 text-decoration:none;
 color: white;
 padding: 12px;
 height:100px;
 border: white 4px;
 border-radius:20px;
 cursor: pointer;
 background-color:purple
}

.para{
 line-height:40px
}


.bg-text {
  background-color: rgb(0, 0, 0);
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4);
  /* Black w/opacity/see-through */
  color: white;
  border-radius: 30px;
  width: 600px;
  margin-left: -320px;
  position: absolute;
  top: 50%;
  margin-top: -255px;
  left: 30%
}

.back-img1 {
  width: 99%;
  border-radius: 10px;
  height: 96%;
  position: absolute;
}

.back-img2 {
  width: 40%;
  left: 53%;
  top: 26.5%;
  position: absolute;
}

.back-div {
  background-color: rgb(0, 0, 0, 0.5);
  position: absolute;
  width: 99%;
  height: 98%;
  background-position: center;
  filter: blur(8px);
  -webkit-filter: blur(8px)
}

.tit {
  text-align: center;
  font-family: 'ee';
  font-size: 20pt;
}

.label-text {
  font-family: 'e1';
  font-size: 12pt;
  padding: 0px 10px;
  line-height: 60px;
  
}

.label-des {
  font-family: 'e1';
  font-size: 12pt;
  line-height: 30px;
  left:10px;
}

.check {
  text-decoration: none;
  color: Pink;
  font-family: 'e1';
  font-size: 12pt;
}

/* Full-width inputs */
input[type=text],
input[type=password] {
  line-height: 30px;
  width:350px;
  float: right;
  padding: 5px 10px;
  margin: 1px 0px;
  border: 1px solid #ccc;
  box-sizing: border-box;
  border-radius: 10px;
  font-size: 13pt;
}

.err{
  background-color: rgb(0, 0, 0, 0.3);
  width:500px;
  border-radius: 20px;
  top:50%;
  padding: 20px;
  display: none;
  font-family: 'e2';
  margin-top:35px;
  left:30%;
  margin-left:330px;
  color:white;
  position:absolute;
}


.err1{
  background-color: rgb(0, 0, 0, 0.3);
  width:500px;
  border-radius: 20px;
  top:50%;
  padding: 20px;
  display: none;
  font-family: 'e2';
  margin-top:-200px;
  left:30%;
  margin-left:330px;
  color:white;
  position:absolute;
}


.err2{
  background-color: rgb(0, 0, 0, 0.3);
  width:500px;
  border-radius: 20px;
  top:50%;
  padding: 20px;
  display: none;
  font-family: 'e2';
 margin-top:-95px;
  left:30%;
  margin-left:330px;
  color:white;
  position:absolute;
}

/* Set a style for all buttons #04AA6D*/
button {
  border-radius: 10px;
  background-color: #ed00e7;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: 100%;
}

/* Add a hover effect for buttons */
button:hover {
  opacity: 0.8;
}

/* Extra style for the cancel button (red) f44336 */
.cancelbtn {
  width: auto;
  padding: 10px 18px;
  background-color: Red;
}

/* Center the avatar image inside this container */
.imgcontainer {
  text-align: center;
  margin: 24px 0 12px 0;
}

/* Avatar image */
img.avatar {
  width: 40%;
  border-radius: 50%;
}

.container {
  padding: 16px;
}

/* The "Forgot password" text */
span.psw {
  float: right;
  padding-top: 16px;
}

/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
  span.psw {
    display: block;
    float: none;
  }

  .cancelbtn {
    width: 100%;
  }
}


@font-face {
  font-family: ee;
  src: url('fonts/Selectric Script.ttf');
}

@font-face {
  font-family: e1;
  src: url('fonts/Quicksand_Book.otf');
}

@font-face {
  font-family: e2;
  src: url('fonts/Vazirmatn-Bold.ttf');
}