html {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

body {
    font-size: 200%;
    width: 100%;
    height: 100%;
    margin-left: 0;
    margin-right: 0;
    display: grid;
    grid-template-rows: 20% 70% 10%;
    grid-template-columns: 50% 50%;
    grid-template-areas:
        "menu menu"
        "view content"
        "foot foot";
}
.menu {
    grid-area: menu;
    background: #1abc9c;
    color: blue;
    display: flex;
    align-items: center;
    align-content: space-between;

}

details{

    margin-bottom: 2px;
}

img {
    width: 20%;
    height:5%;
    border-radius: 30%;

}
.nav{
    display: flex;
    align-content: space-between;
    align-items: center;
}
.view {
    grid-area: view;
    background: beige;
    overflow-y: scroll;
}

#content {
    grid-area: content;
    color: black;
    margin-right: 0;
}

.foot {
    grid-area: foot;
    background: aqua;
}
details details{
    margin-left: 20px;
    color: green;
}
details details details{
    color: blue;
}
details details details details{
    color: darkblue;
    margin-left: 35px
}
p{
    font-family: cursive;
    color: black;
    margin-top: 0;
    margin-bottom: 0;
}

ol{
    background: lightblue;
}
#content video{
    width: 100%;
    height: 100%;
    margin-bottom: 0;
}
/**:empty {
    display: none;
}*/
/* Basic styling for details and summary */
details {
    margin: 10px 0;
}
summary {
    cursor: pointer;
}
/* Styling for the button */
.toggle-btn {
    display: inline-block;
    padding: 10px 20px;
    margin: 20px 0;
    background-color: #007BFF;
    color: white;
    border: none;
    cursor: pointer;
}
.toggle-btn:hover {
    background-color: #0056b3;
}