/** IMPORTS */
/* Custom Properties */
@import url("./variables.css");

/* Layouts */
@import url("./layouts/about-sections.css");
@import url("./layouts/contact-section.css");
@import url("./layouts/footer.css");

/* Components */
@import url("../components/avatar/avatar.css");
@import url("../components/work-card/work-card.css");
@import url("../components/service-card/service-card.css");

/** RESET STYLES */
*::after,
*::before,
* {
    margin: 0;
    padding: 0;
    font-size: 16px;
    font-weight: 400;
    font-family: var(--font-family);
    box-sizing: border-box;
}

/** GENERAL STYLES */
body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: var(--dodger-blue-950);
    background-image: linear-gradient(var(--dodger-blue-900), var(--dodger-blue-950));
    background-attachment: fixed;
}

.container {
    width: 100%;
    padding-top: 2rem;
    max-width: 60rem;
    display: grid;
    grid-template-columns: repeat(12, 1fr);

    & section {
        grid-column-start: 1;
        grid-column-end: -1;
        margin-bottom: 2rem;
    }
    
    & img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    & h1,
    h2 {
        margin: 24px 0 16px 0;
        color: var(--dodger-blue-400);
    }

    & h1 {
        font-size: var(--main-title-size);
        font-weight: var(--main-title-weight);
    }

    & h2 {
        font-size: var(--section-title-size);
        font-weight: var(--section-title-weight);
    }

    & h3 {
        font-size: var(--subsection-title-size);
        font-weight: var(--subsection-title-weight);
        color: var(--dodger-blue-400);
    }

    & h4 {
        color: var(--dodger-blue-400);
        font-weight: var(--subsection-title-weight);
    }

    & p {
        font-size: var(--standard-size);
        font-weight: var(--standard-weight);
        line-height: 1.5;
        color: var(--dodger-blue-50);
    }

    & button {
        font-size: var(--misc-size);
        font-weight: var(--misc-weight);
    }
}