.form-popup {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 9;
  }
  #myForm{
    box-shadow: 0px 0px 0px 10px white,
                0px 0px 0px 20px black,
                0px 0px 0px 100vw rgba(0,0,0,0.5);
  }
  .form-container {
    text-transform: uppercase;
    font-family: 'Black Ops One', cursive;
    max-width: 60vw;
    padding: 10px;
    background: rgb(128,0,32);
background: radial-gradient(circle, rgba(128,0,32,1) 0%, rgba(0,0,0,1) 100%);
  }
  .formtext{
    margin-bottom: 5%;
    font-size: 50px;
    text-align: center;
    background-image: url(../images/beans.jpg);
    background-position: top;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}
.label{
  font-size: 30px;
  color:white;
}
  .form-container input[type=text], .form-container input[type=number]{
    width: 100%;
    padding: 15px;
    margin: 5px 0 22px 0;
    border: none;
    background: #f1f1f1;
  }
  .form-container input[type=text]:focus , .form-container input[type=number]{
    background-color: #ddd;
    outline: none;
  }
  .form-container .btn{
    font-size: 25px;
    margin-left: 50%;
    border-radius: 25px;
    transform: translateX(-50%);
    text-transform: uppercase;
    font-family: 'Black Ops One', cursive;
    color: black;
    padding: 16px 20px;
    border: none;
    cursor: pointer;
    margin-bottom:10px;
    opacity: 1;
  }
  .form-container .cancel{
    margin-top: 0%;
  }
  .form-container .btn:hover{
    background-color: white;
    background-image: none;
    border: black solid 2px;
    color: black;
    text-decoration: underline;
  }
  @media  screen and (max-width : 600px){
    .formtext{
        margin-bottom: 5%;
        font-size: 30px;
        text-align: center;
        background-image: url(../images/beans.jpg);
        background-position: top;
        background-clip: text;
        -webkit-background-clip: text;
        color: transparent;
    }
    .label{
      font-size: 15px;
      color:white;
    }
      .form-container input[type=text], .form-container input[type=number]{
        width: 100%;
        padding: 15px;
        margin: 5px 0 22px 0;
        border: none;
        background: #f1f1f1;
      }
      .form-container input[type=text]:focus , .form-container input[type=number]{
        background-color: #ddd;
        outline: none;
      }
      .form-container .btn{
        font-size: 15px;
        margin-left: 50%;
        border-radius: 25px;
        transform: translateX(-50%);
        text-transform: uppercase;
        font-family: 'Black Ops One', cursive;
        color: black;
        padding: 16px 20px;
        border: none;
        cursor: pointer;
        margin-bottom:10px;
        opacity: 1;
      }
  }