@font-face {
        font-family: Bulara;
        src: url(../fonts/bulara_5.ttf);
        font-weight: normal;
    }

    @font-face {
        font-family: 'Noto Sans Gurmukhi';
        src: url(../fonts/NotoSansGurmukhi-Medium.ttf);
        font-weight: normal;
    }

    body {
        /* colours taken from 
         * https://www.sikhiwiki.org/index.php/File:Guru_Granth_Sahib_By_Bhai_Pratap_Singh_Giani.jpg */
        background-color: #f8e1cf;
        color: #331f16;
        padding: 5% 20%;
        font-size: x-large;
        font-family: sans-serif;
    }

    footer {
        border-top: thin solid #331f16;
        font-size: medium;
        padding: 4em 0 0.5em 0;
        text-align: center;
    }

    .phrase:nth-child(even) {
        background-color: #ddc9b9;
        color: #331f16;
    }

    /* #popup {
      position: absolute;
      display: none;
      background-color: whitesmoke;
      z-index: 10;
    } */

    #popup-closebox {
        float: right;
        /* text-align: right; */
        padding: 0.1em 0.5em;
    }

    #popup-closebox,
    #popup-record-stop {
        color: red;
    }

    #popup-content {
        border: thin solid #331f16;
        background-color: whitesmoke;
        position: absolute;
        display: block;
        z-index: 10
    }

    #popup-controls {
        border: thin solid #331f16;
        padding: 0.25em 1em;
        width: 100%;
    }

    #popup-phrase {
        text-align: center;
        margin: 0;
        font-size: 2em;
    }

    #popup-titlebar {
        background-color: #331f16;
        color: red;
        height: 1.2em;
        width: 100%;
    }

    .gurmukhi {
        font-family: "Noto Sans Gurmukhi", Bulara;
    }

    .play-control {
        font-family: sans-serif;
    }

    .popup-launcher {
        float: right;
    }

    @media all and (max-device-width: 768px) {
        body {
            margin: 0 5%;
        }
    }