@import "../fonts/inter.css";
@import "https://fonts.googleapis.com/css?family=Lato:300,400,500,700&subset=latin,latin-ext";
@import "https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400&subset=latin,latin-ext";
@import "https://fonts.googleapis.com/css?family=Merriweather&subset=latin,latin-ext";
html {
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box; }

body {
  margin: 0 auto;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
  font-family: "Inter", "SF Pro Display", "Lato", "Source Sans Pro", "Merriweather", "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: subpixel-antialiased;
  background: var(--color-background);
  color: var(--color-text-normal);
  font-weight: var(--text-normal-weight);
}
:root {
  --color-background: #f2f4f7;
  --color-text-normal:#0e1b2e;
  --color-text-light: #8cabd9;
  --color-link-text-normal: rgba(37,100,223,1); /* blue */
  --color-link-text-hover: #f2f4f7;
  --color-link-background-normal: #f2f4f7; /* gray */
  --color-link-background-hover: rgba(37,100,223,1); /* blue */

  --text-normal-weight: 400;
}
@media (prefers-color-scheme: dark) {
  :root {
    --color-background: #0e1b2e;

    --color-text-normal: #e4e4e4;
    --color-text-normal: hsl(210, 10%, 82%);
    --color-text-light: #8cabd9;
    --color-text-light: hsl(210, 15%, 35%);

    --color-link-text-normal: #edc835; /* yellow */
    --color-link-text-hover: #0e1b2e;
    --color-link-background-normal: #0e1b2e; /* dark blue */
    --color-link-background-hover: #edc835; /* yellow */

    --text-normal-weight: 300;
  }
  img {
    filter: grayscale(30%);
    opacity: .75;
    transition: opacity .5s ease-in-out;
  }
  img:hover {
    opacity: 1;
  }
}
html.theme-dark {
    --color-background: #0e1b2e;

    --color-text-normal: #e4e4e4;
    --color-text-normal: hsl(210, 10%, 82%);
    --color-text-light: #8cabd9;
    --color-text-light: hsl(210, 15%, 35%);

    --color-link-text-normal: #edc835; /* yellow */
    --color-link-text-hover: #0e1b2e;
    --color-link-background-normal: #0e1b2e; /* dark blue */
    --color-link-background-hover: #edc835; /* yellow */

    --text-normal-weight: 300;
}

html.theme-dark .lamp-svg::after {
  border-bottom: 8px solid hsl(67, 76%, 90%);
  border-radius: 50%;
  box-shadow: 10px 10px 0 rgba(0,0,0,0.1);
  content: '';
  display: block;
  height: 8px;
  left: 6%;
  position: absolute;
  top: 220px;
  /* transform: translateX(-60%) scale(1) rotate(0); */
  transition: all .3s;
  width: 20%;
}
html.theme-dark .lamp-svg path.light-bulb-on {
fill: blanchedalmond;
}

body a, a:hover, a:active, a:visited{
  text-decoration: none;
  color: var(--color-link-text-normal);
  background: var(--color-link-background-normal);
  padding: 4px 3px;
}

body a.inline, a.inline:active, a.inline:visited{
  text-decoration: none;
  color: var(--color-link-text-normal);
  box-shadow: inset 0 -3px 0 var(--color-link-background-hover);
  transition: (ease-in 0.05s bottom-border);
}

body a.inline:hover {
  text-decoration: none;
  color: var(--color-link-text-hover);
  box-shadow: inset 0 -6px 0 var(--color-link-background-hover);
  transition: (ease-in 0.05s bottom-border);
}

body a:hover{
  text-decoration: none;
  color: var(--color-link-text-hover);
  background: var(--color-link-background-hover);
}

.application-container {
    max-width: 1000px;
    margin: auto;
    padding: 0 1rem;
    box-sizing: border-box;
    min-height: 800px;
}
.application-container main.application-body {
  margin: auto;
  overflow: visible;
  position: relative;
  box-sizing: border-box;
  padding: 2rem 2rem;
  max-width: 1285px;
}

p{
  font-size:18px;
  line-height: 32px;
  padding: 0 0;
  margin: 0 0;
}

h1.page-header-subtle{
  color: var(--color-background);
}

div.grid-2-3{
  display: grid;
  grid-template-columns: 2fr 7fr;
  grid-template-rows: 1fr;
  grid-template-areas: "gridAvatarImage gridPageContent";
  grid-column-gap: 20px;
  grid-row-gap: 0px;
}

div.grid-2-3 > .inner-grid-2 { grid-area: gridAvatarImage; }
div.grid-2-3 > .inner-grid-2 a img { padding-right: 6px; }
div.grid-2-3 > .inner-grid-3 { grid-area: gridPageContent; padding: 0 1rem;}


ul{
  font-size:16px;
  line-height: 24px;
  list-style: none;
  padding: 0 0;
}
ul.inline{
  display: inline-flex;
}
ul > li {padding: 0 12px 12px 0;}

div.lamp-svg{
  position: absolute;
  bottom: 50; right: 20;
}

@media (max-width: 800px) {
  .application-container main.application-body {
    padding: 1rem 12px;
  }
  div.grid-2-3{
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: "gridAvatarImage"
                         "gridPageContent";
  }
  div.grid-2-3 > .inner-grid-3 {
    padding: 1rem 0;
  }
  div.grid-2-3 > .inner-grid-2 > img {
    width: 120px;
  }
  h1.page-header-subtle{
    font-size: 1.2em;
  }
  ul.inline{
    display: block;
  }
  .hidden-mobile{
    display: none;
  }
}