/* justify-items = display: grid */
/* align-items = flexbox display */
/* if dev tools responsive page too zoomed in = Ctrl + 0(zero) */
/* multiple margin values order = Top, Right, Bottom, Left */
body {
    background-color: blanchedalmond;
}

/*Links in Navbar*/
#nav-link {
    color: crimson;
    font-size: 20.5px;
}

/*Main Headings' Styles*/
#head {
    font-size: 25.5px;
    color: rgb(117, 3, 60);
    text-align: center;
}

/*Second Headings' Styles*/
#head2 {
    color: rgb(3, 3, 175);
    font-size: 25.5px;
}

/*Content Paragraphs Styling*/
#first {
    font-size: x-large;
}

/*Image for Cards Styling*/
.img {
    size: 200px;
    max-width: 1000px;
    border: 4px solid aqua;
}

/*Body within Card Styling*/
.card-body {
    background-color: rgb(157, 232, 229);
    border: 4px solid aqua;
}

/*card's title*/
.card-title {
    color: blue;
    font-size: 30px;
}

/*Paragraph within Cards Styling*/
.card-par {
    font-size: 17px;
}

/*List of Icons*/
.list-inline-item {
    font-size: 22px;
    width: 200px;
    color: darkmagenta;
}

/*Contact Page's Container for Form*/
.container {
    display: grid;
    height: 1000px;
}

/*Styles for Input Field Containers*/
.input {
    width: 100%;
    padding: 15px;
    margin: 1px;
    border: none;
    opacity: 75%;
}

/*Input Field Text Styles*/
input,
select,
textarea {
    color: black;
    font-size: x-large;
}

/*Image Inside Contact Page's Form*/
.form-img {
    background-image: url(./img/cat\ dog.avif);

    /*Centers and scales image*/
    background-position: center;
    background-repeat: no-repeat;

    /* contain reduces size*/
    background-size: contain;
    position: relative;
}

/* Store Map Image*/
/*.map{
    position: center;
} */


/*Store Info Styles*/
.hrs {
    color: black;
    font-size: 25px;
}

/* Footer Styles */
.foot {
    font-size: 17.5px;
    background-color: lawngreen;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
}

/* MEDIA QUERIES */
@media (width <= 480px) {
    #nav-link {
        color: rgb(3, 139, 55);
        font-size: 18px;
        margin-left: 12px;
    }

    /*1st headings' styles*/
    #head {
        font-size: 30px;
        color: cadetblue;
        margin: 12px;
    }

    /*2nd headings' styles*/
    #head2 {
        font-style: oblique;
        color: darkorange;
        margin-left: 8px;
    }

    /*content paragraphs*/
    #first {
        font-size: 20px;
        color: darkblue;
        margin-left: 8px;
    }


    /*  card container */
    .card{
        margin: 12px;
    }

    /*cards' image*/
    .img {
        size: 50px;
        max-width: 600px;
        border: 4px dotted magenta;
    }

    .card-body {
        background-color: rgb(197, 142, 179);
        height: 274.5px;
        border: 4px dotted magenta;
    }

    /*cards' title*/
    .card-title {
        font-size: 20px;
    }

    /*paragraphs in card*/
    .card-par {
        font-size: 11.7px;
    }

    /*Services Styling (About Page)*/
    #icon {
        color: rgb(10, 95, 95);
        text-align: center;
    }


    /* Title Contact Page */
    #head{
        font-size: x-large;
    }


    /* First Paragraph Contact Page */
    #first{
        font-size: 18.7px;
        color: rgb(3, 139, 55);
    }

    /* Paragraphs Contact Page */
    .hrs{
        font-size: 20px;
        color: rgb(3, 139, 55)
    }


    /* Form's Container */
    .container {
        display: grid;
        height: auto;
        width: 80%;
        margin-left: -0.4px;
    }


    /* Whole Form Styles */
    .d-flex.flex-column {
        width: 200px;
        height: auto;
        font-size: 16px;    /* 16px prevents iOS from "zooming in" on focus */
        margin-left: -0.4px;
    }


    /* Style Attribute for Form */
    style{
        background-image: url(./img/cat\ dog.avif);
        background-repeat: no-repeat;
        background-size: 40%;    /* Shrinks the image size */
        background-position: left center; /* Positions image on the left edge */
    }






    /* Input Specifics */
    .input[type=text]{
         width: 100%;           /* Makes the input fill the container */
         max-width: 212.5px;       /* Safety net to prevent it from ever going outside */
         box-sizing: border-box; /* IMPORTANT: Ensures padding doesn't push it wider */
    }

    /*Input fields' text styles (Contact Page)*/
    input,
    select,
    textarea {
        font-size: medium;
    }

    /* Placeholder Styles */
    input::placeholder [type= submit]{
        color: rgb(118, 0, 0)
    }

    .input[type=submit]{
        margin-right: 4px;
        margin-top: 6px;
    }


    /*FB and Twitter Icons*/
    .list-inline-item {
        font-size: x-large;
        font-style: oblique;
        color: cadetblue;
    }

    /*footer styles*/
    .foot {
        font-size: .85rem;
        margin-bottom: 0;
    }
}



