body {
    background-color: #2f2a3b;
    font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif;
}

#topBar {
    background-color: #9f87ad77; 
    width: 550px; 
    /* height: 100px;  */
    /* line-height: 0px; */
    align-items: center; 
    display: flex; 
    /* flex-direction: row;  */
    
    border-radius: 1.5em;
    position: sticky; 
    margin-left: auto;
    margin-right: auto;
    flex-direction: row;
    
    top: 0px; 

    /* left: 2.5%; */
    border-style: solid;
    border-color: #372344;
    border-width: 2px;
}

#bottomBar {
    background-color: #9f87ad77; 
    width: 550px; 
    height: 75px; 
    align-items: center; 
    display: flex; 
    flex-direction: row; 
    
    border-radius: 1.5em;
    /* position: sticky;  */
    margin-left: auto;
    margin-right: auto;
    margin-top: auto;
    margin-bottom: auto;
    /* flex-direction: row; */
    
    /* margin-bottom: 50px;  */

    /* left: 2.5%; */
    border-style: solid;
    border-color: #372344;
    border-width: 2px;
}

.content {
    background-color: #6f5b7a; 
    width: 600px; 
    /* white-space: 0%; */
    height: 100%; 
    align-items: flex-start; 
    display: grid; 
    /* flex-direction: row;  */
    border-radius: 1.5em;
    /* position:;  */
    margin-left: auto;
    margin-right: auto;
    margin-top: 5px;
    
    /* top: 2.5%;  */
    /* left: 2.5%; */
    border-style: solid;
    border-color: #372344;
    border-width: 2px;
}

.ul-bottomBar {
    list-style-type:none;
    display:flex;
    justify-content: center;
    padding: 0;
    width: 100%;
}

.ul-topBar {
    list-style-type:none;
    display:flex;
    justify-content: center;
    padding: 0;
    width: 100%;
}

.ul-basic {
    list-style-type:none;
    display: flex;
    margin-top: 0%;
    /* justify-content: center; */
    padding: 0;
    width: 100%;
}

.Topbar-elemets {
    /* padding: 1.25em; */
    /* display: list-item; */
    display: flow-root;
    justify-content: center;
    margin-left: 5px;
    margin-top: 0;
    flex-direction: column;
    /* width: 100%;  */
    /* : white; */
}

#Topbar-elemets-buttons {
    /* background-color: #574662; */
    color: white;
    text-decoration: none;
    font-size: 28x;
    border-radius: 3em;
    padding: 0.25em;
    width: 100%; 
    flex-direction: row;
    height: 100%;
    border-color: #000000;
    border-style: solid;
    border-width: 2px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: auto;
    margin-top: auto;
    /* : white; */
}