body {
    background-color: rgba(17, 17, 17, 0.968);
    text-align: center;
    color: white;
    padding: 2vw;
    font-size: 20px;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;'

}

.mainText {
    padding: 2vw;
    background-color: darkslategray;
    border-radius: 2vw;
    width: 50vw;
    margin: 0 auto;
    max-width: 500px;
    /* color: white; */
}

.workText {
    padding: 2vw;
    background-color: rgb(30, 45, 45);
    border-radius: 2vw;
    width: 50vw;
    margin: 0 auto;
    max-width: 500px;
    /* check this as well */
    /* color: white; */
}

.workTable {
    /* width: 75vw;
    margin: 0 auto; */
    display: flex;
    justify-content: center;
}

.footer {
    width: 100%;
    padding: 1vw;
    background-color: darkolivegreen;
    bottom: 0;
    left: 0;
    position: fixed
}

.navbar a,
.bgToggle a{
    color: rgba(255, 255, 255, 0.873);
    padding: 1vw;
    text-decoration: none;
}

.bgToggle a {
    font-size: 16px;
}
/* How to fix?*/

.navbar a:hover,
.bgToggle a:hover {
    color: rgba(255, 255, 255, 0.873);
    padding: 1vw;
    text-decoration: underline;
}

.navbar, 
.bgToggle {
    padding: 1vh; /*changed to height */
    background-color:saddlebrown;
    border-radius: 2vw;
    width: 30vw;
    margin: left;
    max-width: 400px;
    display: grid;
    /* float: left; */
}

.navbar:hover,
.bgToggle:hover {
    background-color:rgb(118, 60, 18);
}