.MainContainer-container {
    z-index: 6;

    width: 500px;
    height: 650px;
    background-color: var(--BACKGROUND-COLOR-151C2D);

    position: fixed;
    top: 110px;
    right: 0;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.MainContainer-top {
    width: 100%;
    height: 60px;

    display: flex;
    flex-direction: row;

    background-color: var(--BACKGROUND-COLOR-1F2940);
    
    box-shadow: 0 0 1px rgba(0,0,0,.2), 0 2px 4px rgba(0,0,0,.1);
}

.MainContainer-top-nav {
    width: 100%;
    height: 70px;

    /* border: 1px solid white; */
}

.MainContainer-bottom-body {
    position: relative;
    
    width: 100%;
    height: 500px;

    /* border: 1px solid white; */
}

.MainContainer-footer {
    width: 100%;
    height: 50px;

    /* border: 1px solid white; */

    display: flex;
    flex-direction: column;
    justify-content: center;

    text-align: center;

    color: white;
    background-color: var(--BACKGROUND-COLOR-1F2940);

    box-shadow: 0 0 1px rgba(0,0,0,.2), 0 2px 4px rgba(0,0,0,.1);
}

.MainContainer-top-nav {
    width: 850px;
    height: 100%;

    display: flex;
    flex-direction: column;
    justify-content: center;
}

.MainContainer-top-nav ul {
    width: 100%;
    height: 100%;

    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

.MainContainer-top-nav li {
    color: white;

    display: flex;
    flex-direction: column;
    justify-content: center;
}

.MainContainer-top-nav li:hover {
    cursor: pointer;

    color: #DC6180;

    transition: 0.7s;
}