/*
* LittleLink - Pure Flattened Dark Mode
*/

/* Base Typography Settings */
:root {
  font-size:16px;           /* Base size - 16px browser default */
  --scale-0:1rem;           /* 16px */
  --scale-1:1.25rem;        /* 20px */
  --scale-2:1.563rem;       /* 25px */
  --scale-3:1.953rem;       /* 31px */
  --scale-4:2.441rem;       /* 39px */
  --scale-5:3.052rem;       /* 49px */

  /* Spacing units */
  --spacing-xs:0.5rem;      /* 8px */
  --spacing-s:1rem;         /* 16px */
  --spacing-m:1.5rem;       /* 24px */
  --spacing-l:2rem;         /* 32px */
  --spacing-xl:3rem;        /* 48px */
  --spacing-xxl:4rem;       /* 64px */

  color-scheme: dark;       /* Dark mode applied globally */
}

/* Base Styles */
body {
  margin:0;
  padding:0;
  background-color:#121212;
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,0.5), rgba(0,0,0,0.2)),
    url('../images/bg-bottom.png'),
    linear-gradient(to bottom, rgba(255,0,0,0.1), rgba(255,0,0,0.2)),
    url('../images/bg-sky.gif'),
    linear-gradient(to bottom, rgba(90,34,139,0.2), rgba(102,46,143,1)),
    url('../images/bg-stars.gif');
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat;
  background-attachment: local, local, local, fixed, local, fixed;
  background-size:100%, 100%, 100%, auto, 100%, auto;
  background-position:bottom, bottom, bottom, top right, bottom, top;
  color:#ffffff;
  font-family:"Open Sans",system-ui;
  font-size:var(--scale-1); /* 20px */
  font-weight:400;
  line-height:1.6;
}
@media (max-width: 1600px) {
	body {
	background-size:100%, 1600px, 100%, auto, 100%, auto;
}
}
/* Typography */
h1 {
  margin:0 0 var(--spacing-m) 0;
  font-size:var(--scale-5); /* ~49px */
  font-weight:800;
  line-height:1.1;
  letter-spacing:-0.02em;
  word-wrap:break-word;
  overflow-wrap:break-word;
  hyphens:auto;
}

.container p {
  margin:0 0 var(--spacing-xl) 0;
  font-size:var(--scale-1);
  line-height:1.6;
}

/* Grid */
.container {
  position:relative;
  width:100%;
  max-width:37.5rem;      /* 600px */
  padding:var(--spacing-xl) var(--spacing-m) 0 var(--spacing-m);
  margin:0 auto;
  text-align:center;
  box-sizing:border-box;
}
.container-left {
  position:relative;
  width:100%;
  max-width:37.5rem;
  text-align:left;
  margin:0 auto;
  padding:0 1.25rem;
  box-sizing:border-box;
}

.column,
.columns {
  position:center;
  width:100%;
  float:center;
  box-sizing:border-box;
  margin-left:0;
}
.column:first-child,
.columns:first-child {
  margin-left:0;
}

/* Avatar */
.avatar {
  width: 8rem;
  height: 8rem;
  border-radius: 50%;
  object-fit: cover;
  background-position: center;
  margin-bottom: var(--spacing-l);
  margin-left: auto;
  margin-right: auto;
  display: block;
}

/* Avatar Modifiers */
.avatar--none { border-radius: 0%; }
.avatar--rounded { border-radius: 50%; }
.avatar--soft { border-radius: 0.5rem; }

/* Footer */
footer {
  margin:var(--spacing-xxl) 0;
  font-size:var(--scale-0);
}

/* Links */
a:not(.button) {
  color:#4899F7;
}
a:not(.button):hover {
  color:#7AB8FF;
}

/* Buttons */
.button,
button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  position:relative;
  width:18.75rem; /* 300px */
  min-height:3rem;
  padding:0.75rem 1rem 0.75rem 2rem;
  font-size:1.125rem;
  font-weight:700;
  text-decoration:none;
  white-space:normal;
  background-color:var(--button-background,transparent);
  color:var(--button-text,#000000);
  border:var(--button-border,none);
  border-radius:0.5rem;
  cursor:pointer;
  box-sizing:border-box;
  hyphens:auto;
  margin-bottom:1rem;
  text-align:center;
  line-height:1.3;
}
.button:hover,
button:hover {
  color:var(--button-text);
}

