WIP. Some mobile styles for Wanikani reviews to make it a little friendlier for smaller devices.

wanikani-mobile.css

@media (max-width: 767px) {
    #question #character {
        font-size: 8.331em !important;
    }
    #question #question-type h1 {
        font-size: 1.35em;
    }

    #question #character.radical img {
        width: 35%;
    }
    #stats {
        font-size: 16px;
    }
    #summary-button {
        font-size: 20px;
    }
    #additional-content ul li span {
        padding: 10px;
    }
    #answer-form input[type="text"] {
        font-size: 1.15em;
    }
    #answer-form button {
        font-size: 1.15em;
    }

    #additional-content ul li span {
        font-size: 1.15em;
    }
    #additional-content ul li {
        width: 50%;
        margin-bottom: 0.5em;
    }

    #reviews {
        padding-bottom: 10px;
    }
}


/* Element | https://www.wanikani.com/review/session */
#reviews > div:nth-child(1) {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

/* Element | https://www.wanikani.com/review/session */
#additional-content {
    flex: 10%;
}

/* Element | https://www.wanikani.com/review/session */
#question {
    flex: 90%;
    display: flex;
    flex-direction: column;
}

/* Element | https://www.wanikani.com/review/session */
#character {
    flex: 1;
    display: flex;
    justify-content: center;
    align-content: center;
}

/* Element | https://www.wanikani.com/review/session */
#character > span:nth-child(1) {
    display: block;
    align-self: center;
    line-height: 1em;
}



body {
    /* background-color: #eee; */
    background-color: #000;
}

#question #question-type.meaning {
    /* color: #555; */
    /* border-top: 1px solid #d5d5d5; */
    /* border-bottom: 1px solid #c8c8c8; */
    /* background-color: #e9e9e9; */
    /* background-image: -moz-linear-gradient(top, #eee, #e1e1e1); */
    /* background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#eee), to(#e1e1e1)); */
    /* background-image: -webkit-linear-gradient(top, #eee, #e1e1e1); */
    /* background-image: -o-linear-gradient(top, #eee, #e1e1e1); */
    /* background-image: linear-gradient(to bottom, #eee, #e1e1e1); */
    /* background-repeat: repeat-x; */
    /* filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFEEEEEE, endColorstr=#FFE1E1E1, GradientType=0); */
    color: #0098e4;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    background-color: #023;
}

#answer-form input[type="text"] {
    /* -webkit-box-shadow: 3px 3px 0 #e1e1e1; */
    /* -moz-box-shadow: 3px 3px 0 #e1e1e1; */
    /* box-shadow: 3px 3px 0 #e1e1e1; */
}


#question #question-type.reading {
    /* background-color: #2e2e2e; */
    /* background-image: -moz-linear-gradient(top, #3c3c3c, #1a1a1a); */
    /* background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#3c3c3c), to(#1a1a1a)); */
    /* background-image: -webkit-linear-gradient(top, #3c3c3c, #1a1a1a); */
    /* background-image: linear-gradient(to bottom, #3c3c3c, #1a1a1a); */
    /* background-repeat: repeat-x; */
    background-color: #26003a;
}


/* application-b7902f33bda0f51f81e93f13ef52400ef5a01c77c720d81130fb7ce1ad583279.css | https://cdn.wanikani.com/assets/v03/review/application-b7902f33bda0f51f81e93f13ef52400ef5a01c77c720d81130fb7ce1ad583279.css */
#question #question-type.reading {
    /* background-color: #2e2e2e; */
    /* background-image: -moz-linear-gradient(top, #3c3c3c, #1a1a1a); */
    /* background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#3c3c3c), to(#1a1a1a)); */
    /* background-image: -webkit-linear-gradient(top, #3c3c3c, #1a1a1a); */
    /* background-image: linear-gradient(to bottom, #3c3c3c, #1a1a1a); */
    /* background-repeat: repeat-x; */
    background-color: #26003a;
}

#additional-content ul li span {
    /* background-color: #fbfbfb; */
    /* color: #888888; */
    /* -webkit-box-shadow: 3px 3px 0 #e1e1e1; */
    /* -moz-box-shadow: 3px 3px 0 #e1e1e1; */
    /* box-shadow: 3px 3px 0 #e1e1e1; */
    background-color: #242424;
    color: #fff;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}


