html {
    font-family: -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

header {
    position: fixed;
    z-index: 100;
    top: 0px;
    left: auto;
    right: 0px;
    height: fit-content;
    width: 100%;
    padding: 0.8em 20px;
}

header h1 {
    color: white;
    font-size: 1.25em;
    font-weight: 500;
    line-height: 1.6;
}

main {
    margin-top: 6em;
    padding: 0 2em 4em;
}

main h1 {
    font-size: 2em;
    font-weight: 600;
}

main h2 {
    font-size: 1.5em;
    font-weight: 600;
    margin-bottom: 0.2em;
}

a {
    all: revert;
}

a:active {
    all: revert;
}

mark {
    all: revert;
}

section.search {
    display: flex;
    justify-content: center;
    margin: 1em 0 3em;
}

section.search .search-box {
    color: rgba(0, 0, 0, 0.87);
    box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 1px -1px, rgba(0, 0, 0, 0.14) 0px 1px 1px 0px, rgba(0, 0, 0, 0.12) 0px 1px 3px 0px;
    transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 4px;
    display: flex;
    align-items: center;
    width: 500px;
}

section.search .search-box input {
    display: inline-flex;
    flex: 1 1 auto;
    padding: 4px 5px 5px;
}

section.search .search-box input::placeholder {
    color: rgba(0, 0, 0, 0.26);
}

section.search .search-icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-color: transparent;
    color: rgba(0, 0, 0, 0.26);
    padding: 8px;
}

section.search .search-icon svg {
    width: 1em;
    height: 1em;
    display: inline-block;
    fill: currentColor;
    font-size: 1.5em;
}

section.qa-list {
    display: flex;
    flex-direction: column;
    gap: 3em;
    margin-bottom: 3em;
}

section.qa-list article h3 {
    font-weight: 600;
    margin-bottom: 1em;
}

section.contact-list .contact-container {
    display: flex;
    flex-direction: column;
    gap: 1em;
}