/* ==============================
   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: calc(100% - 10%);
    margin: 100px 5% 50px;
    height: 70vh;
}

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

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

@media (min-width: 426px){
    .text-panel h1{
        font-size: 20pt;
    }
}

@media (min-width: 769px){
    .text-panel{
        float: left;
        width: 90%;
    }

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

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