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

/* CSS Reset */
body, header, nav, main, footer, img, h1, ul, h3 { 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 {display:block;}
.tab-desk{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;}
#info ul {margin-left: 10%;}

/*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;}
  /* 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;}
nav li a:hover{color: #2a1f14; background-color:#f6ee64;}}
/*Media Query for Desktop Viewport*/
@media screen and (min-width: 1000px), print{/*Desktop Viewport: 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(#66eee4,#78593a);}
    #wrapper {width:1920px; margin: 0 auto;}
    main {background-color:#66eee4;}}
    /*Media Query for Print*/
    @media print{body{background-color: white; color:black;}}


/*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;}