56a3d57328169eb03b813cd629cb9146fc1e2fc9
   1#img_container, #controls_container {
   2        width: 100%;
   3        max-width: 1500px;
   4        margin: auto;
   5}
   6
   7img {
   8        width: 100%;
   9}
  10
  11#current_div {
  12        float: left;
  13        width: 70%;
  14        margin: 10px;
  15}
  16
  17#next_div {
  18        width: 25%;
  19        float: left;
  20        margin: 10px;
  21}
  22
  23h1 {
  24    font-size: 20px;
  25    font-weight: 300;
  26    margin-bottom: 0;
  27}
  28
  29p {
  30        clear: both;
  31}
  32
  33body {
  34    background: #3a393a;
  35    color: #efefef;
  36    font-family: sans-serif;
  37    #max-width: 500px;
  38}
  39
  40input {
  41        width: 20px;
  42        font-size: 17px;
  43}
  44
  45#count {
  46        float: right;
  47}
  48
  49@media only screen and (max-width: 800px) {
  50        #current_div, #next_div {
  51                width: calc(100% - 20px) !important;
  52        }
  53}
  54
  55.icon {
  56        width: 50px;
  57        filter: invert(88%) sepia(4%) saturate(15%) hue-rotate(18deg) brightness(92%) contrast(97%);
  58}
  59
  60.icon:hover {
  61        cursor: pointer;
  62        filter: invert(100%) sepia(24%) saturate(1720%) hue-rotate(187deg) brightness(123%) contrast(87%);
  63}
  64
  65.icon#first, .icon#last {
  66        width: 20px;
  67        margin-bottom: 10px;
  68}
  69
  70button {
  71        margin: 0 10px 0 0;
  72}
  73
  74button#white, button#black {
  75        float: right;
  76}
  77
  78input[type='checkbox'] {
  79        font-size: 15px;
  80}
  81
  82.presentation_text, .start, .stop {
  83        display: none;
  84}
  85
  86.status_text {
  87        float: right;
  88}