@import url(https://fonts.googleapis.com/css?family=Newsreader);

:root {
    --main-color: #ff6900;
    --main-color-softer: #ffa362;
    --secondary-color: #1d37b7;
    --background-color: #fff;
    --code-background: #ededed;
    --main-text-color: #1e1e1e;
    --term-link-color: #000;
    --termofday-color: #878787;
    --lightbox-border-color: #555;
    --lightbox-highlight-color: #fff;
    --searchbar-border-color: #bbb;
    --searchbar-placeholder-color: #555;
    --nav-background-color: #333;
    --alternate-link-color: var(--secondary-color);
    --top-header-color: #fff;
    --footer-color: #f7f7f7;
    --increase-value-color: #008800;
    --decrease-value-color: #ff3535;
    --noincrease-value-color: #c7b690;
}

:root.dark-mode {
    --main-color: #ff6400;
    --secondary-color: #007fd0;
    --background-color: #1f2024;
    --code-background: #5f5f5f;
    --main-text-color: #e4ebef;
    --term-link-color: #fff;
    --termofday-color: #898c9b;
    --lightbox-border-color: #ddd;
    --lightbox-highlight-color: #272727;
    --searchbar-border-color: #ddd;
    --searchbar-placeholder-color: #ddd;
    --alternate-link-color: #0fa2ff;
    --top-header-color: #1f2024;
    --footer-color: #1f2024;
    --increase-value-color: #00dd00;
    --decrease-value-color: #f74d4f;
}

a.external {
    background: url(/https/glossary.infil.net/images/misc/external.png) center right no-repeat;
    padding-right: 13px;
    padding-top: 10px;
}

:root.dark-mode a.external {
    background: url(/https/glossary.infil.net/images/misc/external-dm.png) center right no-repeat;
}

code {
    font-family: monospace;
    font-size: 90%;
    background: var(--code-background);
}
pre {
    background-color: var(--background-color);
}

#theme-selector {
    width: 30px;
    margin-left: 20px;
    cursor: pointer;
}

#glossary-wrapper {
    margin: auto;
    max-width: 800px;
    font-family: "Newsreader";
}

