/******************************************************************************
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 {
  --avatar-max-width: 200px;
  --color-bg: #FFFFFF;
  --color-text-main: rgb(52,70,145);
  --color-primary: rgb(52,70,145);
  --color-secondary: rgb(52,70,145, 0.7);
  --color-bg-link: rgb(52,70,145, 0.2);
  --theme-color-title: rgb(52,70,145, 0.9);
  --font-family: "HK Grotesk";
  --font-family-header: "HK Grotesk";
  --font-family-list: Menlo, Consolas, Monaco, "Lucida Console", monospace;
}

ul.link-list li a {
  border-radius: 3px;
}

ul.link-list li a:link,
ul.link-list li a:visited {
  border: 2px solid var(--color-primary);
  justify-content: space-around;
}

ul.link-list li a:hover, ul.link-list li a:focus {
  border: 2px solid var(--theme-color-title);
  background: var(--color-bg-link);
}

ul.link-list li a img {
  display: none;
}

.social-profile-icon path {
  fill: var(--color-primary);
}
.social-profile-icon:hover path, .social-profile-icon:focus path {
  fill: var(--color-secondary);
}


h1 {
  color: var(--theme-color-title);
}

/* Link styles */
a:not(.btn--remix):link,
a:not(.btn--remix):visited {
  text-decoration: none;
  border-bottom: none;
}
a:hover, a:active, a:focus {
  background: none;
}

.avatar {
  border-radius: 0%;
  width: 100%;
  height: auto;
}