/* Setting different variables for light and dark mode */
:root {
    --bg-plain: #f0f0f0;
    --bg-gradient: linear-gradient(135deg, #ffffff, #f0f0f0);
    --text-color: #383838;
    --border-style: .1rem solid color-mix(in srgb, var(--text-color) 8%, transparent);
    --box-shadow: color-mix(in srgb, #383838 8%, transparent) 0 1.429rem 1.786rem -.357px, color-mix(in srgb, #383838 2%, transparent) 0 .714rem .714rem -.357rem;
    --box-shadow-highlight: color-mix(in srgb, #383838 12%, transparent) 0 1.429rem 1.786rem -.357px, color-mix(in srgb, #383838 4%, transparent) 0 .714rem .714rem -.357rem;
    --transition-time: 100ms;
    --small-gab: .2rem;
    --medium-gab: .5rem;
    --large-gab: .8rem;
}
[data-theme="dark"] {
    --bg-plain: #143a45;
    --bg-gradient: linear-gradient(30deg, #143a45 0%, #152d33 90%, #1a373e 100%);
    --text-color: #e0e0e0;
}
html, body {
    font-size: 14px;
    font-family:'Roboto','Hiragino Sans','Meiryo','Hiragino Kaku Gothic ProN',sans-serif;
    margin: 0;
    height: 100vh;
}
body {
    background: var(--bg-gradient);
    color: var(--text-color);
    transition: background-color 0.3s, color 0.3s;
    display: flex;
    flex-direction: column;
}
main {
    display: flex;
    flex-direction: row;
    flex-grow: 1;
    min-height: 40rem;
}
header {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}
header gs-logo {
    font-size: 4rem;
    line-height: 4rem;
    margin: 0 var(--medium-gab) -1rem -.2rem;
}
h2, h3, h4 {
    margin-block-end: var(--small-gab);
}
a {
    color: color-mix(in srgb, var(--text-color) 20%, #007ACC);
}
a:visited {
    color: color-mix(in srgb, var(--text-color) 60%, #db63ff);
}
a:hover {
    color: color-mix(in srgb, var(--text-color) 60%, #007ACC) !important;
}
a:active {
    color: color-mix(in srgb, var(--text-color) 40%, #007ACC) !important;
    transform: translateX(-.1rem);
}
#gakuscan-capture {
    flex-grow: 1;
    box-sizing: border-box;
    height: 100%;
    width: 100%;
    margin: auto;
    padding: var(--large-gab);
    display: flex;
    align-items: center;
}
#gs-apikey-hint {
    margin: auto;
}
.gs-hidden {
    display: none;
}
#gakuscan-log {
    max-width: 30rem;
    flex-basis: 30%;
}

.gs-entry-img img {
    max-height: 20rem;
    max-width: 100%;
}

/* Highlight colors for different grammatical structures */
.gs-noun {
    --highlight-color: #007ACC;
}
.gs-pronoun {
    --highlight-color: #1E90FF;
}
.gs-verb {
    --highlight-color: #FF4500;
}
.gs-adjective {
    --highlight-color: #FFA500;
}
.gs-adnominal-adjective {
    --highlight-color: #7CFC00;
}
.gs-particle {
    --highlight-color: #228B22;
}
.gs-adverb {
    --highlight-color: #FFD700;
}
.gs-auxiliary-verb {
    --highlight-color: #800080;
}
.gs-conjunction {
    --highlight-color: #40E0D0;
}
.gs-interjection {
    --highlight-color: #FF69B4;
}
.gs-filler,
.gs-sign {
    --highlight-color: #B0BEC5;
}
/* Rules for applying highlight colors to tokens and annotations */
[data-highlight] p.gakuscan-entry-text .gs-analized {
    background: color-mix(in srgb, var(--highlight-color, transparent) 50%, transparent);
    border: .2rem solid color-mix(in srgb, var(--highlight-color, transparent) 20%, transparent);
    background-clip: content-box;
}
p.gakuscan-entry-text .gs-analized:hover, 
p.gakuscan-entry-text .gs-analized.gs-highlight {
    text-decoration: underline;
}
.gs-entry-img div.gakuscan-entry-anno {
    background: color-mix(in srgb, var(--highlight-color, transparent) 30%, transparent);
    position: absolute;
}
.gs-entry-img div.gakuscan-entry-anno:hover, 
.gs-entry-img div.gakuscan-entry-anno.gs-highlight {
    border: .2rem solid color-mix(in srgb, var(--highlight-color, transparent) 80%, transparent);
}


@media (orientation: portrait) {
    main {
        flex-direction: column;
    }
    #gakuscan-log {
        max-width: none;
        flex-basis: 45%;
        padding-top: var(--medium-gab);
    }
}