.formablock{
    display: none;
    /* position: relative;
    top: 0vw;
    width: 56.019vw;
    height: 8.102vw; */
}

.signup{
    color: #ffffff;
}

.form {
    display: flex;
    position: relative;
    align-items: flex-start;
    width: 56.019vw;
    height: 4.898vw;
    margin-top: 0.5vw;
    left: 0.5vw;
    /* margin-left: 9.5vw; */
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
}

.signup{
    position: relative;

}

input.field {
    font-family: "PPPangramSans-Medium";
    font-variant: normal;
    font-size: 1.389vw;
    position: relative; 
    color: #ffffff;
    /* border: 8px solid #ff66e6; */
    outline: none;
    background: none;
    font-weight: 500;
    font-size: 1vw;
     /* line-height: 160%; */
}

.field {
    border: solid #5a5a5a 0px;
    box-shadow: inset 0vw 0vw 1vw 0.1vw #ffffff;
    border-radius: 1vw;
    background-color: #ffffff;
    height: 3.7vw;
    /* flex-grow: 1; */
    padding-left: 1vw;
    margin-top: 1vw;
    width: 20vw;
}

.form-button {
    display: flex;
    /* display: grid; */
    position: relative;
    top: 2.2vw;
    background: #f6f6f621;
    border: solid #ffffff 0px;
    width: 10.764vw;
    height: 2.6vw;
    border-radius: 0.694vw;
    box-shadow: inset 0vw 0vw 0.417vw 0px rgba(0, 0, 0, 0.5);
    flex-direction: column;
}

.form-button:hover, 
.form-button:hover ~ .formbutton{
    box-shadow: inset 0vw 0vw 0.417vw 0px #FF66E6(0, 0, 0, 0.5);
}

.text-button {
    font-family: "PPPangramSans-Semibold";
    font-size: normal;
    font-weight: normal;
    font-size: 2vw;
    /* position: absolute; */
    color: #ffffff;
    justify-self: center;
    align-self: center;
    text-align: center;
}

.signup{
    /* font-family: "PPPangramSans-Semibold";
    font-size: normal;
    font-weight: normal;
    font-size: 2vw;
    left: 0.5vw; */
    position: relative;
    color: #ffffff;
    left: 0.5vw;
    font-family: "PPPangramSans-Semibold";
    font-size: normal;
    font-weight: normal;
    font-size: 2vw;
}
  
.popup {
    position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 5;
  display: none;
  align-items: center;
  justify-content: center;
}
  
.popup-wrapper {
  position: absolute;
  backdrop-filter: blur(10px);
  background: #f6f6f661;
  /* opacity: 50%; */
  width: 100%;
  height: 100%
}
  
.popup-content {
    background-color: #ffffff;
    display: flex;
    /* padding: 20px; */
    border-radius: 1vw;
    position: relative;
    width: 20.833vw;
    height: 8.6vw;
    text-align: center;
    z-index: 6;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
}
  
.next {
    background-color: #a8a8a8;
    border-radius: 20px;
    height: 2vw;
    width: 10vw;
    cursor: pointer;
    border: none;
    margin-top: 22px;
}  

@media screen and (max-width: 800px) {
    .popup-content {
        background-color: #FF66E6;
    display: flex;
    /* padding: 20px; */
    border-radius: 2.5vw;
    position: relative;
    width: 43.833vw;
    height: 26.6vw;
    text-align: center;
    z-index: 6;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    }

    .pop-text {
        font-family: "PPPangramSans-Medium";
        font-variant: normal;
        font-size: 1.389vw;
        position: relative;
        color: #ffffff;
        /* border: 8px solid #ff66e6; */
        outline: none;
        background: none;
        font-weight: 500;
        font-size: 4.4vw;
        top: 1vw;
    }

    .pop-text {
        font-family: "PPPangramSans-Medium";
        font-variant: normal;
        font-size: 1.389vw;
        position: relative;
        color: #ffffff;
        /* border: 8px solid #ff66e6; */
        outline: none;
        background: none;
        font-weight: 500;
        font-size: 4.4vw;
        top: 2vw;
    }

    .next {
        display: grid;
    position: relative;
    top: 5vw;
    background: #f6f6f621;
    border: solid #5a5a5a 0px;
    width: 8vw;
    height: 6vw;
    border-radius: 1vw;
    box-shadow: inset 0vw 0vw 1vw 0px rgba(0, 0, 0, 0.5);
    }

    .ok {
        font-family: "PPPangramSans-Semibold";
        font-size: normal;
        font-weight: normal;
        font-size: 4vw;
        /* position: absolute; */
        color: #ffffff;
        justify-self: center;
        align-self: center;
        text-align: center;
    }

    .formablock {
        position: absolute;
        display: flex;
        top: 0vw;
        width: 100vw;
        height: 194.9vw;
        backdrop-filter: blur(10px);
        background: #f6f6f661;
        flex-direction: column;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: center;
        align-items: center;
        opacity: 0;
        /* transition: opacity 200ms ease-in; */
        pointer-events: none;
    }

    .form {
        display: flex;
        align-items: center;
        width: 40vw;
        height: 32vw;
        margin-top: 1.4vw;
        /* margin-left: 9.5vw; */
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: space-evenly;
        align-content: space-between;
    }

    .field {
        border: solid #5a5a5a 0px;
        box-shadow: inset 0vw 0vw 1vw 0.1vw #FF66E6;
        border-radius: 2vw;
        background-color: #ffffff;
        height: 7.7vw;
        /* flex-grow: 1; */
        padding-left: 2vw;
        margin-top: 1vw;
        width: 60vw;
        /* height: 22vw; */
    }

    input.field {
        font-family: "PPPangramSans-Medium";
        font-variant: normal;
        font-size: 1.389vw;
        position: relative;
        color: #FF66E6;
        /* border: 8px solid #ff66e6; */
        outline: none;
        background: none;
        font-weight: 500;
        font-size: 3vw;
    }

    .form-button {
        /* display: flex; */
        display: grid;
        position: relative;
        top: 2vw;
        background: #f6f6f621;
        border: solid #5a5a5a 0px;
        width: 22vw;
        height: 5vw;
        border-radius: 0.694vw;
        box-shadow: inset 0vw 0vw 0.417vw 0px rgba(0, 0, 0, 0.5);
    }

    .text-button {
        font-family: "PPPangramSans-Semibold";
        font-size: normal;
        font-weight: normal;
        font-size: 4vw;
        /* position: absolute; */
        color: #FF66E6;
        justify-self: center;
        align-self: center;
        text-align: center;
    }
}