/* § CLASSES */

/* Don't show on screen (A11Y)

   This class is used to place elements that are required for
   accessibility purposes off the screen in graphic Web browsers, while
   keeping the element available for screen readers and text browsers.
*/
.a11y-offscreen {
    position: absolute;
    left: -50000px;
}
/* END Don't show on screen */

.button:link,
.button:visited {
    display: inline-block;

    border-color: silver;
    border-radius: 4px;
    border-style: solid;
    border-width: thin;
    color: black;
    padding: 4px;
    text-decoration: none;
}

.button:active,
.button:focus,
.button:hover {
    background-color: black;
    border-color: black;
    color: white;
}

.content-box {
    padding: 0.5rem;
}

.flex {
    display: flex;
}

.flex-auto {
    flex: auto;
}

.index-term:link {
    display: block;

    border-style: none none solid none;
    border-width: thin;
    box-sizing: border-box;
    padding: 0.5em 0em;

    color: black;
    text-decoration: none;
}

.index-term:visited {
    color: purple;
}

.index-term:active,
.index-term:focus,
.index-term:hover {
    background-color: #F2F2F2;
}

.index-term-definition {
    font-size: small;
}

.ja, .reading {
    font-size: 1.5rem;
}

.lema {
    font-size: 2rem;
    font-weight: normal;
}

.mark {
    background-color: yellow;
}

.meaning {
    margin-bottom: 3em;
}

.notes {
    color: gray;
    font-size: small;
}

.particle {
    color: gray;
}

.role {
    display: inline-block;
    border-radius: 4px;
    color: seagreen;
    font-size: small;
    padding: 2px 4px;
}

.text-large {
    font-size: large;
}

.text-small {
    font-size: small;
}

.translation {
    color: gray;
}



/* § WIDE STYLES */

@media screen and (min-width: 600px) {
    .index {
        column-count: 2;
    }
}



/* § WIDER STYLES */

@media screen and (min-width: 900px) {
    .content-box {
        padding: 2rem;
    }
    .index {
        column-count: 3;
    }
}



/* § WIDEST STYLES */

@media screen and (min-width: 1200px) {
    .index {
        column-count: 4;
    }
}