body {
    background-color: #f3e8ff;
}
body {
    background-color: #f3e8ff;
}

.title {
    background: #8A2BE2;
    padding: 15px 40px;
    border-radius: 50px;
    color: white;
}

header {
    text-align: center;
    padding: 20px;
}

.container {
    display: flex;
}

nav {
    width: 200px;
    background-color: mediumpurple;
    padding: 15px;

    position: sticky;
    top: 0;
    height: 100vh;
}
.aside{
    background-color: mediumpurple;
    flex: 1;
    padding: 20px;
}

.ff {
    text-align: center  ;
    padding: 10px;
}
.menu li {
    list-style: none;
    padding: 5px;
}

.menu li:hover {
    background: darkmagenta;
}

section {
    flex: 1;
    padding: 20px;
    background: white ;
}

hr { border : 5px solid rebeccapurple; }
span { color : blue; font-size : 20px; }
h2 {
    text-align : center;
    color : black;
}
table {
    border-collapse : collapse;
}
td, th {
    text-align : left;
    padding : 5px;
    height : 15px;
    width : 300px;
}
thead, tfoot {
    background : rebeccapurple;
    color : white;
}
tbody tr {
    background : aliceblue;
}
tbody tr:hover {
    background : mediumpurple;
footer {
    text-align : center;
    color : black;
}
#list {background: mediumpurple}
.menu li:hover {background: darkmagenta}
.ss li:hover {background: darkmagenta}
#footer {background: mediumpurple}