/*
  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;
}

/* 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: 6.25rem; /* 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 */
}

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);
}

@media (max-width: 767px) {
    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 above 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%
        );
    }
}