#terms_popup{
    background: white;
    border-radius: var(--m_gap);
    box-shadow: var(--shadow);
    box-sizing: border-box;
    display: grid;
    grid-auto-rows: min-content;
    grid-gap: var(--l_gap);
    height: 90vh;
    max-width: 1000px;
    margin: 20px;
    overflow-y: scroll;
    padding: var(--xl_gap)}
#terms_popup.off{
    display: none}
    #terms_popup > .header{
        align-items: center;
        display: grid;
        grid-template-areas: "a"}
        #terms_popup > .header > *{
            grid-area: a}
        #terms_popup > .header > .round_button{
            justify-self:end} 
    #terms_popup h1,
    #terms_popup h2,
    #terms_popup h3{
        color: var(--green_1);
        text-align: center}