static/styles.html

<style>
    @font-face {
        font-family: PoiretOne-Regular;
        src: url(app/static/Quattrocento-Bold.ttf);
    }

    .title {
        font-family: Quattrocento-Bold;
        font-size: 4em;
    }

    h3 span {
        font-family: PoiretOne-Regular;
        font-size: 1.1em;
        font-weight: 600;
        margin-top: 1em;
    }

    div [data-testid="stWidgetLabel"] {
        font-family: PoiretOne-Regular;
        font-size: large;
        font-weight: 400;
        color: #17d1ff;
    }

    div [data-testid="stRadio"] {
        margin-top: 0.5em;
        padding: 1em;
        border-radius: 18px;
        border: 0.5px solid #ffd8b8;
        box-shadow: 2px 3px 10px rgb(189 222 241 / 90%);
    }
    
    div [data-testid="stCheckbox"] {
        margin-top: 0.5em;
        padding: 1em;
        border-radius: 18px;
        border: 0.3px solid #ffd8b8;
        box-shadow: 5px 8px 15px rgb(189 222 241 / 90%);
    }
    
    div [data-testid="stSlider"] {
        margin-top: 1em;
        padding: 1em;
        border-radius: 18px;
        box-shadow: 2px 3px 10px rgb(189 222 241 / 52%);
    }

    div [data-testid="stSelectbox"] {
        margin-top: 1em;
        padding: 1em;
        
        border-radius: 18px;
        box-shadow: 2px 3px 10px rgb(189 222 241 / 52%);
    }



    div [data-testid="stSidebar"] {
        margin-top: 1em;
        padding: 1em;
        border-radius: 18px;
        box-shadow: 2px 3px 10px rgb(189 222 241 / 52%);
        background-image: -moz-repeating-linear-gradient(
            45deg,
            rgb(209, 207, 178),
            rgb(218, 213, 146) 10px,
            rgb(223, 220, 189) 10px,
            rgb(190, 190, 190) 20px);
    }
    
    div[data-testid="stVerticalBlockBorderWrapper"]:has(.stHtml > .watchlist_card) {
        padding-bottom: 0em;
        border-radius: 18px;
        box-shadow: 2px 3px 10px rgb(189 222 241 / 52%);
    }

    div[data-testid="element-container"]:has(.iframe) {
        background-color: #50e758;
        padding-bottom: 20em;
        border-radius: 18px;
        box-shadow: 2px 3px 10px rgb(189 222 241 / 52%);
    }

    div[data-testid="stVerticalBlock"]:has(> div > .stHtml > .watchlist_symbol_name) {
        & p {
            color: #174C4F;
            font-family: PoiretOne-Regular;;
            font-size: 3em;
            font-weight: 500;
            margin-bottom: 0;
        }
    }

    div[data-testid="stVerticalBlock"]:has(> div > .stHtml > .watchlist_symbol_name) {
        & p {
        color: #174c4f;
        font-family: "Open Sans", sans-serif;
        font-size: 1em;
        font-weight: 700;
        margin-bottom: 0;
        }
    }


    div[data-testid="stVerticalBlock"]:has(> div > .stHtml > .watchlist_ticker) {
        text-align: right;

        & p {
            font-size: 0.8em;
            margin-bottom: 0;
        }
    }

    div[data-testid="stVerticalBlock"]:has(> div > .stHtml > .watchlist_price_label) {
        & p {
            font-size: 0.8em;
            margin-bottom: 0;
        }
    }

    div[data-testid="stVerticalBlock"]:has(> div > .stHtml > .watchlist_price_value) {
        & p {
            color: #174C4F;
            font-family: "Open Sans", sans-serif;
            font-size: 1.2em;
            margin-bottom: 0;
        }
    }

    div[data-testid="stVerticalBlock"]:has(> div > .stHtml > .column_plotly) {
        & .stPlotlyChart {
            margin-top: 1em;
            padding: 1em;
            border-radius: 16px;
            box-shadow: 0px 0px 10px rgba(81, 85, 195, 0.2);
        }
    }

    div[data-testid="stVerticalBlock"]:has(> div > .stHtml > .column_indicator) {
        margin-top: 2.5em;
        padding-left: 4em;
    }
    
    /* Adapted from https://startbootstrap.com/theme/sb-admin-2 */
    div[data-testid="stMetric"] {
        background-color: #35383b;
        border: 2px solid #3f3b3b;
        margin-top: 1em;
        padding: 1.5em 1em;
        border-radius: 20px;
        box-shadow: 4px 5px 10px rgb(189 222 241 / 52%);
    }

    label[data-testid="stMetricLabel"] p {
        font-family: Quattrocento-Regular;
        color: rgb(255, 201, 24);
        font-size: 1.5em;
    }

    div[data-testid="stMetricValue"] {
        font-size: 1em;
        font-weight: 400;
        color: #50e758;
    }

    div[data-testid="stVerticalBlock"]:has(> div > .stHtml > .low_indicator) {
        & div[data-testid="stMetric"] {
            border-left: 0.5rem solid red;
        }
    }

    div[data-testid="stVerticalBlock"]:has(> div > .stHtml > .high_indicator) {
        & div[data-testid="stMetric"] {
            border-left: 0.5rem solid rgb(166, 255, 166);
        }
    }

    div[data-testid="stVerticalBlock"]:has(> div > .stHtml > .bottom_indicator) {
        margin-top: 0.5em;
    }

</style>