1. :root {
  2.     --dark1: rgb(31,36,42);
  3.     --dark3: rgb(31,36,42);
  4.     --dark4: rgb(44,48,55);
  5.     --dark5: rgb(54,59,62);
  6.     --dark6: rgb(63,68,71);
  7.     --light9: rgba(255, 255, 255,0.9);
  8.     --light8: rgba(255, 255, 255,0.8);
  9.     --light6: rgba(255, 255, 255,0.6);
  10.     --light7: rgba(255, 255, 255,0.7);
  11.     --light5: rgba(255, 255, 255,0.5);
  12.     --limeDuolingo: rgb(150, 210, 50);
  13.     --violetDuolingo: rgb(206, 130, 255);
  14. }
  15.  
  16. @media only screen {
  17.     body {
  18.         max-width: 600px;
  19.         min-width: 300px;
  20.         margin: auto;
  21.     }
  22. }
  23.  
  24. .card {
  25.     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
  26.     font-size: 20px;
  27.     text-align: center;
  28.     -webkit-font-smoothing: auto;
  29. }
  30. #front {
  31.     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
  32.     font-size: 20px;
  33.     text-align: center;
  34.     padding-bottom: 5px;
  35.     -webkit-font-smoothing: auto;
  36. }
  37. .win .card { color:  var(--light9); background-color: var(--dark3);}
  38. .mobile .card { color:  var(--light9); background-color:  var(--dark3);}
  39.  
  40. #interval {
  41.     float:right
  42. }
  43.  
  44. #tags {
  45.     font-family: arial;
  46.     text-align: left;
  47.     color: var(--light5);
  48.     font-size: 16px;
  49.     padding: 0px;
  50.    
  51. }
  52. .tag {
  53.     background-color:var(--dark4);
  54.     border-radius: 4px;
  55.     padding: 3px 5px;
  56. }
  57.  
  58.  
  59.  
  60. #answer {
  61.     border: 0;
  62.     height: 1px;
  63.     background: #444;
  64.     background-image: -o-linear-gradient(left, #444, #999, #444);
  65.     background-image: -ms-linear-gradient(left, #444, #999, #444);
  66.     background-image: -moz-linear-gradient(left, #444, #999, #444);
  67.     background-image: -webkit-linear-gradient(left, #444, #999, #444);
  68. }
  69.  
  70. hr {
  71.     border: 0;
  72.     height: 1px;
  73.     background: #444;
  74. }
  75.  
  76. .extra {
  77.     border-radius: 3px;
  78.     font-size: 85%;
  79.     text-align: left;
  80.     padding: 10px 16px 10px 16px;
  81.     color: var(--light7);
  82.     background-color: var(--dark4);
  83. }
  84.  
  85. .cloze {
  86.   //font-weight: bold;
  87.     font-weight: 600;
  88.     color: var(--limeDuolingo);
  89. }