/* 
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;
    }
    
     /*Style rues for body and images*/
      body{ 
        background-color: #f6eee4;
     max-width: 100%;
        font-family: Verdana, Arial, sans-serif;
    }
    
    #wrapper{
                          width:100%;
                          margin:0 auto;
                          
                      }
    
    
      img{
           background-color: #f6eee4;
     max-width: 100%;
         
     }
    
      .round {
                  border-radius:6px ;
              }
    
     /*Style rules for header area*/
    header{
        
        text-align:center;
    }
        header img{
        
        width:100%;
    
    }
    
    
      /*Style rules to show  mobile class and hide tab-desk class*/
    
        .tab-desk, .desktop {
    display: none;
    font-family: 'Emblema One', sans-serif;
              
    }
    
    .tab-desk h1{
        
         padding:2%;
                 text-align:center;
    }
    
    .tab-desk h3{
        
        padding:2%;
                     text-align:center;
        
    }
    
     /*Tablet Viewport: Show tab-desk class, hide mobile class*/
    
                  
                  .mobile-tablet{
                      
                      display: block;
    font-size: 1.2em;
                      
                  }
                      .tablet-desktop {
                      display: block;
                      }
                      
                      
                      
                         /* style rules for table*/
                      
                      table{
                      width:100%;
                      border-collapse:collapse;
                      border: 1px solid #2a1f14;
                      margin:0 auto;
                      
                  }
                     
           caption{
               
               font-size:1.5;
              
           }
           
           th, td {
               border:1px solid;
               padding:0.75em;
               font-size:1.15em;
               
           }
                      th{
                          
                          background-color:#2a1f14;
                          color:#f6eee4;
                          font-size:1.15em;
                          
                      }
                      
                      
   /*Tablet Viewport: Style rules for nav area*/
   
   /* 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;
               
            }
   
            
                  
                 nav li a{
                     
                     display:block;
                     padding:0.75em 1.5em;
                     color:#f6eee4;
                     text-decoration:none;
                     font-weight:bold;
                  
                 }
                 
                 
                     nav li a:hover{
                         
                         opacity:0.5;
                     }
                 
                    @media screen and (min-width:1000px), print{
                     
                 
                     }
                     
                 
                 grid{
                     
                     
                    display:grid;
                     grid-template-columns:auto, auto;
                     grid-gap:10px
                 }
                 
                 .aside{
                     display:grid;
                     grid-template-columns:auto, auto;
                     grid-column:1 / span 2;
                 }                    
                      
                      
                   
           
           
           
                    /* Style rules for main content*/
            
            main { 
                padding: 2%;
                font-size: 1.25em;
                font-family: Verdana, Arial, sans-serif;
            }
            
            
                main p { 
                  font-size: 1.25em;
              }
              
     
            
            
            main ul{
                list-style-type: square;
                color: #4d3319;
                font-size: 1.75em;
                text-align: center;
            }


                 /*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);
                      
                      }
                      
                      
                      
                      .main{
                          
                          background-color:#f6eee4;
                          
                          
                      }
                 }
       
                  
                  /*Media Query for Print*/
                  
                  @media print{
                      
                      .body{
                          
                          background-color:#fff;
                          color:#000;
                      }
                      
                      
                  }
                  
            
                 
                 /*Media Query for Desktop Viewport*/
                 
              
                     
                     .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 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;
            }