/* ==============================
   Imported Fonts
============================== */
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cardo:ital,wght@0,400;0,700;1,400&display=swap');

/* ==============================
   Root Variables
============================== */
:root{
    --primary-font: "Josefin Sans", serif;
    --secondary-font: "Cardo", serif;
}

/* text panel */
.text-panel{
    float: left;
    width: 90%;
}

#terms-cond{
    margin: 100px 5% 50px;
}

#sust-commit{
    margin: 0px 5% 50px;
}

.text-panel h1{
    float: left;
    width: 100%;
    font-family: var(--primary-font);
    font-size: 20pt;
    font-weight: 800;
    text-decoration: underline;
}

.text-panel h2{
    float: left;
    width: 100%;
    font-family: var(--primary-font);
    font-size: 16pt;
    font-weight: 800;
    margin: 20px 0 0 0;
}

.text-panel ul{
    float: left;
    width: 85%;
    margin: 0 7.5%;
}

.text-panel li{
    float: left;
    width: 100%;
    float: left;
    text-align: left;
    text-wrap: wrap;
    font-family: var(--primary-font);
    font-size: 12pt;
    font-weight: 400;
}

.text-panel p{
    float: left;
    width: 100%;
    text-align: left;
    text-wrap: wrap;
    font-family: var(--primary-font);
    font-size: 12pt;
    font-weight: 400;
}

#bold{
    margin: 25px 0 0;
}

@media (min-width: 769px){
    .text-panel{
        float: left;
        width: 90%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    .text-panel h1{
        float: left;
        width: 80vw;
        font-family: var(--primary-font);
        font-size: 20pt;
        font-weight: 800;
        text-decoration: underline;
    }
    
    .text-panel h2{
        float: left;
        width: 80vw;
        font-family: var(--primary-font);
        font-size: 16pt;
        font-weight: 800;
        margin: 20px 0 0 0;
    }
    
    .text-panel ul{
        float: left;
        width: 80vw;
        margin: 0;
    }

    .text-panel li{
        margin: 0 0 0 20px;
    }

    .text-panel p{
        float: left;
        width: 80vw;
        text-align: left;
        text-wrap: wrap;
        font-family: var(--primary-font);
        font-size: 12pt;
        font-weight: 400;
    }
}