html {
    font-size: 3.538vw;
}

html:has(body > header > nav.show) {
    overflow: hidden;
}

body > header {
    position: static;
}

body > header > nav {
    visibility: hidden;
    display: block;
    width: 0;
    transition: width .2s ease-in-out;
}

body > header > nav::before {
    position: absolute;
    top: 0;
    right: 2rem;
    display: flex;
    align-items: center;
    height: 5rem;
    visibility: visible;
    content: '\f0c9';
    font: var(--fa-font-solid);
    font-size: 2rem;
    cursor: pointer;
}

body > header > nav.show {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    visibility: visible;
    width: 100%;
    padding: 5rem 0 0;
    background: rgba(255, 255, 255, 0.95);
    transition: width .2s ease-in-out;
}

body > header > nav.show:has(> div > a:nth-of-type(4)) {
    height: 15.3rem;
}

body > header > nav.show:not(:has(> div > a:nth-of-type(4))) {
    height: 12.3rem;
}

body > header > nav.show::before {
    content: '\f00d';
}

body > header > nav > form {
    display: none;
    height: 3rem;
    padding: 0 2rem;
    width: calc(100% - 4rem);
    min-width: calc(100% - 4rem);
}

body > header > nav.show > form {
    display: flex;
    align-items: center;
    justify-content: start;
}

body > header > nav > form > input[name="keyword"] {
    width: 100%;
}

body > header > nav > div {
    display: block;
}

body > header > nav > div > a {
    display: block;
    height: 3rem;
    line-height: 3rem;
    margin: 0;
    padding: 0 2rem;
    font-size: 1.2rem;
}

body > header > nav > div > a:not(:last-of-type) {
    border-bottom: 0.1rem solid #f78c50;;
}

body > header > nav > div > a > em {
    display: inline;
    margin: 0 0 0 1rem;
    font-style: normal;
}

body > aside {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 3;
    visibility: hidden;
    display: block;
    width: 0;
    transition: width .2s ease-in-out;
}

body > aside.show {
    visibility: visible;
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: 100%;
    height: 64.776vh;
    background: rgba(255, 255, 255, 0.95);
    transition: width .2s ease-in-out;
}

body:has(> header > nav > div > a:nth-of-type(4)) > aside.show {
    top: 20.3rem;
}

body:not(:has(> header > nav > div > a:nth-of-type(4))) > aside.show {
    top: 17.3rem;
}

body > aside > div {
    display: none;
    margin: 0;
    padding: 1rem 2rem;
    border-top: 0.1rem solid #f78c50;
}

body > aside > div > h2 {
    margin: 0;
    font-size: 1.2rem;
    color: #f05b06;
    cursor: pointer;
}

body > aside > div > h2::before {
    content: '\f03a';
    margin: 0 1rem 0 0;
    font: var(--fa-font-solid);
}

body > aside > div > nav {
    visibility: hidden;
    margin: 0;
    max-height: 0;
    transition: max-height .2s ease-in-out;
}

body > aside > div > nav.show {
    visibility: visible;
    margin: 0.8rem 0 0;
    max-height: 15rem;
    transition: max-height .2s ease-in-out;
}

body > main {
    margin: 0;
    padding: 0 1rem;
    width: calc(100% - 2rem);
}

body > main > h2 {
    margin: 0 0 1.4rem;
  }