@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Outfit:wght@100;200;300;400;500;600;700;800;900&family=Prompt:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Roboto:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Sarabun:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');

:root {
    --background-body: #ffffff;

    --background-navbar: #303134;
    --background-infobar: rgba(255, 255, 255, 0.8);
    --background-footer: #eeeeee;

    --color-link: #0066cc;
    --color-error: #ff5f5f;
    --color-border: #cccccc;

    --color-font-black: #000000;
    --color-font-white: #ffffff;

    --font-family: "Inter", "Sarabun", sans-serif;
}

* {
    padding: 0;
    margin: 0;

    box-sizing: border-box;
}

body {
    height: max-content;

    font-family: var(--font-family);

    color: var(--color-font-black);
}

a {
    text-decoration: none;

    color: var(--color-link);
}

hr {
    width: 100%;
    height: 1px;

    margin: 1em 0;

    background: var(--color-border);
    border: none;
}

.navbar {
    width: 100%;
    height: 44px;

    padding: 0 8px;

    font-size: 12px;

    background: var(--background-navbar);
    backdrop-filter: blur(0.8em);
    -webkit-backdrop-filter: blur(0.8em);

    overflow: hidden;

    z-index: 1000;
}

.navbar-wrapper {
    width: 100%;
    max-width: 1000px;

    margin: auto;
}

.navbar-wrapper a {
    display: inline-block;

    padding: 16px 8px;

    line-height: 1;
    text-decoration: none;

    color: var(--color-font-white);

    opacity: 0.5;

    transition: 0.3s;

    cursor: pointer;
}

.navbar-wrapper a:hover {
    opacity: 0.8;
}

.navbar-right {
    float: right;
}

.infobar {
    width: 100%;
    height: 49px;

    padding: 0 8px;

    background: var(--background-infobar);
    backdrop-filter: blur(0.8em);
    -webkit-backdrop-filter: blur(0.8em);

    overflow: hidden;

    z-index: 1000;
}

.infobar-wrapper {
    width: 100%;
    max-width: 1000px;

    margin: auto;

    border-bottom: 1px solid #dddddd;
}

.infobar-wrapper p {
    font-weight: bold;

    cursor: default;
}

.infobar-wrapper a {
    cursor: pointer;
}

.infobar-wrapper a, .infobar-wrapper p {
    display: inline-block;

    padding: 16px 8px;

    line-height: 1;
    text-decoration: none;

    color: var(--color-font-black);

    transition: 0.3s;
}

.infobar a:hover {
    color: var(--color-link);
}

.infobar-sticky {
    position: fixed;

    top: 0;

    width: 100%;
}

.infobar-right {
    float: right;

    padding: 2.5px;

    font-size: 12px;
}

footer {
    padding: 1em;

    font-size: 0.8em;

    background: var(--background-footer);
}

.footer-wrapper {
    width: 100%;
    max-width: 1000px;

    margin: auto;
}

.footer-links-wrapper {
    display: grid;

    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    gap: 0.5em;
}

.footer-links-wrapper div > div {
    margin: 0 0.5em;
}

.footer-links-wrapper div > p {
    margin: 0.25em 0;
}

.footer-links-wrapper div > div > a {
    display: block;

    color: var(--color-font-black);
    
    opacity: 0.5;

    transition: 0.3s;
}

.footer-links-wrapper div > div > a:hover {  
    opacity: 0.8;
}

.footer-copyright {
    display: grid;

    grid-template-columns: 1fr max-content;

    width: 100%;

    opacity: 0.5;
}

.main {
    width: 100%;
    max-width: 1000px;

    padding: 1em;
    margin: auto;
}

.popup-wrapper {
    position: fixed;

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    width: max-content;

    padding: 1em;

    background: var(--color-font-white);
    border: 1px solid var(--color-border);
    border-radius: 0.5em;
    
    z-index: 1000;
}

.popup {
    position: relative;
}

.popup-close-button {
    position: absolute;

    top: 0.5em;
    right: 0.5em;
}

@media (max-width: 500px) {
    .footer-links-wrapper {
        grid-template-columns: 1fr;
    }
}