/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* end of css reset */

:root,
[data-selected-theme="cat"] {
    --bg: #1e1e2e;
    --bg-dark: #181825;
    --bg-darker: #11111b;
    --fg: #9399b2;
    --mid: #585b70;
    --mid-dark: #45475a;
    --mid-darker: #313244;
    --text: #cdd6f4;
    --pink: #f5c2e7;
    --blue: #89b4fa;
    --lavender: #b4befe;
}

[data-selected-theme="rose"] {
    --bg: #393552;
    --bg-dark: #2a273f;
    --bg-darker: #232136;
    --fg: #908caa;
    --text: #e0def4;
    --pink: #ea9a97;
    --blue: #9ccfd8;
    --lavender: #c4a7e7;
}


[data-selected-theme="nord"]{
    --bg: #2e3440;
    --bg-dark: #3b4252;
    --bg-darker: #2e3440;
    --fg: #d8dee9;
    --text: #d8dee9;
    --pink: #ebcb8b;
    --blue: #88c0d0;
    --lavender: #b48ead;
}

[data-selected-theme="gruv"]{
    --bg:  #32302f;
    --bg-dark: #282828;
    --bg-darker: #1d2021; 
    --fg:  #ebdbb2;
    --text:   #fbf1c7;
    --pink:  #d3869b;
    --blue: #83a598;
    --lavender: #8f3f71;
}

body {
    background-color: var(--bg);
    font-family: "Real Text Pro"
}

main, aside {
    max-width: 80%;
    margin: 0 auto;
}

h1, h2, h3, h4, h5 {
    font-family: 'Alfarn';
}

p {
    color: var(--text);
    font-family: 'Real Text Pro';
    padding: .75rem;
    line-height: 1.5em;
}

.links li {
    display: inline-block;
    padding: 3px;
    font-size: 1.3em;
    font-family: 'Real Text Pro';
}

.links a {
    color: var(--blue);
    text-decoration: none;
    background: none;
}


a {
    color: var(--pink);
    padding-bottom: 5px;
    background: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3C!--%20Generator%3A%20Adobe%20Illustrator%2021.1.0%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%206.00%20Build%200)%20%20--%3E%0A%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1_1_%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0A%09%20viewBox%3D%220%200%2019.3%206%22%20style%3D%22enable-background%3Anew%200%200%2019.3%206%3B%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cstyle%20type%3D%22text%2Fcss%22%3E%0A%09.st0%7Bfill%3Apink%3B%7D%0A%3C%2Fstyle%3E%0A%3Cpath%20class%3D%22st0%22%20d%3D%22M-5.5%2C3.8C-4.2%2C4.8-2.8%2C6%2C0%2C6s4.2-1.2%2C5.5-2.2C6.6%2C2.8%2C7.6%2C2%2C9.7%2C2s3%2C0.8%2C4.2%2C1.8c1.3%2C1%2C2.7%2C2.2%2C5.5%2C2.2%0A%09s4.2-1.2%2C5.5-2.2l-1.4-0.9c-1.1%2C1-2.1%2C1.8-4.2%2C1.8s-3-0.8-4.2-1.8c-1.2-1-2.7-2.2-5.4-2.2c-2.8%2C0-4.2%2C1.2-5.5%2C2.2%0A%09C3%2C3.9%2C2.1%2C4.7%2C0%2C4.7s-3-0.8-4.2-1.8L-5.5%2C3.8z%22%2F%3E%0A%3C%2Fsvg%3E%0A");
    background-repeat: repeat;
    background-position-x: 0%;
    background-position-y: 0%;
    background-size: auto auto;
    background-repeat: repeat-x;
    background-size: 15px 5px; 
    background-position: 2px 19px;
    animation: move 15s linear infinite;
    -webkit-animation: move 15s linear infinite;
    animation-play-state: paused;
    text-decoration: none;
    background-color: transparent;
    -webkit-text-decoration-skip: objects;
  }


a:hover {
    color: var(--blue);
    animation-play-state: running;
}


@-webkit-keyframes move {
    from {
        background-position: 2px 19px;
      }
      to {
        background-position: 500px 19px;
      }
    }
    
    @keyframes move {
    from {
        background-position: 2px 19px;
      }
      to {
        background-position: 500px 19px;
      }
    }



h1 {
    margin-top: .6rem;
    color: var(--pink);
    font-size: 3.5rem;
    margin-bottom: .6rem;
}

.header {
    text-align: center;
    width: 100vw;
    margin-bottom: 3%;
}

.header hr {
    color: var(--blue);
}


@media screen and (max-width: 250px) {
  main, aside {
        max-width: 100%;
    }

    h1 {
        font-size: 1.20em;
    }
    
    .links li{
        font-size: .8em;
        display: block;
        line-height: 1.8em;
    }
}