.formablock{
    position: absolute;
    display: flex;
    top: 0vw;
    width: 100vw;
    height: 47.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; 
}

.formablock:target{
    opacity: 1;
    pointer-events: auto; 
} 

.form {
    display: flex;
    align-items: center;
    width: 60vw;
    height: 17vw;
    margin-top: 1.4vw;
    /* margin-left: 9.5vw; */
    flex-direction: column;
    flex-wrap: nowrap;
}

.signup{
    position: relative;

}

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: 1vw;
     /* line-height: 160%; */
}

.field {
    border: solid #5a5a5a 0px;
    box-shadow: inset 0vw 0vw 1vw 0.1vw #FF66E6;
    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: 2vw;
    background: #f6f6f621;
    border: solid #5a5a5a 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);
}

.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: #FF66E6;
    justify-self: center;
    align-self: center; 
    text-align: center;
}

.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: #FF66E6;
    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;
}

.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: 1.4vw;
    top: 1vw;
}

.ok{
    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; 
}

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

.next:hover, 
.next:hover ~ .next{
    box-shadow: inset 0vw 0vw 0.417vw 0px rgb(254, 253, 253);
}

@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: 216.1vw;
    backdrop-filter: blur(10px);
    background: #f6f6f661;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    }

    .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;
    }
}