main{
    display: flex;
    flex-direction: row;
    flex: 1;
}
main article{
    flex: 1;
    background-color: rgba(40,0,80,0.4);
    margin: 0 5px 10px 10px;
    border-radius: 10px;
    padding: 20px;
    overflow-y: auto;
    max-height: calc(100vh - 250px);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
main article .article-container{
    transition: opacity ease 0.2s;
}
main aside{
    display: flex;
    flex-direction: column;
    flex: 0.2;
    background-color: rgba(40,0,80,0.4);
    margin: 0 10px 10px 5px;
    border-radius: 10px;
    padding: 10px 20px;
    align-items: center;
    max-height: calc(100vh - 200px);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
main aside button{
    background-color: rgb(80,0,125);
    color: white;
    border: none;
    outline: none;
    width: fit-content;
    font-size: 1.75em;
    padding: 5px 10px;
    border: 2px solid rgba(150,100,255,0.7);
    border-radius: 10px;
    transition: background-color ease 0.3s;
}
main aside button:hover{
    background-color: rgb(150,0,255);
    cursor: pointer;
}
main aside h1{
    text-align: center;
    font-size: 1.75em;
}
main aside h2{
    text-align: center;
}
main aside nav{
    display: flex;
    flex-direction: column;
    flex: 1;
}
main aside nav ul{
    display: flex;
    flex-direction: column;
    flex: 1;
    list-style: none;
    gap: 10px;
}
main aside nav ul li{
    font-size: 1.25em;
    text-align: center;
    border: 2px solid rgba(150,100,255,0.7);
    border-radius: 10px;
    padding: 5px 10px;
    transition: background-color ease 0.3s, border-color ease 0.3s;
    background-color: rgba(60,0,100,0.5);
}
main aside nav ul li:hover{
    background-color: rgb(150,0,255);
    cursor: pointer;
    border-color: rgb(150,100,255);
}
@media(max-width: 768px){
    main article{
        max-height: calc(83vh - 200px);
        transition: max-height ease 0.3s;
    }
}