/* ############################################################################################################################################################################ */
/* ############################################################################################################################################################################ */
/* Skye Isle Terrier Sanctuary Public Website                                                                                                                                   */
/*  • Page:                      Body Stylesheet (body.css)                                                                                                                     */
/*  • Description:               Global body and main content area styles, dark theme foundation, and responsive layout across all supported resolutions                        */
/*  • Location:                  /css/body.css                                                                                                                                  */
/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/*  • Version:                   v0.0.01                                                                                                                                        */
/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/*  • Project Start Date:        2026-06-15                                                                                                                                     */
/*  • Last updated:              2026-06-18 @ 1725 EDT                                                                                                                          */
/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/*  • Author:                    by Conner Rhoads                                                                                                                               */
/*  • Official Site:             www.skyeisleterriersanctuary.com                                                                                                               */
/* ############################################################################################################################################################################ */
/* ############################################################################################################################################################################ */

/* ============================================================================================================================================================================ */
/*  BODY STYLESHEET                                                                                                                                                             */
/* ============================================================================================================================================================================ */

body 
{
    margin: 0;
    padding: 0;
    background: #5D4037;
    color: #e0e0e0;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    line-height: 1.6;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
}

main 
{
    background: #5D4037;
    border-radius: 12px;
    color: #e0e0e0;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
}

/* ============================================================================================================================================================================ */
/*  SPAN HEADER IMAGE – Full-width with 5% gaps, rounded corners, drop shadow                                                                                                   */
/* ============================================================================================================================================================================ */

.span-header-image
{
    width: 100%;
    padding-left: 5%;
    padding-right: 5%;
    box-sizing: border-box;
    margin: 0 auto;
    display: block;
}

/* Make the link fill the container */
.span-header-image a
{
    display: block;
    text-decoration: none;
}

/* Image styling */
.span-header-image img
{
    width: 100%;
    height: auto;
    display: block;
    border-radius: 16px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.75);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Hover effect */
.span-header-image a:hover img
{
    transform: scale(1.01);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.85);
}

/* ============================================================================================================================================================================ */
/*  MOBILE RESOLUTIONS (Portrait Mode)                                                                                                                                          */
/* ============================================================================================================================================================================ */

@media (min-width: 0px) and (max-width: 240px)
{
    main 
    {
        margin-left: 15px;
        margin-right: 15px;
        margin-top: 20px;
        margin-bottom: 20px;
        padding: 20px 15px;
        max-width: 100%;
        box-sizing: border-box;
    }
}

@media (min-width: 241px) and (max-width: 320px)
{
    main 
    {
        margin-left: 20px;
        margin-right: 20px;
        margin-top: 25px;
        margin-bottom: 25px;
        padding: 25px 20px;
        max-width: 100%;
        box-sizing: border-box;
    }
}

@media (min-width: 321px) and (max-width: 480px)
{
    main 
    {
        margin-left: 30px;
        margin-right: 30px;
        margin-top: 25px;
        margin-bottom: 25px;
        padding: 30px 25px;
        max-width: 100%;
        box-sizing: border-box;
    }
}

@media (min-width: 481px) and (max-width: 640px)
{
    main 
    {
        margin-left: 30px;
        margin-right: 30px;
        margin-top: 25px;
        margin-bottom: 25px;
        padding: 35px 30px;
        max-width: 100%;
        box-sizing: border-box;
    }
}

@media (min-width: 641px) and (max-width: 720px)
{
    main 
    {
        margin-left: 30px;
        margin-right: 30px;
        margin-top: 25px;
        margin-bottom: 25px;
        padding: 35px 30px;
        max-width: 100%;
        box-sizing: border-box;
    }
}

@media (min-width: 801px) and (max-width: 1023px), (min-width: 1025px) and (max-width: 1080px)
{
    main 
    {
        margin-left: 40px;
        margin-right: 40px;
        margin-top: 30px;
        margin-bottom: 30px;
        max-width: 1220px;
        padding: 40px;
        box-sizing: border-box;
    }
}

/* ============================================================================================================================================================================ */
/*  LEGACY RESOLUTIONS                                                                                                                                                          */
/* ============================================================================================================================================================================ */

@media (min-width: 481px) and (max-width: 640px)
{
    main 
    {
        margin-left: 30px;
        margin-right: 30px;
        margin-top: 25px;
        margin-bottom: 25px;
        padding: 35px 30px;
        max-width: 100%;
        box-sizing: border-box;
    }
}