/* Icons */
.icon {
  position:absolute;
  left:1rem;
  top:50%;
  transform:translateY(-50%);
  width:1.25rem;
  height:1.25rem;
}

/* Responsive Typography & Layout */
@media (min-width:25rem) { /* 400px */
  .container {
    width:85%;
    padding-left:0;
    padding-right:0;
  }
}

@media (min-width:34.375rem) { /* 550px */
  .container { width:80%; }
}

@media (max-width:34.375rem) { /* 550px */
  h1 { font-size:2rem; }       /* 32px */
  body { font-size:1rem; }     /* 16px */
  .container p { font-size:var(--scale-0); }
  .avatar { margin-bottom:var(--spacing-m); }
  footer { margin:var(--spacing-xl) 0; }
}

/* Focus outline */
:focus-visible {
  outline: 2px solid #4899F7;
  outline-offset: 2px;
}

/* Privacy Page Styles */
nav { margin:var(--spacing-l) 0; text-align:left; }
section { margin:var(--spacing-xl) 0; text-align:left; }
h2 { font-size:var(--scale-3); font-weight:700; margin-bottom:var(--spacing-m); }
h3 { font-size:var(--scale-2); font-weight:600; margin:var(--spacing-l) 0 var(--spacing-s) 0; }
ul { list-style:none; padding:0; margin:0 0 var(--spacing-m) 0; }
ul li { margin-bottom:var(--spacing-xs); }

@media (max-width:34.375rem) {
  h2 { font-size:var(--scale-2); }
  h3 { font-size:var(--scale-1); }
  section { margin:var(--spacing-l) 0; }
}

/* Bottom Picture & White Line */
.bottom-pic {
  width: calc(0.4857143 * 100vw + 411.4286px);
  max-width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  height: auto;
}
.white-line {
  --gap: clamp(20px, calc(20px + (100vw - 800px) * (20 / 1120)), 40px);
  width:90vw;
  height:1px;
  background:repeating-linear-gradient(to right, #fff 0 20px, transparent 20px calc(20px + var(--gap)));
  position: relative;
  left:50%;
  transform:translateX(-50%);
  margin:4rem 0;
  -webkit-mask-image:linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%);
  mask-image:linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%);
}

/* Font Faces */
@font-face { font-display:swap; font-family:'Open Sans'; font-style:normal; font-weight:400; src:url('../fonts/open-sans-v34-regular.eot'); src:url('../fonts/open-sans-v34-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/open-sans-v34-regular.woff2') format('woff2'), url('../fonts/open-sans-v34-regular.woff') format('woff'), url('../fonts/open-sans-v34-regular.ttf') format('truetype'), url('../fonts/open-sans-v34-regular.svg#OpenSans') format('svg'); }
@font-face { font-display:swap; font-family:'Open Sans'; font-style:normal; font-weight:600; src:url('../fonts/open-sans-v34-600.eot'); src:url('../fonts/open-sans-v34-600.eot?#iefix') format('embedded-opentype'), url('../fonts/open-sans-v34-600.woff2') format('woff2'), url('../fonts/open-sans-v34-600.woff') format('woff'), url('../fonts/open-sans-v34-600.ttf') format('truetype'), url('../fonts/open-sans-v34-600.svg#OpenSans') format('svg'); }
@font-face { font-display:swap; font-family:'Open Sans'; font-style:normal; font-weight:700; src:url('../fonts/open-sans-v34-700.eot'); src:url('../fonts/open-sans-v34-700.eot?#iefix') format('embedded-opentype'), url('../fonts/open-sans-v34-700.woff2') format('woff2'), url('../fonts/open-sans-v34-700.woff') format('woff'), url('../fonts/open-sans-v34-700.ttf') format('truetype'), url('../fonts/open-sans-v34-700.svg#OpenSans') format('svg'); }
@font-face { font-display:swap; font-family:'Open Sans'; font-style:normal; font-weight:800; src:url('../fonts/open-sans-v34-800.eot'); src:url('../fonts/open-sans-v34-800.eot?#iefix') format('embedded-opentype'), url('../fonts/open-sans-v34-800.woff2') format('woff2'), url('../fonts/open-sans-v34-800.woff') format('woff'), url('../fonts/open-sans-v34-800.ttf') format('truetype'), url('../fonts/open-sans-v34-800.svg#OpenSans') format('svg'); }