@media (481px <= width <= 768px) {
    #nav-link {
        font-size: 25px;
        color: darkslateblue;
        margin-left: 25px;
        font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    }

    /*1st headings' styles*/
    #head {
        font-size: 24px;
        text-align: center;
        color: darkmagenta;
        font-family: 'Times New Roman', Times, serif;
    }

    /*2nd headings' styles*/
    #head2 {
        font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
        color: darkviolet;
        margin-left: 25px;
    }

    /*content paragraphs*/
    #first {
        font-size: 20px;
        color: indigo;
        margin-left: 25px;
    }

    .p{
        margin: 25px;
    }

    /* card container */
    .card{
        margin: 25px;
        max-width: 623px;
    }

    /*cards' image*/
    .img {
        size: 28px;
        max-width: 623px;
        border: 4px dashed rgb(99, 0, 99);
    }

    .card-body {
        background-color: rgb(253, 195, 234);
        border: 4px dashed rgb(99, 0, 99)
    }

    /*cards' title*/
    .card-title {
        font-size: 30px;
        color: rgb(51, 0, 0);
    }

    /*paragraphs in card*/
    .card-par {
        font-size: 22px;
        color: darkred;
        font-family: Verdana, Geneva, Tahoma, sans-serif;
    }

    /*Services Styling*/
    #icon {
        color: goldenrod;
        text-align: center;
    }

    /* Icons' Container */
    .icons{
        display: flex;     /* Enables the flexbox layout */
        flex-direction: row;     /* Forces items to stay in a line (default) */
        justify-content: center; /* Centers icons horizontally */
        gap: 12px;               /* Modern way to add even space between icons */
    }

    /*Input fields' text styles*/
    input,
    select,
    textarea {
        color: darkcyan;
        font-size: x-large;
    }

    /*Contact Page's Container for Form*/
    .container {
        display: grid;
        height: 980px;
        background-image: no-repeat;
    }

    /*Styles for Input Field Containers*/
    .input {
        width: 100%;
        padding: 8px;
        margin: 1px;
        opacity: 75%;
    }

    /*Centers and scales image*/
    .form-img {
        display: block;
        margin: 0;
        padding: 0;

        /* background-position: 100%;
    background-repeat: no-repeat; */

        /*contain reduces size*/
        /* background-size: auto;*/
    }

    /*list of icons*/
    .list-inline-item {
        font-size: 50px;
        width: 200px;
    }

    /*Store Info Styling*/
    .hrs {
        font-size: 26.5px;
        font-style: italic;
        color: rgb(42, 117, 117);
    }

    /*FB and Twitter Icons*/
    .list-inline-item {
        font-size: x-large;
        font-style: oblique;
        color: darkblue;
    }

    /*footer styles*/
    .foot {
        font-size: 17.5px;
    }
}


