/* use the standard Material Light theme to match GrapheneOS apps */
/* https://android.googlesource.com/platform/frameworks/base/+/android-11.0.0_r32/core/res/res/values/colors_material.xml */

html {
    height: -webkit-fill-available; /* replace with stretch when standardized */
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: -webkit-fill-available; /* replace with stretch when standardized */
    font-family: Roboto, sans-serif;
    background-color: #fafafa; /* grey50 */
    color: rgba(0, 0, 0, 0.87); /* 87% black */
    margin: 0;
    padding: 0;
    overflow-y: scroll;
}

a {
    color: #1565c0; /* blue800 */
    text-decoration: none;
}

a:visited {
    color: #6a1b9a; /* purple800 */
}

a:hover {
    text-decoration: underline;
}

h1 a, h1 a:visited, h2 a, h2 a:visited, h3 a, h3 a:visited, h4 a, h4 a:visited, h5 a, h5 a:visited, h6 a, h6 a:visited {
    color: rgba(0, 0, 0, 0.87); /* 87% black */
}

code, pre {
    background-color: #e0e0e0; /* grey300 */
    font-family: "Roboto Mono", monospace;
}

pre {
    overflow-x: auto;
    border-radius: 5px;
    padding: 10px;
}

code {
    border-radius: 2.5px;
}

#site-menu ul {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    margin: 0;
    padding: 0;
}

#site-menu {
    background-color: #212121; /* grey900 */
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
    white-space: nowrap;
}

#site-menu ul li {
    list-style-type: none;
    display: flex;
}

#site-menu ul li:hover {
    background-color: #424242; /* grey800 */
}

#site-menu ul li a {
    color: #fff; /* 100% white */
    display: flex;
    text-decoration: none;
    padding: 1em;
    align-items: center;
}

#site-menu ul li a:visited {
    color: #fff; /* 100% white */
}

#site-menu ul li[aria-current] a {
    color: #64b5f6; /* blue300 */
}

#site-menu img {
    height: 1.8rem;
    width: 1.8rem;
    filter: invert(100);
    vertical-align: middle;
    margin-right: 0.5rem;
}

#site-menu ul li[aria-current] img {
    filter: invert(67%) sepia(13%) saturate(3136%) hue-rotate(180deg) brightness(102%) contrast(93%);
}

main {
    margin-left: auto;
    margin-right: auto;
    padding: 1em;
    max-width: 832px;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
    overflow-wrap: break-word;
}

.coin-address {
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.coin-address > img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

footer img {
    width: 60px;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

footer {
    margin-top: auto;
    margin-left: auto;
    margin-right: auto;
    padding: 1em;
    max-width: 800px;
    overflow-wrap: break-word;
    text-align: center;
}

footer a, footer a:visited {
    color: #616161; /* grey500 */
}

#social {
    margin-top: 2em;
    padding: 0;
    list-style-type: none;
}

#social li {
    display: inline;
    padding: 0 0.5em;
}

#stable-channel ul, #beta-channel ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.error-text {
    /* Baseline Material error color */
    color: #b00020;
}

/* latin */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local('Roboto'), local('Roboto-Regular'), url(/fonts/roboto-v20-regular-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin */
@font-face {
    font-family: 'Roboto';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: local('Roboto Italic'), local('Roboto-Italic'), url(/fonts/roboto-v20-regular-italic-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: local('Roboto Bold'), local('Roboto-Bold'), url(/fonts/roboto-v20-bold-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin */
@font-face {
    font-family: 'Roboto Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local('Roboto Mono'), local('RobotoMono-Regular'), url(/fonts/robotomono-v13-regular-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin */
@font-face {
    font-family: 'Roboto Mono';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: local('Roboto Mono Bold'), local('RobotoMono-Bold'), url(/fonts/robotomono-v13-bold-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@media (prefers-color-scheme: dark) {
    body {
        background: #121212;
        color: rgba(255, 255, 255, 0.87); /* 87% white */
    }

    a {
        color: #90caf9; /* blue200 */
    }

    a:visited {
        color: #ce93d8; /* purple200 */
    }

    h1 a, h1 a:visited, h2 a, h2 a:visited, h3 a, h3 a:visited, h4 a, h4 a:visited, h5 a, h5 a:visited, h6 a, h6 a:visited {
        color: rgba(255, 255, 255, 0.87); /* 87% white */
    }

    code, pre {
        background-color: #424242; /* grey800 */
    }

    footer a, footer a:visited {
        color: #9f9f9f;
    }

    footer img {
        filter: invert(87%);
    }

    .error-text {
        /* Baseline Material dark error color */
        color: #cf6679;
    }
}