#question #question-type.reading {
    /* border-top: 1px solid #555; */
    /* background-color: #2e2e2e; */
    /* background-image: -moz-linear-gradient(top, #3c3c3c, #1a1a1a); */
    /* background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#3c3c3c), to(#1a1a1a)); */
    /* background-image: -webkit-linear-gradient(top, #3c3c3c, #1a1a1a); */
    /* background-image: linear-gradient(to bottom, #3c3c3c, #1a1a1a); */
    /* background-repeat: repeat-x; */
    border-top: 1px solid #000;
    background-color: #26003a;
}

#additional-content ul li span {
    /* background-color: #fbfbfb; */
    /* color: #888888; */
    /* -webkit-box-shadow: 3px 3px 0 #e1e1e1; */
    /* -moz-box-shadow: 3px 3px 0 #e1e1e1; */
    /* box-shadow: 3px 3px 0 #e1e1e1; */
    background-color: #242424;
    color: #fff;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}



#question #question-type.reading {
  /* border-top: 1px solid #555; */
  /* background-color: #2e2e2e; */
  /* background-image: -moz-linear-gradient(top, #3c3c3c, #1a1a1a); */
  /* background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#3c3c3c), to(#1a1a1a)); */
  /* background-image: -webkit-linear-gradient(top, #3c3c3c, #1a1a1a); */
  /* background-image: linear-gradient(to bottom, #3c3c3c, #1a1a1a); */
  /* background-repeat: repeat-x; */
  border-top: 1px solid #000;
  background-color: #26003a;
}

#additional-content ul li span {
  /* background-color: #fbfbfb; */
  /* color: #888888; */
  /* -webkit-box-shadow: 3px 3px 0 #e1e1e1; */
  /* -moz-box-shadow: 3px 3px 0 #e1e1e1; */
  /* box-shadow: 3px 3px 0 #e1e1e1; */
  background-color: #242424;
  color: #fff;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

#answer-form input[type="text"] {
  /* border: none; */
  /* -webkit-box-shadow: 3px 3px 0 #e1e1e1; */
  /* -moz-box-shadow: 3px 3px 0 #e1e1e1; */
  /* box-shadow: 3px 3px 0 #e1e1e1; */
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  background-color: #3a3a3a;
  border: #575757 1px solid;
}

/* Element | https://www.wanikani.com/review/session */

#additional-content > ul:nth-child(1) {
  display: flex;
}



#question #question-type.reading {
  /* border-top: 1px solid #555; */
  /* background-color: #2e2e2e; */
  /* background-image: -moz-linear-gradient(top, #3c3c3c, #1a1a1a); */
  /* background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#3c3c3c), to(#1a1a1a)); */
  /* background-image: -webkit-linear-gradient(top, #3c3c3c, #1a1a1a); */
  /* background-image: linear-gradient(to bottom, #3c3c3c, #1a1a1a); */
  /* background-repeat: repeat-x; */
  border-top: 1px solid #000;
  background-color: #26003a;
}

#additional-content ul li span {
  /* background-color: #fbfbfb; */
  /* color: #888888; */
  /* -webkit-box-shadow: 3px 3px 0 #e1e1e1; */
  /* -moz-box-shadow: 3px 3px 0 #e1e1e1; */
  /* box-shadow: 3px 3px 0 #e1e1e1; */
  background-color: #242424;
  color: #fff;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

#answer-form input[type="text"] {
  /* border: none; */
  /* -webkit-box-shadow: 3px 3px 0 #e1e1e1; */
  /* -moz-box-shadow: 3px 3px 0 #e1e1e1; */
  /* box-shadow: 3px 3px 0 #e1e1e1; */
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  background-color: #3a3a3a;
  border: #575757 1px solid;
}

#answer-form button {
  /* background-color: #fff; */
  background-color: #242424;
}

/* Element | https://www.wanikani.com/review/session */

#additional-content > ul:nth-child(1) {
  display: flex;
}

/* font-awesome.min.css | https://maxcdn.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css */

.icon-chevron-right::before {
  color: white;
}

/* Inline #6 | https://www.wanikani.com/review/session */

#answer-form input[type="text"] {
  /* border: #575757 1px solid; */
  border: none;
}