/*
* littlelink V1
* https://littlelink.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 12/21/2019
*
* Built using:
*
* Skeleton V2.0.4
* Copyright 2014, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 12/29/2014
*/

/* Table of contents
––––––––––––––––––––––––––––––––––––––––––––––––––
- Grid
- Base Styles
- Typography
- Links
- Code
- Spacing
- Utilities
*
* You'll find the button css in css/brands.css.
*
*/

/* Grid
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.container {
  position: relative;
  width: 100%;
  max-width: 600px;
  text-align: center;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}
.container-left {
  position: relative;
  width: 100%;
  max-width: 600px;
  text-align: left;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}
.column {
  position: center;
  width: 100%;
  float: center;
  box-sizing: border-box;
}

/* For devices larger than 400px */
@media (min-width: 400px) {
  .container {
    width: 85%;
    padding: 0;
  }
}

/* For devices larger than 550px */
@media (min-width: 550px) {
  .container {
    width: 80%;
  }
  .column,
  .columns {
    margin-left: 0;
  }
  .column:first-child,
  .columns:first-child {
    margin-left: 0;
  }
}

/* Base Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* NOTE
html is set to 62.5% so that all the REM measurements throughout Skeleton
are based on 10px sizing. So basically 1.5rem = 15px :) */

html {
  font-size: 100%;
  color-scheme: light dark;
}
body {
  font-size: 18px;
  line-height: 24px;
  font-weight: 400;
  font-family: 'EBGaramond', serif;
}

/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */
h1 {
  margin-top: 0;
  margin-bottom: 16px;
  font-weight: 800;
}
h1 {
  font-size: 24px;
  line-height: 64px;
  letter-spacing: 0;
}

/* Larger than phablet */
@media (min-width: 550px) {
  h1 {
    font-size: 48px;
    line-height: 96px;
  }
}

p {
  margin-top: 0;
}

/* Links
–––––––––––––––––––––––––––––––––––––––––––––––––– */
a {
  color: #2457F5;
}
a:hover {
  color: #083BDA; 
}
a:focus {
  outline: #7AB8FF solid 2px;
  border-radius: 2px;
}         

/* Link Color Dark Theme */
@media (prefers-color-scheme: dark) {
  a {
    color: #4899F7;
}
a:hover {
  color: #7AB8FF;
}
a:focus {
  outline: #7AB8FF solid 2px;
  border-radius: 2px;
}
}

/* Code
–––––––––––––––––––––––––––––––––––––––––––––––––– */
code {
  padding: 0.2rem 0.5rem;
  margin: 0 0.2rem;
  font-size: 90%;
  white-space: nowrap;
  background: #f1f1f1;
  border: 1px solid #e1e1e1;
  border-radius: 4px;
}
pre > code {
  display: block;
  padding: 1rem 1.5rem;
  white-space: pre;
}

/* Spacing
–––––––––––––––––––––––––––––––––––––––––––––––––– */
button,
.button {
  margin-bottom: 1rem;
}
input,
textarea,
select,
fieldset {
  margin-bottom: 1.5rem;
}
pre,
blockquote,
dl,
figure,
p,
ol {
  margin-bottom: 2.5rem;
}

/* Utilities
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.u-full-width {
  width: 100%;
  box-sizing: border-box;
}
.u-max-full-width {
  max-width: 100%;
  box-sizing: border-box;
}
.u-pull-right {
  float: right;
}
.u-pull-left {
  float: left;
}

/* Misc
–––––––––––––––––––––––––––––––––––––––––––––––––– */
hr {
  margin-top: 3rem;
  margin-bottom: 3.5rem;
  border-width: 0;
  border-top: 1px solid #e1e1e1;
}
/* Radius values:

10%-40%: Squircles
50% (default): True circle
*/
.avatar {
  width: 130x;
  height: 130px;
  object-fit: contain;
  background-position: center;
  border-radius: 50%;
}

/* From the :root element you can easily change the colors of the design, its size and so on. */
:root {

  /* You can change the font family in the whole design here. (You need to add the font family to the codes.) */
  --font-family: 'EBGaramond', serif;

  /* You can change the font size here, is proportional to all texts. */
  --font-size: 16px;

  /* You can change the background color by typing the color code. */
  --background-color: #1e1f26;

  /* You can change the frame thickness and color of the picture by typing the number of pixels and the color code. */
  --image-border-color: #1f232e;
  --image-border-px: 3px;

  /* You can change the width and size of the picture by typing the number of pixels. */
  --image-width: 140px;
  --image-height: 140px;

  /* You can change the colors of the title and description section by typing the color codes. */
  --title-color: #fff;
  --description-color: #fff;

  /* You can change the colors of social media icons by changing the color code. */
  --svg-color: #fff;

  /* You can change the background, text color and active color of the menu by changing the color codes. */
  --menu-background-color: #1f232e;
  --menu-text-color: #fff;
  --menu-active-text-color: #03dac6;

  /* You can change the button's background, text color and active color by changing the color codes. */
  --button-background-color: #222840;
  --button-text-color: #fff;
  --button-text-hover-color: #03dac6;

  /* You can change the background, text color and active color of the text field by changing the color codes. */
  --textarea-background-color: #1f232e;
  --textarea-text-color: #fff;
  --textarea-link-text-color: #03dac6;

  /* You can change the background, text color and active color of the footer area by changing the color codes. */
  --footer-background-color: #1f232e;
  --footer-text-color: #fff;
  --footer-link-text-color: #03dac6;
}