/* MAIN STYLES */
:root {
    /* Base colors */
    --color-black: #000000;
    --color-very-almost-black: #0d0d0d;
    --color-almost-black: #161616;
    --color-dark-gray: #161e1e;
    --color-mid-dark-gray: #2d2d2d;
    --color-mid-gray: #4a4a4a;
    --color-mid-mid-gray: #757575;
    --color-mid-light-gray: #9f9f9f;
    --color-light-gray: #f0f0f0;
    --color-white: #ffffff;

    --color-text: var(--color-white);
    --color-background: var(--color-almost-black);
    --color-nav-hover: var(--color-mid-light-gray);
    --color-nav-background: var(--color-black);
    --color-footer-background: var(--color-black);
    --color-hr: var(--color-mid-gray);
    --color-tile-background: var(--color-very-almost-black);

    --font-size-xl: 30px;
    --font-size-large: 24px;
    --font-size-medium: 20px;
    --font-size-medium-small: 18px;
    --font-size-small: 16px;

    --max-width: 1600px;

    --aspect-ratio: 0.5;
}

/* Light mode colors */
[data-theme="light"] {
    --color-text: var(--color-almost-black);
    --color-background: var(--color-white);
    --color-nav-hover: var(--color-mid-mid-gray);
    --color-nav-background: var(--color-white);
    --color-footer-background: var(--color-light-gray);
    --color-hr: var(--color-light-gray);
    --color-tile-background: var(--color-mid-light-gray);
}

/* Desktop Large - 1600px and up */
@media (min-width: 1600px) {
    :root {
        --header-height: 80px;
        --carousel-title-height: 71px;
        --carousel-spacing: 35px;
        --slide-aspect-ratio: 16 / 9;
        --home-text-margin: 60px;
        --home-text-width: 82%;
        --home-text-line-height: 42px;
        --project-wrapper-margin: 50px;
        --project-h1-margin: 24px 0 9px 0;
        --project-into-text: 100px;
        --project-content-text-margin: 60px;
        --project-infomation-flex-direction: row;
        --project-info-wrapper-margins: 108px 0 30px 0;
        --next-projects-span-margin: 16px 0 0 0;
        --wrapper-top-margin: 110px;
        --footer-height: 67px;
        --margin-width: 60px;
        --profile-top-margin: 24px;
        --info-point-links-margin: 25px;
        --sub-list-margin: var(--profile-top-margin) 0 30px 0;
        --profile-contact-bottom-pad: 60px;
        --last-section-margin: 170px;

        --tile-aspect-ratio: 1.5;

        --grid-2-col: 2;
        --grid-3-col: 3;
        --grid-4-col: 4;
        --grid-y-gap: 36px;
        --grid-y-gap-projcts: 20px;
        --grid-y-gap-projcts-next-projects: 20px;
        --grid-y-gap-work: 56px;
        --grid-x-gap: 20px;
        --grid-2-col-top-margin: 85px;

        --project-next-inner-padding: 0 0 147px 0;
        --project-infomation-max-width: 49%;
        --project-infomation-h2-margin: 26px 0 10px 0;
        --project-information-section-padding: 50px;
        --project-sub-col-margin: 6px;

        --show-for-desktop: block;
        --show-for-mobile: none;
        --hide-for-medium-down: block;
        --desktop-only-border:  1px solid;

        --stack-for-mobile: row;

        --column-width-one-third: 1;
        --column-width-two-third: 2;
        --column-width-half: 1;

        --font-size-home: var(--font-size-xl);
        --font-size-tile: var(--font-size-small);
        --font-size-project-large: var(--font-size-large);
        --font-size-project-medium: var(--font-size-medium);
        --project-intro-line-height: 29px;
        --font-size-project-small: var(--font-size-small);
        --h1-font-size: var(--font-size-medium);
        --h1-margin: 24px;
        --p-margin: 24px;
        --main-font-size: var(--font-size-medium);
    }
}

@media (min-width: 1720px) {
    :root {
        --margin-width: auto;
    }
}

/* Desktop - 1024px to 1439px */
@media (min-width: 1024px) and (max-width: 1600px) {
    :root {
        --header-height: 80px;
        --carousel-title-height: 71px;
        --carousel-spacing: 60px;
        --slide-aspect-ratio: 16 / 9;
        --home-text-margin: 60px;
        --home-text-width: 75%;
        --home-text-line-height: 42px;
        --project-wrapper-margin: 50px;
        --project-h1-margin: 24px 0 9px 0;
        --project-into-text: 100px;
        --project-content-text-margin: 60px;
        --project-infomation-flex-direction: row;
        --project-info-wrapper-margins: 108px 0 30px 0;
        --next-projects-span-margin: 16px 0 0 0;
        --wrapper-top-margin: 110px;
        --footer-height: 67px;
        --margin-width: 60px;
        --profile-top-margin: 24px;
        --info-point-links-margin: 25px;
        --sub-list-margin: var(--profile-top-margin) 0 30px 0;
        --profile-contact-bottom-pad: 60px;
        --last-section-margin: 105px;

        --tile-aspect-ratio: 1.5;

        --grid-2-col: 2;
        --grid-3-col: 3;
        --grid-4-col: 4;
        --grid-y-gap: 36px;
        --grid-y-gap-projcts: 20px;
        --grid-y-gap-projcts-next-projects: 20px;
        --grid-y-gap-work: 56px;
        --grid-x-gap: 20px;
        --grid-2-col-top-margin: 85px;

        --project-next-inner-padding: 0 60px 147px 60px;
        --project-infomation-max-width: 49%;
        --project-infomation-h2-margin: 26px 0 10px 0;
        --project-information-section-padding: 50px;
        --project-sub-col-margin: 6px;

        --show-for-desktop: block;
        --show-for-mobile: none;
        --hide-for-medium-down: block;
        --desktop-only-border:  1px solid;

        --column-width-one-third: 1;
        --column-width-two-third: 2;
        --column-width-half: 1;

        --stack-for-mobile: row;

        --font-size-home: var(--font-size-xl);
        --font-size-tile: var(--font-size-small);
        --font-size-project-large: var(--font-size-large);
        --font-size-project-medium: var(--font-size-medium);
        --project-intro-line-height: 29px;
        --font-size-project-small: var(--font-size-small);
        --h1-font-size: var(--font-size-medium);
        --h1-margin: 24px;
        --p-margin: 24px;
        --main-font-size: var(--font-size-medium);
    }
}

