/******************************************************************************
TIP: Get started creating your own theme here

- Set values for the main site variables for properties like fonts and colors
- You can also add any style rules you like

- Make sure you have `custom-theme` in settings.json theme property
- (Update it if you changed the CSS file name)
******************************************************************************/

:root {
  --font-family: Arial, sans-serif;
  --font-family-header: Arial, sans-serif;
  --font-family-list: Arial, sans-serif;
  --color-bg: violet;
  --color-bg-alt: aqua;
  --color-text-main: yellow;
  --color-primary: blue;
}

/* Add your style rules! */

/******************************************************************************
TIP: Glitch theme displays list of links from settings.json links array

Edit / copy or create your own CSS file in public/styles/themes
Select your chosen CSS by adding the theme name (e.g. glitch) in settings.json
******************************************************************************/

/* Fonts */
@font-face {
  font-family: HK Grotesk;
  src: url("https://cdn.glitch.me/605e2a51-d45f-4d87-a285-9410ad350515%2FHKGrotesk-Regular.otf?v=1603136326027")
    format("opentype");
}
@font-face {
  font-family: HK Grotesk;
  font-weight: bold;
  src: url("https://cdn.glitch.me/605e2a51-d45f-4d87-a285-9410ad350515%2FHKGrotesk-Bold.otf?v=1603136323437")
    format("opentype");
}

:root {
  --color-bg: #b1a7ed; /*#fbf7ff;*/
  --color-bg-alt: #D7F5EF;
  --color-text-main: #2a2135;
  --color-primary: #b1a7ed;
  --theme-color-title: #b1a7ed;
  --font-family: "HK Grotesk";
  --font-family-header: "HK Grotesk";
  --font-family-list: Menlo, Consolas, Monaco, "Lucida Console", monospace;
}

p {
  color: var(--color-text-main);
}
body {
  background:linear-gradient(0deg, #9480FF,  #fbf2fd 85%);
}

ul.link-list li a {
  border-radius: 3px;
  background: rgba(193,202,242,0.3);
}
ul.link-list li a:link,
ul.link-list li a:visited {
  border: 4px solid var(--color-primary);
  justify-content: space-around;
}
ul.link-list li a:hover, ul.link-list li a:focus {
  border: 4px solid var(--theme-color-title);
  background: var(--color-primary);
}
ul.link-list li a img {
  display: none;
}

.social-profile-icon path {
  fill: var(--color-bg);
}
h1 {
  color: var(--theme-color-title);
  text-transform: uppercase;
}