/*Author:Imani Staples
Date:9/25/24
File name: styles.css*/

/* CSS Reset */
body, header, nav, main, footer, img, h1, ul, h3 aside, figure, figcaption { margin: 0; padding: 0; border:0;}

/*Style rules for body and images */
body { background-color: #f6eee4;}
img { max-width: 100%; height: auto; display: block;}

/*Style rules for mobile viewpoint*/



/*Style rules to show mobile class and hide tab-desk class*/
.mobile, .mobile-tablet {display:block;}
.tab-desk, .desktop{display:none;}

/*Style rules for header area*/
.mobile h1,
.mobile h3 {padding: 2%; text-align:center;}

/*Style rules for main content*/
main {padding:2%;}
main{font-size: 1.25em;}
main h3 {padding-top: 2%;}
main ul{list-style-type:square;}
.mobile h1 {font-family: 'Emblema One', cursive;}
.mobile h3 {font-family: "Lora", serif;}

/*Style rules for links*/
.link {color: #423319; text-decoration: none;
font-weight:bold;
font-style:italic;}

/*Style rules for actions*/
.action{font-size:1.75em; font-weight:bold; text-align:center;}
.round {border-radius: 6px;}
aside {text-align:center; font-size:1.5em;font-weight:bold;text-shadow:4px 4px 10px #c5a687;}
figure {border: 4px solid #2a1f14; box-shadow: 6px 6px 10px #c5a687; max-width: 400px; margin: 2% auto;}
#info ul {margin-left: 10%;}
figcaption {padding: 2%; border-top: 4px solid #2a1f14;}

/*Style rules for contact*/
#contact {text-align:center;}
.tel-link { background-color: #2a1f14; padding: 2%; width: 80%; margin: 0 auto;}
.tel-link a {color: #fece4; text-decoration: none; font-weight: bold;}

/* Style rules for navigation area*/
nav { background-color:#2a1f14;}
nav ul {list-style-type: none; text-align: center;}
nav li { display: block; font-size:1.5em; border-top: 0.5px solid #f6eee4; font-family: Geneva, Arial, sans-serif; font-weight: bold;}

nav li a {display: block; color: #f6eee4; padding: 0.5em 2em; 
text-decoration: none;}

/*Style rules for main content */
main { padding: 2%; font-family:Verdana, Arial,sans-serif;}
main p {font-size:1.25em;}
main h3 {padding-top:2%;}
main ul {list-style-type:square;}

.link {color:#43319; text-decoration:none; font-weight:bold; font-style:italic;}
.action{font-size:1.75em; font-weight:bold; text-align:center;}
#contact {text-align:center;}

/*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;}
#form h2{}
  /* 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;}
.grid {display:grid; grid; grid-template-columns:repeat(2, 1fr); grid-gap:10px}
aside{grid-column:1 / span 2;}
/*Tablet Viewport: Style rules for form element*/
form{width:70%; margin-top:0; margin-bottom:0; margin-left:auto; margin-right: auto;}
nav li a:hover{color: #2a1f14; background-color:#f6ee64; opacity:0.5;}
    
.grid {display: grid; grid-template-columns: repeat (2, 1fr); gap: 10px;}}
/*Media Query for Desktop Viewport*/
@media screen and (min-width: 1000px), print{/*Desktop Viewport: Style rules for main content*/
/*Desktop Viewport: Show desktop class, hide mobile-tablet class*/
.desktop {display:block;}
.mobile-tablet{display:none;}
    info ul{margin-left: 5%;}}
    /*Media Query for Large Desktop Viewports*/
    @media screen and (min-width: 1921px) {body{background: linear-gradient(#66eee4,#78593a);}
    #wrapper {width:1920px; margin: 0 auto;}
    main {background-color:#66eee4;}}
    /*Media Query for Print*/
    @media print{body{background-color: white; color:black;}
        .grid{grid-template-columns:repeat(4, 1fr); grid-gap:30px;}}
        aside {grid-column:1/span 4; font-size:3em;}
        /*Style rules for table*/
        table{border:1px solid #2a1f14; padding:1%; border-collapse: collapse; margin: 0 auto;}
        caption{font-size:1.5em; font-weight:bold; padding: 1%;}
        th,td{border:1px solid #2a1f14; padding:1%;}
        th{background-color: #2a1f14; color: #fff; font-size:1.15em;}
        tr:nth-child(odd){background-color: #deccba;}
        form{width:auto;}
        .form-grid{grid-column: 1 / span 2;}

/*Style rules for form elements*/
fieldset, input, text area{margin-bottom:2%;}
fieldset legend{font-weight: bold; font-size:1.25em;}
label {display:block; padding-top: 2%;}
#submit{margin-top:0;
margin-bottom:0;
margin-left:auto;
margin-right:auto;}

/*Style rules for footer content */ 
footer {text-align:center; font-size:0.85em; background-color:#2a1f14; color: #f6eee4; padding: 1% 0;}
footer a { color: #f3e6d8; text-decoration: none;}