body { 
    margin: 0; 
    padding: 0; 
    height: 100vh; 
    width: 100%; 
    background-color: black; 
    color: white; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    font-family: sans-serif; 
}

.main-container { 
    display: flex; 
    justify-content: space-evenly; 
    align-items: center; 
    flex-wrap: wrap; 
    width: 90%; 
    height: 600px; 
    background-color: #5e5e5e; 
}

#proj-panel { 
    display: none; 
}

#phil-panel { 
    display: none; 
}

#idea-panel { 
    display: none; 
}

.panel { 
    display: flex; 
    flex-direction: column; 
    width: 45%; 
    height: 85%; 
    background-color: #404040; 
}

#content { 
    margin-left: 20px; 
    margin-right: 25px; 
}

#icon { 
    font-size: 50px; 
    color: white; 
}

.navigation-panel {
    display: flex; 
    justify-content: space-between;
    flex-direction: column; 
    flex-wrap: wrap; 
    width: 45%; 
    height: 85%; 
}

.nav-element { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    width: 300px; 
    height: 250px; 
    margin-left: 5px; 

    background: linear-gradient(to left, #404040,  50%, rgb(28, 28, 28) 50%) right;
    background-size: 200%;
    transition: .5s ease-out;
}

.nav-element:hover { 
    background-position: left;
}

li { 
    margin-top: 15px; 
}