div {
    padding: 10px;
}

.container {
    width: 1000px;
    margin-left: auto;
    margin-right: auto;
    padding: 10px;
    border-radius: 100px 100px 10px 10px;
    border: 5px ridge purple;
    background-color: yellow;

    display: grid;
    grid-gap: 8px 10px;
    grid-template-columns: 1;
    grid-template-rows: 200px 300px 280px 50px;
    grid-template-areas: 
        "h""m""m""f";
}

.header {
    border-radius: 100px 100px 100px 100px;
    background: #ff5454;
    grid-area: h;
}

.main-content {
    background: #54ebff;
    grid-area: m;
    max-height: 580px;
    overflow-y: auto;
}

.footer {
    border-radius: 30px 30px 30px 30px;
    background: #a454ff;
    grid-area: f;
}

* {
    scrollbar-width: thin;
    scrollbar-color: blue purple;
}

/* Style the tab */
.tab {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
  }
  
/* Style the buttons that are used to open the tab content */
.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
}

/* Change background color of buttons on hover */
.tab button:hover {
background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}