/* Tablet - 800px to 1023px */
@media (min-width: 800px) and (max-width: 1023px) {
    :root {
        --header-height: 80px;
        --carousel-title-height: 71px;
        --carousel-spacing: 60px;
        --slide-aspect-ratio: 16 / 9;
        --home-text-margin: 60px;
        --home-text-width: 75%;
        --home-text-line-height: 42px;
        --project-wrapper-margin: 50px;
        --project-into-text: 100px;
        --project-h1-margin: 24px 0 9px 0;
        --project-content-text-margin: 40px;
        --project-infomation-flex-direction: row;
        --project-info-wrapper-margins: 78px 0 30px 0;
        --next-projects-span-margin: 7px 0 0 0;
        --wrapper-top-margin: 110px;
        --footer-height: 67px;
        --margin-width: 60px;
        --profile-top-margin: 24px;
        --info-point-links-margin: 25px;
        --sub-list-margin: var(--profile-top-margin) 0 30px 0;
        --profile-contact-bottom-pad: 60px;
        --last-section-margin: 105px;

        --tile-aspect-ratio: 1.5;

        --grid-2-col: 2;
        --grid-3-col: 2;
        --grid-4-col: 2;
        --grid-y-gap: 36px;
        --grid-y-gap-projcts: 20px;
        --grid-y-gap-projcts-next-projects: 20px;
        --grid-y-gap-work: 56px;
        --grid-x-gap: 20px;
        --grid-2-col-top-margin: 85px;

        --project-next-inner-padding: 0 60px 147px 60px;
        --project-infomation-max-width: 49%;
        --project-infomation-h2-margin: 26px 0 10px 0;
        --project-information-section-padding: 50px;
        --project-sub-col-margin: 6px;

        --show-for-desktop: block;
        --show-for-mobile: none;
        --hide-for-medium-down: block;
        --desktop-only-border:  1px solid;

        --stack-for-mobile: row;

        --column-width-one-third: 1;
        --column-width-two-third: 2;
        --column-width-half: 1;

        --font-size-home: var(--font-size-xl);
        --font-size-tile: var(--font-size-small);
        --font-size-project-large: var(--font-size-large);
        --font-size-project-medium: var(--font-size-medium);
        --project-intro-line-height: 29px;
        --font-size-project-small: var(--font-size-small);
        --h1-font-size: var(--font-size-medium);
        --h1-margin: 24px;
        --p-margin: 24px;
        --main-font-size: var(--font-size-medium);
    }
}

/* Mobile - 799px and below */
@media (max-width: 799px) {
    :root {
        --header-height: 80px;
        --carousel-title-height: 47px;
        --carousel-spacing: 20px;
        --slide-aspect-ratio: 16 / 9;
        --home-text-margin: 48px;
        --home-text-width: 100%;
        --home-text-line-height: 28px;
        --project-wrapper-margin: 50px;
        --project-into-text: 58px;
        --project-h1-margin: 0 0 7px 0;
        --project-intro-margin: -10px 0;
        --project-content-text-margin: 34px;
        --project-infomation-flex-direction: column;
        --project-info-wrapper-margins: 78px 0 30px 0;
        --next-projects-span-margin: 7px 0 0 0;
        --wrapper-top-margin: 110px;
        --footer-height: 67px;
        --info-point-links-margin: -11px;
        --margin-width: 17px;
        --profile-top-margin: 15px;
        --sub-list-margin: var(--profile-top-margin) 0 0;
        --profile-contact-bottom-pad: 35px;
        --last-section-margin: 30px;

        --tile-aspect-ratio: 1.5;

        --grid-2-col: 1;
        --grid-3-col: 1;
        --grid-4-col: 1;
        --grid-y-gap: 56px;
        --grid-y-gap-projcts: 16px;
        --grid-y-gap-projcts-next-projects: 32px;
        --grid-y-gap-work: 56px;
        --grid-x-gap: 20px;
        --grid-2-col-top-margin: 50px;

        --project-next-inner-padding: 0 20px 115px 20px;
        --project-infomation-max-width: 100%;
        --project-infomation-h2-margin: 18px 0 20px 0;
        --project-information-section-padding: 30px;
        --project-sub-col-margin: -16px;

        --show-for-desktop: none;
        --show-for-mobile: block;
        --hide-for-medium-down: none;
        --desktop-only-border:  none;

        --stack-for-mobile: column;

        --column-width-one-third: 1;
        --column-width-two-third: 2;

        --font-size-home: var(--font-size-medium);
        --font-size-tile: var(--font-size-small);
        --h1-font-size: var(--font-size-medium);
        --font-size-project-large: var(--font-size-large);
        --font-size-project-medium: var(--font-size-small);
        --project-intro-line-height: 23px;
        --font-size-project-small: var(--font-size-small);
        --h1-margin: 16px;
        --p-margin: 24px;
        --main-font-size: var(--font-size-medium);
    }
}

/* Mobile - 799px and below */
@media (max-width: 600px) {
    :root {
        --slide-aspect-ratio: 0.67;
        --tile-aspect-ratio: 1.5;
    }
}