:root {
    --bg-color: #fff;
    --bg-secondary-color: #eee;
    --color-primary: #6a0;
    --color-secondary: #f60;
    --color-lightGrey: #ddd;
    --color-grey: #777;
    --color-darkGrey: #333;
    --color-error: #d43939;
    --color-success: #28bd14;
    --grid-maxWidth: 90rem;
    --grid-gutter: 3rem;
    --font-size: 1.8rem;
    --font-color: #333;
    --font-family-sans: "Ubuntu Sans","Noto Sans Thai", sans-serif;
    --font-family-mono: monaco, "Consolas", "Lucida Console", monospace;
}

div#top {
    padding: 3rem;
}

.qood-box {
    display: flex;
    flex-direction: row;
    align-items: center;
    line-height: 1.25;
    font-variation-settings: "wdth" 75;
    color: var(--color-secondary);
}

.qood-box img {
    opacity: 0.5;
    width: 4em;
    padding-right: 1em;
}

.qood-box span {
    color: var(--color-secondary);
}

.tagline {
    color: #000;
    font-weight: 800;
    font-variation-settings: "wdth" 75;
    letter-spacing: -.1rem;
}

.tagline span {
    color: var(--color-primary);
}

details summary {
    color: var(--color-darkGrey);
    font-weight: 600;
    font-style: normal;
    font-size: 2rem;
    line-height: 1.25;
    cursor: pointer;
    font-variation-settings: "wdth" 75;
}

details>summary {
    background-color: #eee;
    cursor: pointer;
    padding: .5rem 2rem;
    border-radius: .5em;
    margin-bottom: .5em;
}

details summary>* {
    display: inline;
}

details summary:hover,
details[open] summary {
    color: #fff;
    background-color: var(--color-primary);
}

.map-responsive {
    overflow: hidden;
    padding-bottom: 56.25%;
    position: relative;
    height: 0;
    margin-bottom: 1em;
}

.map-responsive iframe {
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    position: absolute;
}

footer {
    font-variation-settings: "wdth" 75;
    border-top: 2px solid var(--color-lightGrey);
    padding: 1em 0;
}