* {
    margin: 0;
    padding: 0;
    /*outline: 1px solid red;*/
}

.viewport {
    height: 100vh;
    width: 100vw;
    background-image: url(test-image.jpg);
    background-position: center;
    background-size: cover;
    align-content: start;
    display: grid;
    grid-auto-flow: column;
}

.nav_pane {
    padding: 1em;
    gap: 1em;
    width: fit-content;
    align-content: start;
    display: grid;
    float: left;
}

.nav_logo {
    color: lightpink;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    height: fit-content;
}

.nav_menu {
    list-style: none;
    min-width: fit-content;
    display: grid;
    grid-auto-flow: row;
    row-gap: 1em;
}

.nav_body {
    background-color: rgba(0, 0, 0, 50%);
    border-radius: 50cqh;
    height: auto;
    transition: 0.4s ease-out;
}

.nav_body:hover {
    transform: scaleX(1.15);
    transition: 0s ease-in;
}

.nav_body:hover * {
    color: darkviolet;
    transition: 0s ease-out;
}

.nav_title:hover {
    color: darkviolet;
    transition: 0s ease-out;
}

.nav_title {
    text-decoration-line: none;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    white-space: nowrap;
    font-size: 100%;
    padding-left: 1cqw;
    padding-right: 1cqw;
    transition: 0.4s ease-out;
    float: left;
    text-transform: uppercase;
    color: lightpink;
}

.dropdown {
    list-style: none;
}

.dropdown .dropdown_header {
    display: grid;
    grid-template-columns: auto min-content;
    grid-auto-flow: column;
}

.dropdown_header ion-icon {
    margin-right: 0.5vw;
    align-self: center;
    float: right;
    color: lightpink;
    transition-duration: 0.25s;
}

.dropdown_body {
    display: none;
    border-bottom-left-radius: 1em;
    border-bottom-right-radius: 1em;
    background-color: rgba(0, 0, 0, 50%);
}

.dropdown:hover .dropdown_body {
    display: grid;
}

.dropdown:hover .dropdown_header {
    transform: scaleX(1.15);
}

.dropdown:hover .dropdown_header ion-icon {
    rotate: 90deg;
    transition-duration: 0.25s;
}

.dropdown_body:hover {
    display: grid;
}

.main_pane {
    padding: 1rem;
    width: auto;
    background-color: rgba(0, 0, 0, 50%);
    color: white;
    float: right;
}