body  {
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between; 
    align-items: center;
    height: auto;
    width: 100vw;
    background-color: hsl(165, 60%, 70%);
    overflow-x: hidden;
    overflow-y: scroll;
}

.top-bar {
    position: fixed;
    z-index: 5;
    width: 100vw;
    height: 13vh;
    margin: 0;
    display: flex;
    align-items: center; 
    justify-content: space-between;
    background-color: hsl(270, 50%, 70%);
    border-bottom: .2vw solid hsl(0, 0%, 0%);
    box-sizing: border-box;
}

.top-bar #main-menu {
    font-size: 1rem;  
    width: 3rem;  
    height: 3rem;  
    align-items: center; 
    padding: 0;  
    margin-right: .5rem;
    margin-left: 1.5rem;
    cursor: pointer;
    border: .1rem solid hsl(0, 0%, 0%);
    border-radius: .5rem;
    background-color: hsl(165, 60%, 80%);
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.top-bar #main-menu:hover {
    background-color: hsl(165, 60%, 70%);
    transform: scale(1.1);
}

.heading {
    position: absolute;
    left: 50%;
    transform: translateX(-75%);
}

.organise-controllers {
    position: relative;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-color: hsl(270, 50%, 60%);
    border-radius: .5rem;
    margin-right: 3vw;
    width: 20vw;
    height: 7vh;
    border: .2vw solid hsl(0, 0%, 0%);
    box-sizing: border-box;
    border-radius: 1rem;
}

#organise-display {
    position: relative;
    font-size: 2vw;
    font-weight: bold;
    text-align: center;
    align-self: center;
    flex-grow: 1;
    top: 1vh;
}

.arrow-button {
    position: absolute;
    background-color: hsl(270, 50%, 60%);
    top: 15.5%;
    border: 0;
    font-size: 2vw;
    cursor: pointer;
    height: 2vh;
    width: 3vw;
}

.arrow-button:hover {
    font-weight: bold;
}

#left-button {
    left: 1.5vw;
}

#right-button {
    right: 1.5vw;
}

.list-o-scores {
    position: relative;
    height: auto;
    width: 75vw;
    left: auto;
    top: 15vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.list-o-scores .list-title  {
    padding: .5vw;
    border: .4vw double hsl(0, 0%, 0%);
    box-sizing: border-box;
    display: flex;
    width: 75vw;
    background-color: hsl(270, 50%, 70%);
}

.list-title span {
    position: relative;
    font-size: 1.5vw;
    align-items: center;
    text-align: center;
}

.list-title #usernameT {
    left: 2vw;
}

.list-title #scoreT {
    left: 13vw;
}

.list-title #percentT {
    left: 17.5vw;
}

.list-title #timeT {
    left: 22.5vw;
}

.list-title #sizeT {
    left: 31.7vw;
}

.list-title #speedT  {
    left: 40.7vw;
}

.list-o-scores .viewCont {
    background-color: hsl(165, 60%, 80%);
    width: 75vw;
    height: 6vw;
    border: .2vw solid hsl(0, 0%, 0%);
    border-right: .3vw solid hsl(0, 0%, 0%);
    border-left: .3vw solid hsl(0, 0%, 0%);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.viewCont .usernameDisplay,
.viewCont .scoreDisplay,
.viewCont .percentDisplay,
.viewCont .timeDisplay {
    background-color: hsl(165, 70%, 50%);
    height: 4vw;
    border: .5vw double hsl(0, 0%, 0%);
    box-sizing: border-box;
    align-content: center;
    text-align: center;
    font-size: 1.7vw;
}

.viewCont .usernameDisplay {
    width: 15vw;
    text-align: left;
    padding-left: 1vw;
}

.viewCont .scoreDisplay {
    width: 6vw;
}

.viewCont .percentDisplay {
    width: 10vw;
}

.viewCont .timeDisplay {
    width: 7vw;
}

.viewCont .settingsDisplay {
    background-color: hsl(165, 70%, 50%);
    position: relative;
    display: flex;
    height: 4.5vw;
    width: 25vw;
    border: .2vw solid hsl(0, 0%, 0%);
    box-sizing: border-box;
    gap: 1vw;
    align-items: center;
    justify-content: center;
}

.settingsDisplay .sizeDisplay, 
.settingsDisplay .speedDisplay {
    background-color: hsl(165, 70%, 70%);
    width: 11vw;
    height: 3.8vw;
    border: .2vw solid hsl(0, 0%, 0%);
    box-sizing: border-box;
    align-content: center;
    text-align: center;
    font-size: 1.5vw;
}