/*
* Fork of Littlelink v1; Modified by Darren Nathanael
* 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
*/

/*! Modified by Darren Nathanael as part of Globalisation */

/* Global variables */
:root {
	/* Colors */
	--gray-0: #ffffff;
	--gray-50: #f3f4f7;
	--gray-100: #e3e6ee;
	--gray-200: #c3cadb;
	--gray-300: #a3acc8;
	--gray-400: #8490b5;
	--gray-500: #6474a2;
	--gray-600: #505d84;
	--gray-700: #3d4663;
	--gray-800: #283044;
	--gray-900: #141925;
	--gray-999-basis: 225, 31%, 5%;
	--gray-999: #090b11;

	--accent-light: #c561f6;
	--accent-regular: #7611a6;
	--accent-dark: #1c0056;
	--accent-overlay: hsla(280, 89%, 67%, 0.33);
	--accent-subtle-overlay: var(--accent-overlay);
	--accent-text-over: var(--gray-999);

	--link-color: var(--accent-regular);

	/* Gradients */
	--gradient-stop-1: var(--accent-light);
	--gradient-stop-2: var(--accent-regular);
	--gradient-stop-3: var(--accent-dark);
	--gradient-subtle: linear-gradient(150deg, var(--gray-900) 19%, var(--gray-999) 150%);
	--gradient-accent: linear-gradient(
		150deg,
		var(--gradient-stop-1),
		var(--gradient-stop-2),
		var(--gradient-stop-3)
	);
	--gradient-accent-orange: linear-gradient(
		150deg,
		#ca7879,
		var(--accent-regular),
		var(--accent-dark)
	);
	--gradient-stroke: linear-gradient(180deg, var(--gray-900), var(--gray-700));

	/* Shadows */
	--shadow-sm: 0px 6px 3px rgba(9, 11, 17, 0.01), 0px 4px 2px rgba(9, 11, 17, 0.01),
		0px 2px 2px rgba(9, 11, 17, 0.02), 0px 0px 1px rgba(9, 11, 17, 0.03);
	--shadow-md: 0px 28px 11px rgba(9, 11, 17, 0.01), 0px 16px 10px rgba(9, 11, 17, 0.03),
		0px 7px 7px rgba(9, 11, 17, 0.05), 0px 2px 4px rgba(9, 11, 17, 0.06);
	--shadow-lg: 0px 62px 25px rgba(9, 11, 17, 0.01), 0px 35px 21px rgba(9, 11, 17, 0.05),
		0px 16px 16px rgba(9, 11, 17, 0.1), 0px 4px 9px rgba(9, 11, 17, 0.12);

	/* Text Sizes */
	--text-sm: 0.875rem;
	--text-base: 1rem;
	--text-md: 1.125rem;
	--text-lg: 1.25rem;
	--text-xl: 1.625rem;
	--text-2xl: 2.125rem;
	--text-3xl: 2.625rem;
	--text-4xl: 3.5rem;
	--text-5xl: 4.5rem;

	/* Fonts */
	--font-system: "Gotham SSm A", "Gotham SSm B", -apple-system Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
	--font-body: 'Gotham SSm A', var(--font-system);
	--font-brand: Rubik, var(--font-system);

	/* Transitions */
	--theme-transition: 0.2s ease-in-out;
}


.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
–––––––––––––––––––––––––––––––––––––––––––––––––– */

html {
  font-size: 100%;
  color-scheme: dark;
}
body {
  font-size: 18px;
  line-height: 24px;
  font-weight: 400;
  font-family: "Gotham SSm A", "Gotham SSm B", -apple-system Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

}

/* 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: #4899F7;
}
a:hover {
  color: #7AB8FF;
}

/* 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: 100px;
  height: 100%;
  object-fit: cover;
  background-position: center;
}