@tailwind base;
@tailwind components;
@tailwind utilities;

@media (prefers-color-scheme: light) {
    :root {
        --a_color-bg-main: #E0DDCF; /* BEC5AD */
        --a_color-header-footer-text: #F1F0EA; /* A4B494 */
        --a_color-text-primary: #2D232E; /* 34252F */
        --a_color-header-footer: #474448; /* 3B5249 */
        --a_color-name-highlight: #b65e52; /* 8F4E45 */
        --a_color-header-footer-highlight: #D87D74; /* 8F4E45 */
    }
}
@media (prefers-color-scheme: dark) {
    :root {
        --a_color-bg-main: #1F1C21;
        --a_color-header-footer: #161418;
        --a_color-text-primary: #E6E2DC;
        --a_color-header-footer-text: #F1F0EA;
        --a_color-name-highlight: #C07A70;
        --a_color-header-footer-highlight: #D87D74; /* 8F4E45 */
    }
}
@media only screen and (max-width: 600px) {
    :root {
        --a_body-font-size: 1.1rem;
        --a_body-h1-font-size: 1.3rem;
        --a_body-h2-font-size: 1rem;
        --a_header-h1-font-size: 1.1rem;
        --a_header-h2-font-size: 1.1rem;
        --a_header-a-font-size: 1.05rem;
        --a_header-left-obj-display: none;
        --a_header-left-obj-width: 0;
        --a_header-center-obj-width: 50vw;
        --a_header-right-obj-width: 50vw;
        --a_footer-font-size: 1rem;
        --a_footer-a-font-size: 1rem;
        --a_welcome-text-min-width: 30ch;
        --a_welcome-text-max-width: 60ch;
        --a_welcome-text-spacer-width: 90%;
        --a_headshot-width: 70%;
        --a_welcome-block-flex-direction: column-reverse;
        --a_body-line-height: 1.45;
        --a_body-edge-padding: 1.5rem;
        --a_top-welcome-min-height: 50vh;
        --a_top-welcome-max-height: auto;
        --a_about-projects-edge-padding: 5rem;
        --a_about-projects-inner-padding: 3rem;
        --a_headshot-edge-padding: 0;
        --a_middle-welcome-min-height: 100vh;
        --a_middle-welcome-edge-padding: 5rem;
        --a_middle-welcome-inner-padding: 2.5rem;
        --a_footer-header-edge-padding: 1rem;
        --a_footer-header-a-top-padding: 0.4rem;
        --a_footer-header-a-side-padding: 0.7rem;
        --a_footer-top-padding: 2rem;
        --a_header-top-padding: 1rem;
        --a_footer-edge-padding: 3rem;
        --a_header-min-height: 20vh;
        --a_header-max-height: auto;
        --a_footer-min-height: 15vh;
        --a_footer-max-height: auto;
    }
}
@media only screen and (min-width: 600px) {
    :root {
        --a_body-font-size: 1.1rem;
        --a_body-h1-font-size: 1.3rem;
        --a_body-h2-font-size: 1rem;
        --a_header-h1-font-size: 1.1rem;
        --a_header-h2-font-size: 1.1rem;
        --a_header-a-font-size: 1.05rem;
        --a_header-left-obj-display: none;
        --a_header-left-obj-width: 0;
        --a_header-center-obj-width: 50vw;
        --a_header-right-obj-width: 50vw;
        --a_footer-font-size: 1rem;
        --a_footer-a-font-size: 1rem;
        --a_welcome-text-min-width: 45ch;
        --a_welcome-text-max-width: 75ch;
        --a_welcome-text-spacer-width: 90%;
        --a_headshot-width: 30%;
        --a_welcome-block-flex-direction: row;
        --a_body-line-height: 1.45;
        --a_body-edge-padding: 1.5rem;
        --a_top-welcome-min-height: 50vh;
        --a_top-welcome-max-height: auto;
        --a_about-projects-edge-padding: 5rem;
        --a_about-projects-inner-padding: 3rem;
        --a_headshot-edge-padding: 1.5rem;
        --a_middle-welcome-min-height: 100vh;
        --a_middle-welcome-edge-padding: 5rem;
        --a_middle-welcome-inner-padding: 2.5rem;
        --a_footer-header-edge-padding: 1rem;
        --a_footer-header-a-top-padding: 0.4rem;
        --a_footer-header-a-side-padding: 0.7rem;
        --a_footer-top-padding: 2rem;
        --a_header-top-padding: 1rem;
        --a_footer-edge-padding: 3rem;
        --a_header-min-height: 20vh;
        --a_header-max-height: auto;
        --a_footer-min-height: 15vh;
        --a_footer-max-height: auto;
    }
}
@media only screen and (min-width: 768px) {
    :root {
        --a_body-font-size: 1.1rem;
        --a_body-h1-font-size: 1.6rem;
        --a_body-h2-font-size: 1.2rem;
        --a_header-h1-font-size: 2.0rem;
        --a_header-h2-font-size: 1.5rem;
        --a_header-a-font-size: 1.05rem;
        --a_header-left-obj-display: none;
        --a_header-left-obj-width: 0;
        --a_header-center-obj-width: 50vw;
        --a_header-right-obj-width: 50vw;
        --a_footer-font-size: 1rem;
        --a_footer-a-font-size: 1rem;
        --a_welcome-text-min-width: 55ch;
        --a_welcome-text-max-width: 75ch;
        --a_welcome-text-spacer-width: 70%;
        --a_headshot-width: 30%;
        --a_welcome-block-flex-direction: row;
        --a_body-line-height: 1.45;
        --a_body-edge-padding: 1.5rem;
        --a_top-welcome-min-height: 50vh;
        --a_top-welcome-max-height: auto;
        --a_about-projects-edge-padding: 5rem;
        --a_about-projects-inner-padding: 3rem;
        --a_headshot-edge-padding: 1.5rem;
        --a_middle-welcome-min-height: 100vh;
        --a_middle-welcome-edge-padding: 5rem;
        --a_middle-welcome-inner-padding: 2.5rem;
        --a_footer-header-edge-padding: 1rem;
        --a_footer-header-a-top-padding: 0.4rem;
        --a_footer-header-a-side-padding: 0.7rem;
        --a_footer-top-padding: 2rem;
        --a_header-top-padding: 1rem;
        --a_footer-edge-padding: 3rem;
        --a_header-min-height: 20vh;
        --a_header-max-height: auto;
        --a_footer-min-height: 15vh;
        --a_footer-max-height: auto;
    }
}
@media only screen and (min-width: 1200px) {
    :root {
        --a_body-font-size: 1.3rem;
        --a_body-h1-font-size: 2.7rem;
        --a_body-h2-font-size: 2.3rem;
        --a_header-h1-font-size: 2.0rem;
        --a_header-h2-font-size: 1.5rem;
        --a_header-a-font-size: 1.3rem;
        --a_header-left-obj-display: flex;
        --a_header-left-obj-width: 33vw;
        --a_header-center-obj-width: 50vw;
        --a_header-right-obj-width: 33vw;
        --a_footer-font-size: 1.1rem;
        --a_footer-a-font-size: 1.2rem;
        --a_welcome-text-min-width: 65ch;
        --a_welcome-text-max-width: 75ch;
        --a_welcome-text-spacer-width: 70%;
        --a_headshot-width: 30%;
        --a_welcome-block-flex-direction: row;
        --a_body-line-height: 1.45;
        --a_body-edge-padding: 1.5rem;
        --a_top-welcome-min-height: 50vh;
        --a_top-welcome-max-height: auto;
        --a_about-projects-edge-padding: 5rem;
        --a_about-projects-inner-padding: 3rem;
        --a_middle-welcome-min-height: 100vh;
        --a_middle-welcome-edge-padding: 5rem;
        --a_middle-welcome-inner-padding: 2.5rem;
        --a_headshot-edge-padding: 2.5rem;
        --a_footer-header-edge-padding: 1rem;
        --a_footer-header-a-top-padding: 0.4rem;
        --a_footer-header-a-side-padding: 0.7rem;
        --a_footer-top-padding: 2rem;
        --a_header-top-padding: 1rem;
        --a_footer-edge-padding: 3rem;
        --a_header-min-height: 20vh;
        --a_header-max-height: auto;
        --a_footer-min-height: 15vh;
        --a_footer-max-height: auto;
    }
}

