button {
      background-color: purple;
      border: none;
      color: white;
      padding: 12px 32px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 16px;
      margin: 4px 2px;
      cursor: pointer;
  }

  .cross {
      position: fixed;
      top: 4%;
      right: 7%;
      z-index: 999;
  }

  .cross a {
      cursor: pointer;
  }

  .cross i {
      font-size: 40px;
      color: #fff;

      cursor: pointer;
  }
#pass {
    border: none;
    border-bottom: 1px solid rgb(12, 191, 223);

}

#email {
    border: none;
    border-bottom: 1px solid rgb(12, 191, 223);

}

#pass2 {
    border: none;
    border-bottom: 1px solid rgb(12, 191, 223);

}

span,
p {
    color: #cfc3ca;
    font-size: 15px;
    font-weight: 400;
}

h1 {
    font-size: 1.6rem;
    color: #fff;

}

body {
    font-family: NotoSansBold, sans-serif;
    background:rgb(15, 6, 23)


}

#box {
    height: 550px;
    width: 30%;
    margin: auto;
    margin-top: 50px;
    text-align: center;


}

img {
    border-radius: 50%;
    margin-top: 20px;

    margin-left: 15px;

}

a {
    text-decoration: none;
}

#box>#or {

    background-color :rgb(69, 9, 72);
    border-radius: 50%;
    height: 40px;
    width: 40px;
    color: #fff;
    box-sizing: border-box;
    margin: auto;
    margin-left: 190px;
    margin-top: 25px;
    margin-bottom: 35px;
    text-align: center;
   
    padding: 10px;

}

input {
    background-color: transparent;
    border: none;
    margin-top: 10px;
    outline: none;
    resize: none;
    color: aqua;
    margin-left: -180px;
    width: 350px;

    margin-left: 10px;
}

#top {
    color: #cfc3ca;
    font-size: 15px;
    font-weight: 400;
    margin-left: -180px;

}

#top1 {
    color: #cfc3ca;
    font-size: 15px;
    font-weight: 400;
    margin-right: 230px;
}

#top2 {
    color: #cfc3ca;
    font-size: 15px;
    font-weight: 400;
    margin-right: 213px;

}

/* .line {
    width: 86%;
    margin: auto;
    height: 1px;
    background: red;
} */
button {
    background-color: transparent;
    width: 200px;
    text-align: center;
    color: #cfc3ca;
    border-radius: 5px;
    margin-top: 20px;
    margin-bottom: 20px;
}

@media all and (min-width:381px) and (max-width:900px) {
    #box {
        margin: auto;
        width: 50%;
    }

    #box #or {
        margin: auto;
        margin-top: 20px;

        margin-bottom: 10px;
    }

    #top {
        text-align: center;
    }



}

@media all and (min-width:50px) and (max-width:380px) {
    #box {
        width: 100%;
        margin: auto;
        text-align: center;
    }


}