:root{
    --hiragana-color: rgb(201, 201, 223);
    --katakana-color: rgb(177, 109, 204);
    --n5-color: #bbf;
    --n4-color: #9d9;
    --n3-color: #dd6;
    --n2-color: #ec7;
    --radicals-color: #7ce;
    
    --hiragana-color-light: rgb(233, 233, 243);
    --katakana-color-light: rgb(200, 146, 221);
    --n5-color-light: rgb(210, 210, 252);
    --n4-color-light: rgb(235, 245, 235);
    --n3-color-light: rgb(228, 228, 133);
    --n2-color-light: rgb(240, 225, 188);
    --radicals-color-light: rgb(204, 240, 255);
}

.inline-input input{
    display: inline-block;
    width: 10%;
    margin:0px;
}

.container{
    max-width:1100px;
}

.top-nav{
    background-color: white;
}

.dark .top-nav{
    background-color: #333;
}

.top-nav li a:hover:not(.active) {
    background-color: #eee;
}

.dark .top-nav li a:hover:not(.active) {
    background-color: #888;
}

h1, h2{
    color: #aaa;
}

h1 .subtext a, h2 .subtext a, h3 .subtext a, h4 .subtext a, h5 .subtext a, h6 .subtext a{
    text-decoration: underline;
}

/* Homepage - 6 selections: hiragana, katanana, kanjiN5, etc... */
section.main {
    min-height: 150px;
    padding: 40px;
    position: relative;
    z-index: 10;
    border-radius: 10px;
}
/* Homepage - Buttons: "Learn Hiragana", etc...*/
.main.hiragana .button {
    background-color: var(--hiragana-color);
}
.main.katakana .button {
    background-color: var(--katakana-color);
}
.main.n5 .button{
    background-color: var(--n5-color);
}
.main.n4 .button{
    background-color: var(--n4-color);
}
.main.n3 .button{
    background-color: var(--n3-color);
}
.main.n2 .button{
    background-color: var(--n2-color);
}
.main.radicals .button{
    background-color: var(--radicals-color);
}
.main h1 {
    font-size: 2em;
    margin-bottom:20px;
}
.main .p-background{
    color: #f2f2f2;
    font-size: 8em;
    line-height: 1em;
    position: absolute;
    z-index: -1;
    font-weight: bold;
    right: 20px;
}
/* HomePage - Element Hover */
.main.hiragana:hover{
    /*background-color: var(--hiragana-color);*/
    background-image: linear-gradient(70deg, var(--hiragana-color), var(--hiragana-color-light));
}
.main.katakana:hover{
    background-image: linear-gradient(70deg, var(--katakana-color), var(--katakana-color-light));
}
.main.n5:hover{
    background-image: linear-gradient(70deg, var(--n5-color), var(--n5-color-light));
}
.main.n4:hover{
    background-image: linear-gradient(70deg, var(--n4-color), var(--n4-color-light));
}
.main.n3:hover{
    background-image: linear-gradient(70deg, var(--n3-color), var(--n3-color-light));
}
.main.n2:hover{
    background-image: linear-gradient(70deg, var(--n2-color), var(--n2-color-light));
}
.main.radicals:hover{
    background-image: linear-gradient(70deg, var(--radicals-color), var(--radicals-color-light));
}

.main:hover .button{
    background-color: white;
    color: #888;
}
.main:hover h1{
    color: #fff;
}
.main:hover .p-background{
    color: rgba(255, 255, 255, 0.5)
}

/* Items displayed (Hiraganas, Katakanas or Kanjis)*/
.item h1{
    font-size: 4em;
    line-height: 2em;
    font-weight: lighter;
}
/*.item h1 a{
    font-size: 1.6em;
    line-height: 1.6em;
    font-weight: lighter;
}*/
.hiragana-cards .item h1{
    color: rgb(201, 201, 223);
}
.katakana-cards .item h1{
    color: rgb(177, 109, 204);
}
.level-5 .item h1 a, .level-5 .item h1{
    color: #bbf;
}
.level-4 .item h1 a, .level-4 .item h1{
    color: #9d9;
}
.level-3 .item h1 a, .level-3 .item h1{
    color: #dd6;
}
.level-2 .item h1 a, .level-2 .item h1{
    color: #ec7;
}
.level-1 .item h1 a, .level-1 .item h1{
    color: #d88;
}
.radicals .item h1 a, .radicals .item h1{
    color: #7ce;
}
.item p{
    color: #666;
    font-size: 1.0em;
    line-height: 1.0em;
}
.item p small{
    color: #bbb;
    font-weight: 100;
    font-size: 0.8em;
    line-height: 2em;
}
.item-detail{
    background-color: #f2f2f2;
    padding: 10px;
    padding-top: 0px;
    border-radius: 4px;
    margin:5px;
    overflow: auto;
    height: 120px;
}
.item-detail.item-detail-small{
    height: 80px;
}
.item-detail.item-detail-very-small{
    height: 50px;
}
/* Items hover*/
.item:hover{
    box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.2);
}
.hiragana-cards .item:hover{
    background-image: linear-gradient(70deg, var(--hiragana-color), var(--hiragana-color-light));
}
.katakana-cards .item:hover{
    background-image: linear-gradient(70deg, var(--katakana-color), var(--katakana-color-light));
}
.card-group.level-5 .item:hover{
    background-image: linear-gradient(70deg, var(--n5-color), var(--n5-color-light));
}
.card-group.level-4 .item:hover{
    background-image: linear-gradient(70deg, var(--n4-color), var(--n4-color-light));
}
.card-group.level-3 .item:hover{
    background-image: linear-gradient(70deg, var(--n3-color), var(--n3-color-light));
}
.card-group.level-2 .item:hover{
    background-image: linear-gradient(70deg, var(--n2-color), var(--n2-color-light));
}
.card-group.radicals .item:hover{
    background-image: linear-gradient(70deg, var(--radicals-color), var(--radicals-color-light));
}
.item:hover .item-detail{
    background-color: rgba(255, 255, 255, 0.5);
}
.hiragana-cards .item:hover h1,
.katakana-cards .item:hover h1,
.level-5 .item:hover h1 a, .level-5 .item:hover h1,
.level-4 .item:hover h1 a, .level-4 .item:hover h1,
.level-3 .item:hover h1 a, .level-3 .item:hover h1,
.level-2 .item:hover h1 a, .level-2 .item:hover h1,
.radicals .item:hover h1 a, .radicals .item:hover h1
{
    color: white;
}

.horizontal-tabs.level-5 li.active{
    color: #bbf;
    border-bottom:2px solid #bbf;
}
.horizontal-tabs.level-4 li.active{
    color: #9d9;
    border-bottom:2px solid #9d9;
}
.horizontal-tabs.level-3 li.active{
    color: #dd6;
    border-bottom:2px solid #dd6;
}
.horizontal-tabs.level-2 li.active{
    color: #ec7;
    border-bottom:2px solid #ec7;
}
.horizontal-tabs.level-1 li.active{
    color: #d88;
    border-bottom:2px solid #d88;
}
.horizontal-tabs.radicals li.active{
    color: #7ce;
    border-bottom:2px solid #7ce;
}

/* Not used for now*/
#section-android-app p {
    margin-bottom: 20px;
}
#section-android-app h1, #section-android-app p{
    font-weight: 100;
    color: #aaa;
}
#section-android-app p{
    font-size: 1.6em;
}

h1.small{
    font-size: 3em;
}