html, .a_body {
    min-height: 100vh;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background-color: var(--a_color-bg-main);
}

.a_body {
    font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', 'sans-serif';
    line-height: var(--a_body-line-height);
    font-size: var(--a_body-font-size);
}

.a_body h1, .a_body h2, .a_body h3, .a_body p {
    color: var(--a_color-text-primary);
}
.a_body h1 {
    font-size: var(--a_body-h1-font-size);
}
.a_body h2 {
    font-size: var(--a_body-h2-font-size);
}
.a_footer h1, .a_footer h2, .a_footer h3, .a_footer p {
    color: var(--a_color-header-footer-text);
}
.a_header h1, .a_header h2, .a_header h3, .a_header p {
    color: var(--a_color-header-footer-text);
}

.a_body h1, h2, p {
    padding-left: var(--a_body-edge-padding);
    padding-right: var(--a_body-edge-padding);
}

a:link, a:visited, a:active {
    color: inherit;
    text-decoration: none;
}

.a_container-main {
    min-height: 75vh;
    height: auto;
}

.a_header_nav, .a_footer_nav {
    background-color: var(--a_color-header-footer);
}

.a_header_nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: var(--a_header-min-height);
    max-height: var(--a_header-max-height);
}
.a_footer_nav {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    background-color: var(--a_color-header-footer);
    min-height: var(--a_footer-min-height);
    max-height: var(--a_footer-max-height);
}
.a_footer_nav p {
    margin: 0;
}
.a_footer-left-obj, .a_footer-right-obj {
    height: 100%;
    width: 50vw;
}
.a_footer-left-obj {
    color: inherit;
    display: flex;
    flex-direction: column;
    align-items: start;
    padding-left: var(--a_footer-header-edge-padding);
}
.a_footer-right-obj {
    display: flex;
    flex-direction: column;
    align-items: end;
    padding-right: var(--a_footer-edge-padding);
}