@media (min-width: 800px) and (max-width: 800px)
{
    main 
    {
        margin-left: 40px;
        margin-right: 40px;
        margin-top: 30px;
        margin-bottom: 30px;
        padding: 40px 35px;
        max-width: 100%;
        box-sizing: border-box;
    }
}

@media (min-width: 1024px) and (max-width: 1024px)
{
    main 
    {
        margin-left: 50px;
        margin-right: 50px;
        margin-top: 30px;
        margin-bottom: 30px;
        padding: 40px 35px;
        max-width: 100%;
        box-sizing: border-box;
    }
}

/* ============================================================================================================================================================================ */
/* MODERN RESOLUTIONS                                                                                                                                                           */
/* ============================================================================================================================================================================ */

@media (min-width: 1081px) and (max-width: 1280px)
{
    main 
    {
        margin-left: 350px;
        margin-right: 350px;
        margin-top: 40px;
        margin-bottom: 40px;
        max-width: 1220px;
        padding: 40px 35px;
        box-sizing: border-box;
    }
}

@media (min-width: 1281px) and (max-width: 1920px)
{
    main 
    {
        margin-left: 350px;
        margin-right: 350px;
        margin-top: 50px;
        margin-bottom: 50px;
        max-width: 1220px;
        padding: 50px;
        box-sizing: border-box;
    }
}

@media (min-width: 1921px) and (max-width: 2559px)
{
    main 
    {
        margin-left: 380px;
        margin-right: 380px;
        margin-top: 50px;
        margin-bottom: 50px;
        max-width: 1400px;
        padding: 45px 40px;
        box-sizing: border-box;
    }
}

@media (min-width: 2562px) and (max-width: 3839px)
{
    main 
    {
        margin-left: 400px;
        margin-right: 400px;
        margin-top: 50px;
        margin-bottom: 50px;
        max-width: 1600px;
        padding: 50px 40px;
        box-sizing: border-box;
    }
}

@media (min-width: 3841px) and (max-width: 6144px)
{
    main 
    {
        margin-left: 450px;
        margin-right: 450px;
        margin-top: 50px;
        margin-bottom: 50px;
        max-width: 1800px;
        padding: 60px 50px;
        box-sizing: border-box;
    }
}

@media (min-width: 6145px) and (max-width: 7680px)
{
    main 
    {
        margin-left: 500px;
        margin-right: 500px;
        margin-top: 50px;
        margin-bottom: 50px;
        max-width: 2000px;
        padding: 70px 60px;
        box-sizing: border-box;
    }
}

/* ============================================================================================================================================================================ */
/*  ULTRAWIDE RESOLUTIONS                                                                                                                                                       */
/* ============================================================================================================================================================================ */

@media (min-width: 2560px) and (max-width: 2560px)
{
    main 
    {
        margin-left: 500px;
        margin-right: 500px;
        margin-top: 50px;
        margin-bottom: 50px;
        max-width: 1800px;
        padding: 60px 50px;
        box-sizing: border-box;
    }
}

@media (min-width: 4608px) and (max-width: 4608px)
{
    main 
    {
        margin-left: 700px;
        margin-right: 700px;
        margin-top: 50px;
        margin-bottom: 50px;
        max-width: 2000px;
        padding: 70px 60px;
        box-sizing: border-box;
    }
}

@media (min-width: 3440px) and (max-width: 3440px)
{
    main 
    {
        margin-left: 500px;
        margin-right: 500px;
        margin-top: 50px;
        margin-bottom: 50px;
        max-width: 1800px;
        padding: 60px 50px;
        box-sizing: border-box;
    }
}

@media (min-width: 3840px) and (max-width: 3840px)
{
    main 
    {
        margin-left: 500px;
        margin-right: 500px;
        margin-top: 50px;
        margin-bottom: 50px;
        max-width: 2000px;
        padding: 70px 60px;
        box-sizing: border-box;
    }
}

@media (min-width: 5120px) and (max-width: 5120px)
{
    main 
    {
        margin-left: 700px;
        margin-right: 700px;
        margin-top: 50px;
        margin-bottom: 50px;
        max-width: 2200px;
        padding: 80px 70px;
        box-sizing: border-box;
    }
}

/* ============================================================================================================================================================================ */
/*  END STYLESHEET                                                                                                                                                              */
/* ============================================================================================================================================================================ */