/*
Components StyleSheet

This acts as a base, and root for all pages.
extra parts or designs will be added via new .css files.

*/

/* Variables */
:root {
  --bg: rgb(2, 2, 2);
  --code-bg: rgb(10,10,10);
  --surface: rgb(15, 15, 15);
  --border: rgba(255, 255, 255, 0.05);
  --border-mid: rgba(255, 255, 255, 0.1);

  --text-header: #f0f0f0;
  --text-section-header: #d4d4d4;
  --text-body: #a0a0a0;
  --text-meta: #686868;
  --text-decorative-ui: #484848;
  --text-background: #303030;

  --text-code-block: rgb(200, 45, 45);

  --font: 'Montserrat', sans-serif;
  --radius-xsm: 2px;
  --radius-sm: 4px;
  --radius-pill: 999px;
}

/* resetting default styles */

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: 
    radial-gradient(
      circle at 120% 60%,
      rgba(8, 8, 8, 0.2),
      transparent 85%
    ),
    linear-gradient(
      15deg,
      rgba(4, 4, 4),
      var(--bg) 45%
    );
  color: var(--text-section-header);
  font-family: var(--font);
}

img {
  display: block;
  max-width: 100%;
}

[hidden] {
  display: none !important;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

p {
  margin: 0;
}

h1, h2, h3 {
  margin: 0;
}

figure {
  margin: 0;
}

/* layout */

.container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0rem 2rem;
}