html {
    background-color: black; 
    display: inline;
}

#myHeader {
    background-color: lightblue;
    color: black;
    padding: 15px;
    text-align: center;
    font-family: var(--bs-body-font-family)
}

#link, #helplink {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    margin: 0 10px;
}

#link {
    bottom: 43px;
}

#helplink {
    bottom: 18px;
}

#InstrumentList {
    text-align: center;
    margin: auto;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    top: 345px; 
    white-space: nowrap;
}

#InstrumentList ul {
    list-style-position: inside; /* Decreases space between bullet and text */
    padding: 0; /* Gets rid of horizontal padding */
    margin: 0; /* Reduces spacing between list and title */
    text-align: left; /* Aligns text left */
}

#InstrumentList li {
    padding-left: 50px; /* Increase left padding. Moves elements right*/
    margin-bottom: 2.5px; /* Increases bottom space between list elements */
}

#InstrumentTitle {
    color: #C6C6C6;
    text-decoration: underline;
    margin-bottom: 5px; /* Bottom spacing between title and instruments */
}

#Instruments {
    color: #C6C6C6;
    font-size: 20px;
}

li span {
    position: relative;
    left: -10px; /* Decreases space between bullet and list item */
}

a {
    color: #2a9fd6;
}

a:hover {
    color: #0000FF;
}


@media (min-device-width: 375px) and (max-device-width: 812px) {

    #myHeader {
        padding: 4.5px;
        background-color: lightblue;
    }

    #InstrumentList {
        top: 327px; 
    }

    #InstrumentTitle {
        margin-bottom: 4px; 
    }

    /* Set all values to default css "null" equivalent */
    #link, #helplink {
        transform: translateX(0%);
        margin: 0 0px;
        position: absolute;
        font-size: 20px; 
    }

    #link {
        bottom: 39px; /*65/51 */
        left: 30.8%;
    }

    #helplink {
        bottom: 12px; /*36/22*/
        left: 27.5%;
    }

    li span {
        position: relative;
        left: 3px; /* Decreases space between bullet and list item */
    }

    #InstrumentList li {
        padding-left: 0px; /* Increase left padding. Moves elements right*/
        margin-bottom: 2.5px; /* Increases bottom space between list elements */
    }
}