/*
  Author:EYOYIBO TORITSEJU
  Date:02/19/2025
  File Name:styles.css
  */
  
  /* CSS Reset */
  body,header,nav,main,footer,img,h1,h3,ul,aside,figure,figcaption {
      margin: 0;
      padding: 0;
      border: 0;
  }
  
  /* style rules for images */
  boby{
      background-color: #f6eee4;
  }
  
  img {
      max-width: 100%;
      display: block;
  }
    
    /* 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 {
        font-family: 'Emblema one', cursive;
        font-size: 24px;
        text-align: center;
        color: #333;
    }
    
    .mobile h3 {
        font-family: 'Lora', serif;
        font-size: 20px;
        font-weight: 400;
        text-align: center;
        color: #333;
    }
        
    
    /* 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;
        font-family: Geneva, Arial, sans-serif;
        font-weight: bold;
        border-top: solid border;
        width: 0.5px;
        color: #f6eee4;
    }
    
    nav li a {
        display: block;
        color: #f6eee4;
        padding-top: 0.5em;
        padding-bottom: 0.5em;
        padding-left: 2em;
        padding-right: 2em;
        text-decoration: none;
    }
    
    /* style rules for main content*/
    main {
        padding: 2%;
        font-family: 'Lora',sans-serif;
    }
    
    main p {
        font-size: 1.25em;
    }
    
    main h3 {
        padding-top: 2%;
    }
    
    ul {
        list-style-type: square;
    }
    
    .link {
        color: #4d3319;
        text-decoration: none;
        font-weight: bold;
        font-style: italic;
    }
    
    .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;
    }
    
    figcaption {
        padding: 2%;
        border-top: 4px solid #2a1f14;
    }
    
    #info ul {
        margin-left: 10%;
    }
        
    .contact-id-selector {
        text-align: center;
    }
    
    
    
    }
    /* style rules for main content*/
    main {
        padding: 2%;
        background-color: #2a1f14;
        overflow: auto;
        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: #4d3319;
      text-decoration: none;
      font-weight: bold;
      font-style: italic;
    }
     
     .action {
         font-size: 1.75em;
         font-weight: bold;
         text-align: center;
     }
     .contact {
         text-align: center;
     }
    
    .tel-link {
        background-color: #2a1f14;
        padding: 2%;
        width: 80%;
        margin: 0 auto;
    }
    
    .tel-link a {
        color: #f6eee4;
        text-decoration: none;
        font-weight: bold;
    }
    /* 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;
    }

/* 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, .mobile-nav {
    display: none;
}

/* Tablet Viewport: Style rules for nav area */
nav ul {
    list-style-type: none;
    text-align: center;
}

nav li {
    border-top: none;
    display: inline-block;
    font-size: 1.25em;
    font-family: Geneva, Arial, sans-serif;
    font-weight: bold;
}

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

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

aside {
    grid-column:1/span 2;
}

/* Tablet Viewport:Style rule for form element */
form {
    width: 70%;
    margin: 0 auto;
}


/* Media query for Desktop Viewport */
@media screen and (min-width: 1000px), print {
    
    /* Desktop Viewport:Show desktop class, hide mobile-tablet class */
    .desktop {
        display: block;
    }
    
    .mobile-tablet {
        display: none;
    }
    
    /* 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;
        opacity: 0.5;
    }
    
    /* Desktop Viewport: Style rules for main content */
    #info ul {
        margin-left: 5%;
    }
    
    .grid {
        grid-template-columns: auto auto auto;
        grid-gap:30px;
    }
    
    aside {
        grid-column: 1/span 3;
        font-size: 2em;
    }
    
    
    /* Media Query for large Desktop Viewports */
    @media screen and (min-width: 1921px), print {
        
      body{
            background: linear-gradient(#f6eee4,#78593a);
     }
    
      #wrapper {
          width: 1920px;
          margin: 0 auto;
      }
      
      main {
          background-color: #f6eee4;
      }
      
      .grid {
          grid-template-column:1/span 4;
          font-size: 3em;
      }
      
      aside {
          grid-template-columns: auto auto auto auto;
      }