#glossary-filters {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin: 0.5em 0;
    font-size: 1.5em;
    line-height: 1.5em;
    font-weight: bold;
    font-family: "Source Sans Pro";    
}
.glossary-header {
    cursor: pointer;
    box-sizing: content-box;
    border: none;
    padding: 0 6.2px;
}
.glossary-header:hover {
    color: var(--main-color);
}
.glossary-header.selected {
    background-color: var(--main-color);
    color: white;
}
.glossary-header.small {
    font-size: 65%;
}
#glossary-games {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 2.0em;
}
.glossary-game-header-link {
    margin: 0;
    padding: 0;
    border: none;
    display: flex; /* flex the image inside of it so it can be vertically centered */
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
.term a.glossary-game-header-link {
    border: none;
}
.glossary-game-header {
    height: 36px;
    margin-right: 0.1em;
    margin-bottom: 0.5em;
    cursor: pointer;
    box-sizing: content-box;
    padding: 3px;
    border: 3px solid var(--background-color);
}
.glossary-game-header.selected {
    border-color: var(--main-color);
}
.glossary-game-header:hover {
    border-color: var(--main-color);
}
.glossary-game-header-linebreak {
    flex-basis: 100%;
}

.noresults {
    font-family: "Newsreader";
    color: var(--main-text-color);
    font-size: 120%;
}

.term {
    margin-bottom: 2.5em;
    position: relative;
    color: var(--main-text-color);
    font-family: "Newsreader";
}
.term a {
    color: var(--term-link-color);
    border-bottom: solid 1px;
}
.term a:hover {
    color: var(--main-color);
}
.term.fromClick {
    padding-left: 3em;
}
.term.fromClick .name {
    color: var(--main-color-softer);
}
.term.recently-selected .name {
    color: var(--main-color);
}

.glossary-game {
    height: 28px;
    margin-left: 0.5em;
    cursor: pointer;
}
.term .linkToTerm {
    margin-left: auto; /* right-align the link */
    display: flex; /* flex the image inside of it so it can be vertically centered */
    justify-content: center;
    align-items: center;
    cursor: pointer;
    border: none;
}
.term .linkToTerm img {
    height: 28px;
    /* same as close button color */
    filter: invert(70%) sepia(0%) saturate(27%) hue-rotate(232deg) brightness(102%) contrast(108%);
}
.term .linkToTerm img:hover {
    /* same as close button hover color */
    filter: invert(43%) sepia(81%) saturate(2747%) hue-rotate(1deg) brightness(105%) contrast(103%);
}

.term .term-close-button {
    width: 22px;
    position: absolute;
    left: 22px;
    /* filter: invert(96%) sepia(1%) saturate(996%) hue-rotate(175deg) brightness(110%) contrast(60%); */
    filter: invert(70%) sepia(0%) saturate(27%) hue-rotate(232deg) brightness(102%) contrast(108%);
}
:root.dark-mode .term .term-close-button {
    /* matches #898c9b */
    filter: invert(63%) sepia(3%) saturate(1451%) hue-rotate(193deg) brightness(88%) contrast(87%);
}
:root.dark-mode .term .term-close-button:hover {
    filter: invert(43%) sepia(81%) saturate(2747%) hue-rotate(1deg) brightness(105%) contrast(103%);
}
/* matches #ff6900 */
.term .term-close-button:hover {
    filter: invert(43%) sepia(81%) saturate(2747%) hue-rotate(1deg) brightness(105%) contrast(103%);
}
.term svg {
    position: absolute;
}

.term .term-content {
    padding-left: 2em;
}
.term.fromClick .term-content {
    padding-left: 0;
}

.term .media-container {
    padding-left: 1em;
    margin-top: 1em;
    display: flex;    
}
.term.fromClick .media-container {
    padding-left: 0;
}

.term .lightbox {
    margin-top: 15px;
    font-weight: bold;
    border: 2px solid var(--lightbox-border-color);
    color: var(--lightbox-border-color);
    border-radius: 15px;
    padding: 10px;
    display: inline-flex;
    align-items: center;
    font-family: "Source Sans Pro";
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
}
.term .lightbox img {
    margin-left: 7px;
    /* convert the black icon to #9E0067 -- source https://codepen.io/sosuke/pen/Pjoqqp */
    /* filter: invert(11%) sepia(68%) saturate(5306%) hue-rotate(309deg) brightness(91%) contrast(111%); */
    filter: invert(34%) sepia(13%) saturate(0%) hue-rotate(267deg) brightness(91%) contrast(93%);
}
:root.dark-mode .term .lightbox img {
    filter: invert(92%) sepia(0%) saturate(56%) hue-rotate(146deg) brightness(97%) contrast(94%);
}

.term .lightbox:hover {
    background-color: var(--lightbox-border-color);
    color: var(--lightbox-highlight-color);
}
.term .lightbox:hover img {
    /* convert hovered image to white */
    filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(152deg) brightness(103%) contrast(103%);
}
:root.dark-mode .term .lightbox:hover img {
    /* matches #272727 */
    filter: invert(8%) sepia(4%) saturate(13%) hue-rotate(314deg) brightness(102%) contrast(84%);
}

.term .headerdiv {
    display: flex;
    align-items: center;
    margin-bottom: 0.6em;
}
.term .name {
    color: var(--main-color);
    font-family: "Source Sans Pro";
    font-size: 1.5em;
    font-weight: bold;
    padding-right: 0.4em;
    /* text-transform: uppercase; */
    /* letter-spacing: 1px; */
}

.term .subname {
    color: var(--main-color);
    font-family: "Source Sans Pro";
    font-size: 1.2em;
    font-weight: 600;
    /* text-transform: uppercase; */
    padding-right: 0.4em;
    /* letter-spacing: 1px; */
    margin-top: -0.3em;
    margin-bottom: 0.6em;
}

 .term .termOfTheDay {
    display: flex;
    flex-direction: row;
    color: var(--termofday-color);
    font-family: "Source Sans Pro";
    font-size: 1.3em;
    font-weight: bold;
    margin-bottom: 0.7em;
}
.term .termOfTheDay:before, .term .termOfTheDay:after{
    content: "";
    flex: 1 1;
    border-bottom: 2px solid;
    margin: auto;
}
.term .termOfTheDay:before {
    margin-right: 20px
}
.term .termOfTheDay:after {
    margin-left: 20px
}

.term .term-jp-container {
    margin-top: 1em;
    display: flex;
    align-items: flex-start;
}
.term .term-jp-text {
    margin-left: 1em;

}
.term .term-flag {
    width: 36px;
    border-radius: 15%;
}
.term .term-botlinks {
    display: flex;
    justify-content: flex-end;
    margin-top: 15px;
    font-size: 80%;
}
.term .term-botlinks > a {
    margin-left: 20px;
    border-bottom: none;
    text-decoration: underline;
}

/* .term .def {
} */

.glossary-link {
    cursor: pointer;
}
.glossary-media-icon {
    width: 32px;
    vertical-align: middle;
}

.gfyVid {
    max-height: 480px;
}


#search-input {
    margin-left: auto;
    margin-right: auto;
    background-image: url('/https/glossary.infil.net/css/images/searchicon.png');
    background-position: 10px 12px; 
    background-repeat: no-repeat;
    
    width: 100%;
    padding: 12px 20px 12px 40px;
    border: 2px solid var(--searchbar-border-color);
    background-color: var(--background-color);
}
#search-input::placeholder {
    color: var(--searchbar-placeholder-color);
}

