:root {
    --primary-color: #fefbf1;
    --secondary-color: black;
    --tertiary-color: #01cb36;

}

@font-face {
    font-family: poppin;
    src: url('../fonts/Poppins-Regular.ttf') format('truetype'),

}

@font-face {
    font-family: mono;
    src: url('../fonts/MartianMono-ExtraBold.ttf') format('truetype'),

}

@font-face {
    font-family: tung;
    src: url('../fonts/Tungsten-Bold.ttf') format('truetype'),

}

@font-face {
    font-family: space;
    src: url('../fonts/Space_Mono/SpaceMono-Regular.ttf') format('truetype'),

}

@font-face {
    font-family: hel;
    src: url('../fonts/helvectical/HelveticaNowDisplay-Medium.ttf') format('truetype'),

}

@font-face {
    font-family: hel-thin;
    src: url('../fonts/helvectical/HelveticaNowDisplay-Regular.ttf') format('truetype'),

}


.popup{
    position: fixed;
    top: 50%;
    left: 50%;
transform: translate(-50%,-50%);
    width: min(700px, 80%);
    min-height: fit-content;
    
    background-color: var(--primary-color);
    border-top: 1px solid rgb(200, 200, 200)  ;
    box-shadow: inset 0px 0px 10px rgba(138, 138, 138, 0.884);
    display: flex;
    flex-direction: column;
    padding: calc(23px + 1.7vw)  15px;
    z-index: 999;
    transition:all .7s ease;
    /* border: 5px solid red; */
}

.popup h2{
    font-family: tung;
    text-align: center;
    letter-spacing: .5px;
    margin-bottom: calc(15px + 1vw);
    font-size: clamp(30px, 4.5vw, 44px);
}


.popup .input{
    /* background-color: var(--secondary-color); */
    border: 2px solid rgb(57, 57, 57);
    width: 95%;
    margin-inline: auto;
    display: flex;
    
    padding: 4px;
    height: 45px;
    padding-left: 10px;
}
.popup .input input{
    /* border-radius: 10px; */
    width: 100%;
    font-size: 15px;
    background: transparent;
    outline: none;
    border: none;
}

.popup .input button{
    
    padding: 5px;
    background: var(--tertiary-color);
    color: var(--secondary-color);
    padding: 4px 15px;
    font-family: hel;
    letter-spacing: .5px;
    border: none;
    outline: none;
    font-size: 16px;
    transition: all .6s ease;
}

.popup .input button:hover{
    transform: scaleX(100%);
    cursor: pointer;
}

.overlay{
    z-index: 998;
    background: rgba(167, 167, 167, 0.89);
    background: #60926d3b;
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0px;
    left: 0px;
    backdrop-filter: blur(1px);

    &:hover{
        cursor: pointer;
    }
}

.popup-close{
    transform: scale(0) translate(-50%,-50%);
}

.hide{
    display: none;
}


@media (max-width:500px) {
    .popup{
        width: min(700px, 89%);
        
    }
    .popup .input button{
        font-size: 15px;
    }
}