@media (769px <= width <= 1024px) {
    /* navbar container */
    #navbar{
        padding-left: 12px;
    }

    #nav-link {
        font-size: 25px;
        color: rgb(15, 2, 98);
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        padding-left: 10px;
    }

    /*1st headings' styles*/
    #head {
        font-size: 35px;
        text-align: center;
        color: rgb(187, 2, 187);
        font-family: serif;
    }

    /*2nd headings' styles*/
    #head2 {
        font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
        font-size: 34px;
        padding-left: 20px;
        font-style: italic;
    }

    /*1st content paragraphs*/
    #first {
        font-size: 20px;
        color: rgb(46, 27, 93);
        padding-left: 13px;
        padding-top: 10px;
    }


    /* Rest of Paragraphs */
    .p{
        padding-left: 13px;
    }


    /* Card div */
    .row{
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 10px !important;
    }


    /* card container */
    .card{
        margin: 12px;
    }


    /*cards' image*/
    .img {
        size: 28px;
        width: 100%;
        border: 4px ridge rgb(201, 92, 165);
    }


    .card-body {
        background-color: rgb(226, 159, 204);
        border: 4px ridge rgb(201, 92, 165);
        width: 100%;
    }

    /*cards' title*/
    .card-title {
        font-size: 30px;
        font-family: cursive;
        color: rgb(151, 14, 96);
    }

    /*paragraphs in card*/
    .card-par {
        font-size: 28px;
        color: rgb(172, 46, 140);
        font-family: Arial, Helvetica, sans-serif;
    }

    /*Services Styling*/
    #icon {
        color: rgb(140, 7, 54);
        text-align: center;
    }

    /*Input fields' text styles*/
    input,
    select,
    textarea {
        color: rgb(2, 85, 167);
        font-size: x-large;
    }

    /*Contact Page's Container for Form*/
    .container {
        display: grid;
        height: 980px;
    }

    /*Styles for Input Field Containers*/
    .input {
        width: 100%;
        padding: 8px;
        margin: 1px;
        opacity: 75%;
    }

    /*Centers and scales image*/
    .form-img {
        display: block;
        margin: 0;
        padding: 0;
    }

    /*list of icons*/
    .list-inline-item {
        font-size: 50px;
        width: 200px;
    }

    /*Store Info Styling*/
    .hrs {
        font-size: 26.5px;
        font-style: italic;
        color: rgb(42, 117, 117);
    }

    /*FB and Twitter Icons*/
    .list-inline-item {
        font-size: x-large;
        font-style: oblique;
        color: darkblue;
    }

    /*footer styles*/
    .foot {
        font-size: 17.5px;
    }
}


@media (width >= 1025px) {

    /* navbar container */
    #navbar{
        padding-left: 8px;
    }


    #nav-link {
        font-size: 30px;
        color: orange;
        font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
        font-style: bolder;
        padding-left: 13px;
    }

    /*1st headings' styles*/
    #head {
        font-size: 40px;
        text-align: center;
        color: rgb(44, 109, 111);
        font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    }

    /*2nd headings styles*/
    #head2 {
        font-size: 40px;
        font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
        color: rgb(44, 13, 13);
        padding-left: 23px;
    }

    /*content paragraphs*/
    #first {
        font-size: 27.5px;
        color: rgb(39, 2, 65);
        padding-left: 20px;
    }

    /* Rest of Paragraphs */
    .p{
        padding-left: 20px;
    }


    /* card container */
    .card{
        margin: 12px;
    }


    /*cards' image*/
    .img {
        size: 28px;
        max-width: 480px;
        border: 4px double rgb(60, 77, 187);
    }


    .card-body {
        background-color: rgb(125, 164, 227);
        /* margin: 17px; */
        border: 4px double rgb(60, 77, 187);
    }

    /*cards' title*/
    .card-title {
        font-size: 30px;
        color: aqua;
    }

    /*paragraphs in card*/
    .card-par {
        font-size: 22px;
        color: rgb(15, 7, 70);
        font-family: Verdana, Geneva, Tahoma, sans-serif;
    }

    /*Services Styling*/
    #icon {
        color: rgb(118, 4, 4);
        text-align: center;
    }

    /* placeholder styles */
    ::placeholder {
        color: rgb(82, 187, 152);
        font-size: larger;
        font-style: italic;
        font-weight: bold;
    }



    /*Contact Page's Container for Form*/
    .container {
        display: grid;
        height: 980px;
    }

    /*Styles for Input Field Containers*/
    .input {
        width: 100%;
        padding: 8px;
        margin: 1px;
        opacity: 75%;
    }

    /*Centers and scales image*/
    .form-img {
        display: block;
        margin: 0;
        padding: 0;
    }

    /*list of icons (FB and X)*/
    .list-inline-item {
        font-size: 50px;
        width: 200px;
    }

    /*Store Info Styling*/
    .hrs {
        font-size: 26.5px;
        font-style: bold;
        font-style: italic;
        color: rgb(129, 183, 36);
        font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    }

    /*FB and Twitter Icons*/
    .list-inline-item {
        font-size: x-large;
        font-style: oblique;
        color: rgb(176, 44, 94);
    }

    /*footer styles*/
    .foot {
        font-size: 20.5px;
        background-color: #85fbff;
        color: #015252;
    }
}


 /* * { outline: 1px solid red !important; }*/ /* shows element boundaries * /