:root {
    --main-fg: rgb(240, 240, 240);
    --sub-fg: rgb(210, 210, 210);
}

body {
    background-color: black;
    margin-top: 10rem;
    font-family: 'Gill Sans';
}

#title {
    color: var(--main-fg);
    text-align: center;
    font-size: 60px;
    margin: 0rem 0rem 2rem 0rem;
}

#welcome {
    color: var(--sub-fg);
    margin: 1rem 0rem 0rem 0rem;
    font-size: 26px;
    text-align: center;
}

#subtitle {
    color: var(--sub-fg);
    text-align: center;
}

ul {
    margin: 0.5rem 16rem 0.5rem;
    padding: 0rem;
    display: flex;
    flex-direction: column;
    align-items: center;

    li {
        margin: 0.35rem 0rem 0.35rem;
        padding: 0.4rem 0rem 0.4rem;
        width: 270px;
        height: 45px;
        border-width: 0.15rem;
        border-style: solid;
        background-color: rgba(138, 138, 138, 0.2);
        border-color: rgba(240, 248, 255, 0.4);
        justify-content: center;
        align-items: center;
        /* text-align: center; */
        display: flex; /* comment out to align text to the left */
        /* float: center; */
        border-radius: 50px;
        
        a {
            padding-right: 1.5rem;
            display: flex;
            align-items: center;
            text-decoration: none;
            color: var(--main-fg);
            font-size: 30px;
            
        }
        
        #jellyfin::before {
            content: url("assets/jellyfin.svg");
            width: 32px;
            height: 32px;
            margin-right: 0.8rem;
        }

        #matrix::before {
            content: url("assets/matrix.svg");
            width: 32px;
            height: 32px;
            margin-right: 0.8rem;
        }

        #jellyfin-full {
            content: url("assets/jellyfin-full.svg");
            padding-right: 0rem;
            height: 40px;
        }

        #matrix-full {
            content: url("assets/matrix-full.svg");
            padding-right: 0rem;
            height: 40px;
        }
    }
}

p#bottom-first {
    margin-bottom: 40px;
    position: fixed;
    bottom: 0;
    text-align: center;
    color: var(--main-fg);
}

p#bottom-second {
    position: fixed;
    bottom: 0;
    text-align: center;
    color: var(--main-fg);
}

.bottom-line {
    font-family: 'Gill Sans';
    font-size: 15px;
}

img.emoji {
   height: 1em;
   width: 1em;
   margin: 0 .05em 0 .1em;
   vertical-align: -0.1em;
}