/*
Author:Issac Lee
Date:02/20/2025
File Name:styles.css
*/

/* CSS Reset */
body, header, nav, main, footer, h1, div, img {
     margin: 0;
     padding: 0;
     border: 0;
}

/* Style rules for body and images */
body {
     background-color: darkblue;
}

img {
     max-width: 100%;
     display: block;
}

/* Style rules for header */
header {
     text-align: center;
     font-size: 3em;
     color: lightblue;
}

/* Style rules to show mobile class and hide tab-desk class */

.mobile {
    display: block;
}

.tab-desk {
    display: none;
}


/* Style rules for header area */

.mobile h1 {
   padding: 2%; 
   text-align: center;
   font-family: 'Emblema One', sans-serif;
}

.mobile h3 {
    padding: 2%;
    text-align: center;
    font-family: 'Lora', sans-serif;
}

.main {
    font-family: 'Lora', sans-serif;
}

/* Style rules for navigation area */
nav {
    background-color: #373684;
}

nav ul {
     list-style-type: none;
     margin: 0;
     text-align: center;
}

nav li {
     display: inline-block;
     font-size: 2em;
     border-top: 1px solid #fff;
}

nav li a {
     display: block;
     color: #fff;
     text-align: center;
     padding: 0.5em 1em;
     text-decoration: none;
}

/* Sytle rules for main content */
main {
     padding: 2%;
     background-color: #fff;
     overflow: auto;
     font-family: Verdana, Arial, sans-serif;
}

main p {
    font-size: 1.25em;
}

#missions, #about, #story {
    width: 29%;
    float: left;
    margin: 0 2%;
}

#journey, #connect {
    width: 29%;
    float: left;
    margin: 0 2%;
}

#contact {
    text-align: center;
}

#form h2 {
    text-align: center;
}

#about us {
    text-align: center;
}

#products {
    text-align: center;
}

.container {
    background-color: darkblue;
    margin: 20px auto;
    padding: 0 15px;
    
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.product-item {
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    translation: transform 0.2s ease-in-out;
    text-align: center;
}

.product-card:hover {
    transform: scale(1.03);
}

.product-image img {
    width: 100%;
    height: auto;
}

.products-details {
    padding: 15px;
    text-align: center;
}

.product-title {
    font-size: 18px;
    font-weight: bold;
    margin: 10px 0;
    text-align: center;
}

.product-price {
    color: #28a745;
    font-size: 16px;
    margin-bottom: 10px;
    text-align: center;
}

.add-to-cart {
   background-color: #007bff;
   color: white;
   border: none;
   padding: 10px 15px;
   cursor: pointer;
   border-radius: 3px;
   font-size: 14px;
   text-align: center;
}


/* Style rules for footer content */
footer p {
     font-size: 0.75em;
     text-align: center;
     color: #fff;
     padding: 0 1em;
}

footer a {
     color: #fff;
     text-decoration: none;
}

footer {
    overflow: auto;
}

.copyright {
    float: left;
    width: 65%;
}

.social {
    float: right;
    width: 25%;
}

.social img {
    display: inline-block;
    padding: 4%;
}

/* Style rules for form elements */

fieldset, input, select, textarea {
    margin-bottom: 2%;
}

fieldset legend {
    font-weight: bold;
    font-size: 1.25em;
}

label {
    display: block;
    padding-top: 3%;
}

form #submit {
    margin: 0 auto;
    display: block;
    padding: 2%;
    background-color: #b3b3b3;
    font-size: 1em;
    border-radius: 10px;
}

/* Tablet Viewport: Style rule for form element */

form {
    width: 70%;
    margin: 0 auto;
}

/* Desktop Viewport: Style rules for form elements */

form {
    width: auto;
}

.form-grid {
    display: grid;
    grid-template-columns: auto auto auto; 
    grid-gap: 20px;
}

.btn {
    grid-columns: 1 / span 3;
}

/* Begin style rules for mobile viewport */

/* Style rules to show mobile class and hide tab-desk class */

.mobile {
    display: block;
}

.tab-desk {
    display: none;
}


/* Style rules for header area */

.mobile h1 {
   padding: 2%; 
   text-align: center;
   font-family: 'Emblema One', sans-serif;
}

.mobile h3 {
    padding: 2%;
    text-align: center;
    font-family: 'Lora', sans-serif;
}

.main {
    font-family: 'Lora', sans-serif;
}


/* Media Query for Tablet Viewport */

@media screen and (min-width: 620px), print {
    /* Tablet Viewport: Show tab-desk class, hide mobile class */
    .tab-desk { 
        display: block;
}
.mobile { 
    display: none;
}


/* Tablet Viewport: Style rules for nav area */
nav li {
    border-top: none;
    display: inline-block;
    font-size: 1.25em;
}
nav li a {
    padding: 0.5em;
}
}

/* Media Query for Desktop Viewpoint */

@media screen and (min-width: 1000px), print {
    /* Add any specific styles for desktop viewpoint here */
}

/* Desktop Viewport: Style rules for nav area */
nav li {
    font-size: 1.5em;
}

nav li a {
    padding: 0.5em 1.5em;
}

nav li a:hover {
    color: #2a1f14;
    background-color: #f6eee4;
}

/* Desktop Viewpoint: Style rules for main content */
#info ul {
    margin-left: 5%;
}

/* Media Query for Large Desktop Viewports */

@media screen and (min-width: 1921px) {
    body {
        background: linear-gradient(#f6eee4, #78593a);
    }
    
    #wrapper {
        width: 1920px;
        margin: 0 auto;
    }
    
    main {
        background-color: #f6eee4;
    }
}

/* Media Query for Print */

@media print {
    body {
        background-color: white;
        color: black;
    }
}