MCGI Bible App by arrowbrave

/* ==UserStyle==
@name		MCGI Bible App
@namespace	https://bible.mcgi.app/
@version	1.0.0
@description	Custom Theme for MCGI Bible App
@author		arrowbrave
==/UserStyle== */

@-moz-document domain("bible.mcgi.app") {

    @import url('https://fonts.googleapis.com/css?family=Kanit|Vollkorn|Open+Sans|Poppins|Rubik|Merriweather&display=swap');

    :root {
        --font: 'Rubik';
        --bg: url('https://images.pexels.com/photos/8735584/pexels-photo-8735584.jpeg');
        --primary: #071b4d;
        --secondary: #FFC308;
        --info: #6AB2FF;
        --success: #ADE46C;
        --warning: #FFC666;
        --danger: #FF405D;
        --white: #FFFFFF;
        --greyLight-1: #F5F6FA;
        --greyLight-2: #E4E8F1;
        --greyLight-3: #D1D7E5;
        --greyDark-1: #B1BACE;
        --greyDark-2: #7C8493;
        --greyDark-3: #484E5A;
        --black: #373737;
    }

    .logomark {
        position: fixed;
        right: 0;
        top: 0;
        clip-path: circle(3vw at center);
        width: 6vw;
        margin: 3vw;
    }

    body {
        background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.7) 100%), rgba(0, 0, 0, 0.7) var(--bg) no-repeat center center fixed;
        background-blend-mode: multiply;
        background-size: cover;
        min-height: 100vh;
        font-size: 3vw;
        margin: 0;
    }

    /* Main Content Area */
    #content {
        text-align: left;
        font-weight: bold;
        font-size: 4vw;
        color: var(--white);
    }

    /* Set style for verse display */
    #versePlace {
        margin-top: 10vw;
    }

    /* Title of the verse */
    #title {
        font-family: 'Kanit', 'Roboto', sans-serif;
        text-align: left;
        font-weight: bold;
        font-size: 5vw;
        letter-spacing: .5vw;
        text-transform: uppercase;
        text-shadow: 2px 2px 5px rgba(0, 0, 0, .5);
        color: var(--secondary);
        line-height: 2;
        position: absolute;
        top: 1vh;
        --r: 1.5vw;
        --c: var(--primary);
        left: calc(.35*var(--r));
        padding: 0 .5em calc(2*var(--r));
        border-radius: var(--r) 0 0 var(--r);
        background: radial-gradient(100% 50% at left, var(--c) 98%, #0000 100%) 100% 0/.5lh calc(100% - 2*var(--r)),
        radial-gradient(100% 50% at right, #000 98%, #0000 101%) 0 100%/var(--r) calc(2*var(--r)),
        conic-gradient(from 90deg at var(--r) calc(100% - 2*var(--r)), #0000 25%, var(--c) 0) 0 0/calc(101% - .5lh) 100%;
        background-repeat: no-repeat;
    }

    /* Version being used */
    #version {
        font-family: var(--font), 'Roboto', Garamond, serif;
        font-size: 1.2vw;
        text-transform: uppercase;
        text-shadow: 1px 1px 2px rgba(0, 0, 0, .5);
        font-style: oblique;
        color: var(--info);
        line-height: 1.1;
        letter-spacing: .5vw;
        position: absolute;
        top: 2.5vh;
        left: 3.5vw;
    }

    /* Verse */
    #verse {
        font-family: var(--font), 'Roboto', Garamond, serif;
        font-size: 5vw;
        letter-spacing: .3vw;
        color: var(--maintxt);
        text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #AdvanceSearch,
    #BibleSettings,
    .btn-group {
        display: none;
    }

    #footer_container,
    .container,
    #VersionMode,
    #bookVersion,
    #BibleBG,
    #SafeMargin,
    #bookOperator,
    #txtverse,
    #VerseLog {
        background: var(--greyDark-3)10;
        border: 0 !important;
        color: var(--black);
        font-size: .5vw;
        text-transform: uppercase;
    }

    .input-group-text {
        background: none;
        border: 0;
        color: var(--black);
        font-size: .5vw !important;
        text-transform: uppercase;
    }

    #txtverse:focus,
    #bookVersion:focus,
    #VerseLog:focus,
    #BibleBG:focus,
    #SafeMargin:focus,
    #bookOperator:focus,
    #VersionMode:focus {
        color: var(--white);
        background: var(--greyDark-3);
        outline: transparent !important;
        font-size: .7vw !important;
        font-family: monospace;
        font-weight: bold;
        border-color: var(--black);
    }

    .text-right {
        width: 600px !important;
        position: fixed;
        bottom: -1vw;
        right: 0;
    }

    #VersionModeGroup {
        width: 400px !important;
        position: fixed;
        bottom: -1vw;
        left: 0;
    }
    
    footer_container {
        display: none;
    }
}