.sidepage-header {
    color: var(--main-color);
    font-family: "Source Sans Pro";
    font-size: 1.7em;
    font-weight: bold;
    margin-bottom: 0.8em;
}
.sidepage-subheader {
    color: var(--main-color);
    font-family: "Source Sans Pro";
    font-size: 1.5em;
    font-weight: bold;
}

#glossary-stats {
    width: 100%;
    border: 2px solid var(--main-color);
    border-radius: 20px;
    margin-bottom: 40px;
}

.stats-header, .update-header {
    font-weight: bold;
    color: var(--main-color);
    font-family: "Source Sans Pro";
}
.update-header {
    font-size: 120%;
}
.stats-hr {
    border-top: solid 1px var(--main-color);
    color: var(--main-color);
    margin: 0;
}
.stats-by-game {
    display: flex;
    flex-wrap: wrap;
    padding-left: 15px;
}
.stats-by-game > div {
    flex: 0 0 19%;
    display: flex;
    align-items: center;
    margin: 7px 0;
    padding-right: 15px;
}

.stats-game-icon {
    height: 36px;
    margin-right: 8px;
}
.update-list > li, .credits-list > li {
    margin-bottom: 20px;
    margin-left: 15px;
    text-indent: -15px;
}
.update-hr {
    border-top: solid 1px var(--main-color);
    color: var(--main-color);
    margin-bottom: 20px;
}
.credits-list > li {
    margin-bottom: 10px;
}
.update-sublist {
    text-indent: 0;
    list-style-type: square;
    list-style-position: inside;
    margin: 0;
    padding: 0;
}
.update-sublist > li {
    margin: 0.3em 0;
}
.update-term-list {
    width: 100%;
    border: 2px solid var(--main-color);
    border-radius: 20px;
    padding: 0.5em 1em;
    margin: 0.5em 0 1em 0;
    display: none;
    flex-wrap: wrap;
}
.update-term-list > div {
    flex-basis: 50%;
    padding-right: 5px;
}
.update-term-list img {
    width: 16px;
    margin-left: 0.3em;
    vertical-align: text-top;
}
:root.dark-mode .update-term-list img {
    filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(152deg) brightness(103%) contrast(103%);
}

.expand-term-button {
    font-family: "Source Sans Pro";
    font-weight: bold;
    color: var(--main-color);
    border: 2px solid var(--main-color);
    padding: 0.3em 0.6em;
    margin: 0.4em 0;
    border-radius: 15px;
    display: inline-block;
    cursor: default;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
}
.expand-term-button:hover {
    color: white;
    background-color: var(--main-color);
}
.increase-value {
    color: var(--increase-value-color);
    font-family: "Source Sans Pro";
    font-weight: bold;
}
.decrease-value {
    color: var(--decrease-value-color);
    font-family: "Source Sans Pro";
    font-weight: bold;
}
.noincrease-value {
    color: var(--noincrease-value-color);
    font-family: "Source Sans Pro";
    font-weight: bold;
}


@media (max-width: 980px) {
    .term .term-close-button {
        width: 18px;
        left: 20px;
    }
}
@media (max-width: 840px) {
    .term .term-close-button {
        width: 22px;
        left: 22px;
    }
    #glossary-intro {
        font-size: 14px;
        padding: 6px;
        border-radius: 8px;
    }
}
@media (max-width: 736px) {
    .term {
        margin-bottom: 2em;
    }
    .term .term-close-button {
        width: 18px;
        left: 16px;
    }
    .glossary-media-icon {
        width: 26px;
    }
    .glossary-game-header {
        height: 32px;
    }
    .glossary-game {
        height: 22px;
    }
    .term .linkToTerm img {
        height: 22px;
    }
    .term .term-flag {
        width: 28px;
    }
    #search-input {
        width: 100%;
    }
    .stats-by-game {
        padding-left: 10px;
    }
    .stats-by-game > div {
        flex: 0 0 24%;
    }
    .stats-game-icon {
        height: 28px;
    }
    .update-term-list img {
        width: 13px;
    }
    .glossary-game-header-linebreak {
        display: none;
    }
}
@media (max-width: 480px) {
    #glossary-intro {
        font-size: 12px;
    }
}
@media (max-width: 285px) {
    .update-term-list > div {
        flex-basis: 100%;
    }
}