static/styles.css

   1 :root {
   2     /* COLORS */
   3     --rosewater: #f5e0dc;
   4     --flamingo: #f2cdcd;
   5     --pink: #f5c2e7;
   6     --mauve: #cba6f7;
   7     --red: #f38ba8;
   8     --maroon: #eba0ac;
   9     --peach: #fab387;
  10     --yellow: #f9e2af;
  11     --green: #a6e3a1;
  12     --teal: #94e2d5;
  13     --sky: #89dceb;
  14     --sapphire: #74c7ec;
  15     --blue: #89b4fa;
  16     --lavender: #b4befe;
  17     --text: #cdd6f4;
  18     --subtext-1: #bac2de;
  19     --subtext-0: #a6adc8;
  20     --overlay-2: #9399b2;
  21     --overlay-1: #7f849c;
  22     --overlay-0: #6c7086;
  23     --surface-2: #585b70;
  24     --surface-1: #45475a;
  25     --surface-0: #313244;
  26     --base: #1e1e2e;
  27     --mantle: #181825;
  28     --crust: #11111b;
  29 }
  30
  31 /* Style Reset */
  32 html, main, body, ul, h1, h2, p {
  33     padding: 0;
  34     margin: 0;
  35 }
  36
  37 html {
  38     background-color: var(--base);
  39     display: flex;
  40     height: 100%;
  41 }
  42
  43 body {
  44     margin: 2%;
  45     width: 100%;
  46 }
  47
  48 #main-cont {
  49     display: flex;
  50     flex-direction: column;
  51     align-items: start;
  52 }
  53
  54 #top-nav {
  55     margin-bottom: 1%;
  56     align-self: center;
  57     width: 30%;
  58 }
  59
  60 #top-nav ul {
  61     list-style-type: none;
  62     display: flex;
  63     flex-flow: row wrap;
  64     justify-content: space-between;
  65 }
  66
  67 h1 {
  68     color: var(--green);
  69 }
  70
  71 a {
  72     font-size: 1.25rem;
  73 }
  74
  75 a:link {
  76     color: var(--blue);
  77 }
  78
  79 a:visited {
  80     color: var(--blue);
  81 }
  82
  83 a:hover {
  84     color: var(--peach);
  85     text-decoration: none;
  86 }