/*
  The CSS in this style tag is based off of Bear Blog's default CSS.
  https://github.com/HermanMartinus/bearblog/blob/297026a877bc2ab2b3bdfbd6b9f7961c350917dd/templates/styles/blog/default.css
  License MIT: https://github.com/HermanMartinus/bearblog/blob/master/LICENSE.md
 */

:root {
  --accent: #2337ff;
  --accent-dark: #000d8a;
  --black: 15, 18, 25;
  --gray: 96, 115, 159;
  --gray-light: 229, 233, 240;
  --gray-dark: 34, 41, 57;
  --gray-gradient: rgba(var(--gray-light), 50%), #fff;
  --box-shadow:
    0 2px 6px rgba(var(--gray), 25%), 0 8px 24px rgba(var(--gray), 33%),
    0 16px 32px rgba(var(--gray), 33%);

  /*	TODO: Here we start our custom CSS Remove above later */
  --breakpoint-mobile: 767px;
  --breakpoint-tablet: 1200px;

  --color-text-primary: #ffffff;
  --color-text-secondary: rgba(255, 255, 255, 60%);
  --color-accent-primary: #c16b6b;
  --color-accent-secondary: #b46f8e;

  --gutter: 24px;

  --floating-intro-image-x: 150px;
  --floating-intro-image-start-x: 300px;
}

/* typography.css */

* {
  font-family: "proxima-nova", sans-serif;
}

a {
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
a,
p,
span {
  color: var(--color-text-primary);
}

h1 {
  font-weight: 700;
  font-size: 5.55rem; /* 100px ÷ 16 */
}

h2 {
  font-weight: 700;
  font-size: 3.125rem; /* 50px ÷ 16 */
}

h3 {
  font-weight: 600;
  font-size: 1.5625rem; /* 25px ÷ 16 */
}

h4 {
  font-weight: 900;
  font-size: 2.1875rem; /* 35px ÷ 16 */
}

h5 {
  font-weight: 700;
  font-size: 1.875rem; /* 30px ÷ 16 */
}

.header5 {
  font-weight: 700;
  font-size: 1.875rem; /* 30px ÷ 16 */
}

h6 {
  font-size: 1.125rem; /* 18px ÷ 16 */
  text-transform: uppercase;
  letter-spacing: 0.05rem;
  font-weight: normal;
  color: var(--color-text-primary);
}

p {
  font-weight: 400;
  font-size: 1.125rem; /* 18px ÷ 16 */
}

.gray {
  color: var(--color-text-secondary);
}

section {
  opacity: 0;
}

@media (max-width: 767px) {
  :root {
    --floating-intro-image-x: 0px;
    --floating-intro-image-start-x: 30px;
  }

  h1 {
    font-weight: 800;
    font-size: 2.5rem; /* 40px ÷ 16 */
    line-height: normal;
  }

  h2 {
    font-weight: 700;
    font-size: 1.875rem; /* 30px ÷ 16 */
    line-height: normal;
  }

  h3 {
    font-weight: 700;
    font-size: 1.375rem; /* 22px ÷ 16 */
    line-height: normal;
  }

  p {
    line-height: normal;
    font-size: 1rem; /* 16px ÷ 16 */
  }
}

/* TODO: Remove h1ve code later */
body {
  background-color: #111111;
}

html {
  scroll-behavior: smooth;
}

.container {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 96px));
  gap: var(--gutter);
  margin: 0 auto;
  width: 100%;
  max-width: 1224px;
  grid-column: 1 / 13;
  padding: 0 20px;
}

.container > * {
  grid-column: 1 / 13;
}

@media (max-width: 767px) {
  .container {
    grid-template-columns: repeat(6, 1fr);
    max-width: 100%;
    width: auto;
  }

  .container > * {
    grid-column: 1 / 7;
  }
}

@media (max-width: 767px) {
  .container-mobile {
    padding: 0 20px;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    max-width: 100%;
    width: auto;
  }

  .container-mobile > * {
    grid-column: 1 / 7;
  }
}

section.container {
  padding-right: 20px;
  padding-left: 20px;
}

div.container {
  padding-right: 0;
  padding-left: 0;
}

.main-page {
  overflow-x: hidden;
  position: relative;

  .intro-bg {
    background: radial-gradient(
      100% 100% at 0% 0%,
      rgba(226, 90, 146, 0.15) 0%,
      rgba(141, 162, 243, 0.063) 35.82%,
      rgba(23, 23, 23, 0) 100%
    );
  }
}