.a_left-obj, .a_right-obj, .a_center-obj {
    height: 100%;
    width: 33vw;
}
.a_left-obj {
    height: auto;
    width: var(--a_header-left-obj-width);
    color: inherit;
    display: var(--a_header-left-obj-display);
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.a_left-obj svg {
    fill: currentColor;
    height: 20vh;
    max-height: 20vh;
}
.a_center-obj {
    align-items: center;
    text-align: center;
    width: var(--a_header-center-obj-width);
}
.a_right-obj {
    align-items: end;
    text-align: center;
    font-size: var(--a_header-a-font-size);
    padding-top: var(--a_header-top-padding);
    width: var(--a_header-right-obj-width);
}

.a_name-highlight {
    color: var(--a_color-name-highlight);
    letter-spacing: 0.03em;
    font-weight: bold;
}

.a_welcome-block {
    display: flex;
    flex-direction: var(--a_welcome-block-flex-direction);
    align-items: center;
}
.a_welcome-text {
    width: var(--a_welcome-text-spacer-width);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.a_welcome-text-spacer {
    text-align: justify;
    min-width: var(--a_welcome-text-min-width);
    max-width: var(--a_welcome-text-max-width);
}

.a_headshot-div {
    width: var(--a_headshot-width);
    min-height: var(--a_top-welcome-min-height);
    max-height: var(--a_top-welcome-max-height);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-right: var(--a_headshot-edge-padding);
}

.a_header {
    color: var(--a_color-header-footer-text);
    text-align: center;
    min-height: var(--a_header-min-height);
    max-height: var(--a_header-max-height);
    vertical-align: center;
    background-color: var(--a_color-header-footer);
}
.a_header ul{
    margin: 0;
    padding: 0;
    list-style: none;
}
.a_header li{
    display: inline-block;
}
.a_header a{
    display: block;
    padding: var(--a_footer-header-a-top-padding) var(--a_footer-header-a-side-padding);
    font-size: var(--a_header-a-font-size);
    text-decoration: none;
}
.a_header a:hover{
    color: var(--a_color-header-footer-highlight);
}
.a_footer {
    background-color: var(--a_color-header-footer);
    color: var(--a_color-header-footer-text);
    text-align: center;
    font-size: var(--a_footer-font-size);
    min-height: var(--a_footer-min-height);
    max-height: var(--a_footer-max-height);
}
.a_footer ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.a_footer li {
    display: inline-block;
}
.a_footer a {
    display: block;
    padding: var(--a_footer-header-a-top-padding) var(--a_footer-header-a-side-padding);
    font-size: var(--a_footer-a-font-size);
    text-decoration: none;
}
.a_footer a:hover {
    color: var(--a_color-header-footer-highlight);
}