:root{
    --tip_popup_overlay:#d3d3d390;
    --tip_title_color:#fff;
    --tip_popup_bg:#08acf2;
    --tip_text_color:#ffffff;
    --popup_display:flex;
}

.tip_popup_background{
    position: fixed;
    display: var(--popup_display);
    justify-content: center;
    align-items: center;
    inset:0 0 0 0;
    background-color: var(--tip_popup_overlay);
    z-index: 99999;
}

.tip_popup_wrapper{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    padding: 1rem;
    width: min(80vw, 400px);
    max-height: 80%;
    height: min(80vw, 400px);
    color:var(--text_color);
    background-color: var(--tip_popup_bg);
}

.tip_popup_wrapper h3, .tip_popup_wrapper p{
    display: flex;
    text-align: center;
    align-items: center;
    text-wrap: wrap;
}

.tip_popup_wrapper h3{
    font-size: clamp(18px, 7vw + 4px, 2rem);
}

.tip_popup_wrapper p{
    font-size: clamp(15px, 5vw + 3px, 1.5rem);
}



.tip_popup_closing_btn{
    display: grid;
    place-items: center;
    position: absolute;
    inset: 0 0 auto auto;
    transform: translate(50%, -50%);
    border: 2px solid rgb(255, 255, 255);
    background-color: rgb(0, 208, 255);
    color: rgb(255, 255, 255);
    width: 3ch;
    height: 3ch;
    aspect-ratio: 1/1;
    border-radius: 50%;
    cursor: pointer;
}