@import "reset.css";
@import "components/header.css";
@import "components/about.css";
@import "components/journey.css";
@import "components/projects.css";
@import "components/contact.css";
@import "components/mobile-intro.css";
@import "themes/theme-light.css";
@import "themes/theme-dark.css";


@import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,100..900&family=JetBrains+Mono:ital,wght@0,600;1,600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Kalam&display=swap');

:root {
    --background-color-dark-theme: #1b1b1b;
    --header-background-color-dark-theme: #141414;
    --header-primary-text-dark-theme: #dddddd;
    --primary-text-color-dark-theme: #dddddd;
    --primary-text-color-rgb-dark-theme: 221, 221, 221;
    --primary-color-dark-theme: #54DEFD;
    --secondary-color-dark-theme: #EC4699;
    --success-color-dark-theme: #56E39F;
    --warning-color-dark-theme: #FFC31F;
    --warning-color-rgb-dark-theme: 255, 195, 31;
    --danger-color-dark-theme: #E84855;
    --danger-color-rgb-dark-theme: 234, 99, 140;


    --background-color: #F6F7EB;
    --header-background-color: #1b1b1b;
    --header-primary-text: #FFFFFF;
    --primary-text-color: #232323;
    --primary-text-color-rgb: 35, 35, 35;
    --primary-color: #067BC2;
    --secondary-color: #7835C0;
    --success-color: #00A878;
    --warning-color: #FFCA3A;
    --danger-color: #E21266;
    --danger-color-rgb: 226, 18, 102;


    --regular-font-size: 1.7rem;
    --regular-line-height: 2.6rem;
}

html {
    box-sizing: border-box;
    font-size: 62.5%;
    scroll-behavior: smooth;
}

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

img, iframe {
    width: 100%;
}

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

body, body.dark, body *, body.dark * {
    transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out;
}

body {
    /* sizing */
    min-height: 100vh;

    /* font */
    font-size: var(--regular-font-size);
    line-height: var(--regular-line-height);
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;

    position: relative;
}

main, header {
    padding: 0 4vw;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    font-style: normal;
    font-family: "JetBrains Mono", monospace;
    font-optical-sizing: auto;
}

h3 {
    font-size: calc(var(--regular-font-size) * 1.1);
    border-bottom: 1px solid;
    padding: 0.3rem 0.3rem;
    margin-bottom: 1rem;
    display: inline-block;
}

p {
    margin-bottom: 2rem;
}

br {
    margin-bottom: 0.8rem;
}


/** ARTICLES ***/
article {
    scroll-margin-top: 7rem;
    padding-bottom: 6rem;
}

article:not(:first-of-type) {
    margin-top: 7rem;
}

article:last-of-type {
    margin-bottom: 3rem;
}

.wip{
    font-style: italic;
    font-size: calc(var(--regular-font-size)*0.9);
    font-weight: 300;
    opacity: 0.8;
}


@media screen and (min-width: 1200px) {
    body {
        display: flex;
        justify-content: space-between;
        max-width: 1280px;
        margin: 0 auto;
    }

    main {
        width: 60%;
        padding: 0;
    }

    main section article:first-of-type {
        padding-top: 8rem;
    }
}