/* 
Author: Travauris Manley
Date: 02/15/26
File Name: styles.css
*/

/*CSS Reset*/

    .body, .header, .nav, .main, .footer, .img, .h1, .h3, .ul, .aside, .figure, .figcaption{
        
        margin: 0;
        padding: 0;
        border: 0;
    }
    
    .ul{
        list-style-type:square;
        border-top: 0.5px;
        color: #f6eee4;
    }
    
    
     /*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*/
             
             .h1{ 
                 
                 padding:2%;
                 text-align:center;
                 }
                 
                 .h3 {
                     padding:2%;
                     text-align:center;
                 }
                 
                 
                 
                    /* Style rules for main content*/
            
            .main { 
                padding: 2%;
                font-size: 1.25em;
                font-family: Verdana, Arial, sans-serif;
            }
            
            
                .main p { 
                  font-size: 1.25em;
              }
              
            
            .h3{ 
                padding: 2%;
            }
            
            
            
               .lora {
  font-family: "Lora", serif;
  font-size: 1%;
  font-weight: 400;
  font-style: normal;
}
            
            
            .main:ul{
                list-style-type: square;
                color: #4d3319;
                font-size: 1.75em;
                text-align: center;
            }
   

           
              
                      .emblema-one-regular{ 
  font-family: "Emblema One", system-ui;
  font-weight: 400;
  font-style: normal;
                      }
                      
                           .lora {
  font-family: "Lora", serif;
  font-size: 0%;
  font-weight: 400;
  font-style: normal;
}
  
  
  
              .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;
              }
              
              
              .figcaption{
                  
                  padding:2%;
                  border-top:4px solid #2a1f14;
                  
              }
              
              .figure{
                  
                  border:4px solid #2a1f14;
                  box-shadow:6px 6px 10px #c5a687;
                  width:400px;
                  margin:2% auto;
                  border:4px solid #2a1f14;
                  
              }
              
              
              
                #info ul{
                  margin-left: 10%;
              }
              
              #contact {
                  list-style-type:none;
                  text-align:center;
              }
              
              .tel-link { 
                  background-color: #2a1f14;
                  padding: 2%;
                  width:80%;
                  margin:auto; 
                  color: #f6eee4;
                  font-weight:bold;
                
              }
            
                 
                 
   .emblema-one-regular {
  font-family: "Emblema One", system-ui;
  font-weight: 400;
  font-style: normal;
                      }
        
              
              
                 /*Media Query For Tablet Viewport*/
                  
                  @media screen and (min-width:620px), print {
                  }
                  /*Media Query for large desktop viewports*/
                  
                  @media screen and (min-width:1921px){
                      
                      .body{
                          
                          background:linear-gradient(#f6eee4,#78593a);
                         
                      }
                      
                      #wrapper{
                          
                          width:1920px;
                          margin-top:0;
                          margin-bottom:0;
                          margin-left:auto;
                          margin-right:auto;
                          
                      }
                      
                      .main{
                          
                          background-color:#f6eee4;
                          
                          
                      }
                      
                      
                  }
                  
                  /*Media Query for Print*/
                  
                  @media print{
                      
                      .body{
                          
                          background-color:#fff;
                          color:#000;
                      }
                      
                      
                  }
                  
                  
                  
                  
                  
                  /*Tablet Viewport: Show tab-desk class, hide mobile class*/
                  
                  .tablet-desktop {
                      display: block;
                  }
                  
                  .mobile{
                      display:none;
                  }
                  
                  
                  /*Tablet Viewport: Style rules for nav area*/
                  
                  .nav:li {
                      display:inline-block;
                      font-size:1.25em;
                      font:Geneva, arial,sans-serif;
                      font-weight:bold;
                  }
                 .nav:li a{
                     padding-left:2em;
                     padding-right:2em;
                     padding-top:0.5em;
                     padding-bottom:0.5em;
                     display:block;
                     color:#f6eee4;
                     text-decoration:none;
                  
                 }
                 
                 .grid{
                     
                     
                    display:grid;
                     grid-template-columns:auto, auto;
                     grid-gap:10px
                 }
                 
                 .aside{
                     display:grid;
                     grid-template-columns:auto, auto;
                     grid-column:1 / span 2;
                 }
                 
                 /*Media Query for Desktop Viewport*/
                 
                 @media screen and (min-width:1000px), print{
                     
                     .nav li a:hover{
                         
                         opacity:0.5;
                
                 
                     }
                     
                     .grid{
                         
                         
                         display:grid;
                     grid-template-columns:auto,auto, auto;
                     grid-gap:30px;
                        
                     }
                     
                     .aside{
                         
                         grid-column:1 / span 2;
                         font-size:2em;
                         
                     }
                     
                  /*Desktop Viewport: Style rules for nav area*/
                  
                  .nav li{
                      
                      font-size:1.5em;
                  }
                  
                  .nav li a{
                      padding-left:0.5em;
                      padding-right:1.5em;
                      
                  }
                  
                  .nav li a:hover{
                      
                      color:#2a1f14;
                      background-color:#f6eee4;
                      opacity:0.5;
                  }
                  
                  }
                  
                  .grid-item{
                      
                      display:grid;
                      grid-column:auto, auto, auto, auto
                  
                  }
                  
                  .aside{
                      
                      display:grid;
                      grid-column: 1 / span 3;
                      font-size:2em;
                  }
                  
                     
                     /*Desktop viewport: style for main content*/
                     
                     #info{
                         
                         margin-left:5%;
                         
                     }
              
              .grid{
                  
                  grid-column:auto, auto, auto, auto;
                  
                  
              }
              
              .aside{
                  
                  display:grid;
                  grid-column:1 / span 4;
                  
                  
              }
    
    
    /*Style rues for body and images*/
    
    .body{ 
        background-color: #f6eee4;
     max-width: 100%;
        
    }
        
        
     .img{
           background-color: #f6eee4;
     max-width: 100%;
         
     }
        
        
        /* Style rules for navigation area*/
        
        .nav {
         background-color: #2a1f14
            
        }
            .nav ul { 
                list-style-type: none;
                margin: 0;
                text-align: center;
            }
            .nav li { 
                display: inline-block; 
                color: #f6eee4; 
                padding: 0.5em; 
                margin-bottom: 0.5em;
                margin-top: 0.5em;
                float: left 2em;
                float: right 2em;
            }
            
            
            /*Style rules for footer content*/
            
            .footer {
                text-align: center;
                font-size: 0.85em;
                background-color: #2a1f14;
                color: #f6eee4;
                padding: 1%;
                float: left;
                float: right;
                margin-top: 1%;
                margin-bottom: 1%;
                color: #f3e6d8;
            }