/*
    Student Name: Prathamesh Kamat
    File Name: Web Development
    Date: March 10 2026
*/
CSS Reset,
head,body, header, nav, main, footer,.tab-desk,img, h1, h2, h3, p, ul, li,aside, figure, figcaption {
  margin: 0;
  padding: 0;
}

aside{
    text-align: center;
    font-size: 1.5em;
    font-weight: bold;
    text-shadow: 4px 4px 10px #c5a87c;
}
/*
figure{
    border: 4px solid #2a1f14;
    box-shadow: 6px 6px 10px #c5a687;
    max-width: 100%;
    display: block;
    height: auto;
    margin:2% auto;
}
figcaption{
    padding: 2%;
    border-top: 4px solid #2a1f14;
}
*/
/* Style rules for body and images*/
body{
    background-color: #f6eee4;
}

iframe{
   max-width: 100%;
    display: block;    
}

/* Style rules for mobile viewport*/

/* Style rules to show mobile class and hind tab-desk calss */


/*.tab-desk {
  display: none;     Hide desktop tab content 
}*/

/* Style rules for header area*/
.mobile h1{
    font-family: 'Emblema One', sans-serif;
    padding: 2%;
    text-align: center;
}
.mobile h3{
    font-family: 'Lora', sans-serif;
    padding: 2%;
    text-align: center;
}/*
header {
  display: flex;
  align-items: center;        
  justify-content: space-between; 
}*/

/* Style rules for navigation area */



/* style rules for main content*/
main{
    padding: 2%;
    font-family: 'Lora', sans-serif;

}
main p{
    font-size: 1.25em;
}
main h3{
    padding-top: 2%;
}
main ul{
    list-style-type: square;
}
.link{
    color: #4d3319;
    font-style: normal;
    font-weight: bold;
    font-style: italic;
}
.action{
    font-size: 1.75em;
    font-weight: bold;
    text-align: center;
} 
.round{
    border-radius: 6px;
}
#info ul{
    margin-left: 10%;
}
#contact{
    text-align: center;
}
.tel-link{
    background-color: #2a1f14;
    padding:2%;
    width: 80%;
    margin-bottom: 0%;
    margin-top: 0%;
    margin-left: auto;
    margin-right: auto;
}
.tel-link .round{
    color: #2a1f14;
    text-decoration: none;
    font-weight: bold;
}

/* Style rules for footer content */
footer{
    font-size: 0.85em;
    background-color: #2a1f14;
    padding-top: 1%;
    padding-bottom: 1%;
    padding-left: 0%;
    padding-right: 0%;
    text-decoration: none;
    color: #f3e6d8;
}

/*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*/
/* Media Query for Mobile */
/*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*/
@media screen and (max-width: 767px)  {
  nav li {
    display: block;    
  }

  /* Mobile Viewport: style rule for nav area */
    header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 10 0 0px;
        background-color: #c8c8c6;
        height: 130px;
    }
    /* Mobile Viewpoint: hide tab-desk class, show mobile class*/
    .mobile-nav{
        display:block;
    }
    #nav-links{
        display:none;
    }
    .mobile {
        display: block; 
        width: 100%;
        text-align: center;
    } 

    .tab-desk {
        display: none;    
    } 
    .Mainmenu{
        display: none;
    }
    .mobile-nav a{
        color:fff;
        text-align: center;
        font-size: 2em;
        text-decoration: none;
        padding: 3%;
        display: block;
    }
    .mobile-nav a.nav-icon{
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        color: #f6eee4;
        padding: 2%;
    }
    .nav-icon div{
        height: 40px;
        width: 40px;
        color: #2a1f14;
    }
    
    /* Logo */
    .Alogo{
    height: 100%;   /* scales nicely inside header */
    width:100%;
    display: block;
    
    }
      
    /* Optional hover */
    .mobile-nav a:hover {
        /*opacity: 0.7;*/
        color: #2a1f14;
        background-color: #f6eee4;
    }
    /* Home Page Picture style */
    .round{
    height: 300px;
    width: 300px;
    display: block;
    }

    /* Homework Page Sytle */
    .Homework{
        display: inline-block;
        align-items: center;   
        height: 100%;
        text-decoration: none;
        font-size: 20px;
        font-family: Geneva, Arial, sans-serif;
        font-weight: bold;
        color: black;  
    }

    /* Cargallery Page Style */
    .grid{  /*one frames per screen*/
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        /*gap: 30px;*/
        max-width: 767px; /*Mobile width */
        margin: 0 auto;
        width: 100%;
    }
    .grid figure {
        margin: 0;
    }
    .grid img {
        width: 100%;
        height: 250px;
        object-fit: cover;
        display: block;
    }

    aside{
        grid-column: 1 / span 3;
        font-size:  20px;
        font-family: Geneva, Arial, sans-serif;
        font-weight: bold;
        text-align: left;
        color: black; 
    }
    /* You Tube page*/
    .grid video {
        width: 100%;
        height: 250px;
        object-fit: cover;
        display: block;
        border: 4px solid #2a1f14;
        box-shadow: 6px 6px 10px #c5a687;
    }
    /* Contact page */

    #contact{
        text-align: center;
    }
    .tel-link{
        background-color: #2a1f14;
        padding:2%;
        width: 80%;
        margin-bottom: 0%;
        margin-top: 0%;
        margin-left: auto;
        margin-right: auto;
    }
    .tel-link .round{
        color: #2a1f14;
        text-decoration: none;
        font-weight: bold;
    }
    #questions p{
        cursor: pointer;
    }
    #answer {
        text-align: center;
        font-weight: bold;
        margin: 0 auto;
    }
    /*#answer {
        display:none;
    }*/
    iframe{
        height: 300px;
        width: 100%;
        display: block;
        margin: 0 auto;
        border: 4px solid #2a1f14;
        box-shadow: 6px 6px 10px #c5a687;  
    }
}

/*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*/
/* Media Query for Tablet and Desktop Viewport*/
/*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*/

@media screen and (min-width: 768px)  {
/* Desktop Viewport: style rule for nav area */
    header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 10 0 0px;
        background-color: #150331;
        height: 130px;
        width: 100%;/*last change*/
    }
    /* Desktop Viewpoint: show tab-desk class, hide mobile class*/
    .mobile-nav{
        display:none;
    }
    #nav-links{
        display:none;
    }
    /* Desktop Viewpoint: show tab-desk class, hide mobile class*/
    .mobile {
    display: none;   /* Hide mobile content as block */
    }
    .tab-desk {
    display: block;    /* Display desktop tab content */
    } 
    
    /* Logo */
    .Alogo{
    height: 100%;   /* scales nicely inside header */
    width:100%;
    display: block;
    
    }
    /* Make both sides fill header height */
    .tab-desk {
        display: flex;
        /*align-items: left;*/
        height: 100%;
        width: auto;
    } 

    .Mainmenu nav {
        display: flex;
        align-items: center;
        height: 100%;
        padding-right: 40px;
        margin-right: 5px;
    } 
    
    /* Navigation */
    .Mainmenu ul {
        display: flex;
        align-items: center;
        height: 100%;
        list-style: none;
        margin: 0;
        margin-right: 5px;
        padding: 0;
    }

    .Mainmenu li {
        margin-left: 40px;
        display: flex;
        align-items: center;
    }

    /* Links */
    .Mainmenu a {
        display: flex;
        align-items: center;   
        height: 100%;
        text-decoration: none;
        font-size: 30px;
        font-family: Geneva, Arial, sans-serif;
        font-weight: bold;
        color: #f6eee4;
    }

    
    /* Optional hover */
    .Mainmenu a:hover {
        /*opacity: 0.7;*/
        color: #2a1f14;
        background-color: #f6eee4;
    }
    /* Home Page Picture style */
    .round{
    height: 600px;
    width: 600px;
    display: block;
    }

    /* Homework Page Sytle */
    .Homework{
        display: inline-block;
        align-items: center;   
        height: 100%;
        text-decoration: none;
        font-size: 20px;
        font-family: Geneva, Arial, sans-serif;
        font-weight: bold;
        color: black;  
    }

    /* Cargallery Page Style  and (max-width: 1279px)*/
    @media screen and (min-width: 1024px)  {
        
         .grid{
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
            /* max-width: 1024px; desktop width */
            margin: 0 auto;
            /*width: 100%;*/
            border: 4px solid #2a1f14;
            box-shadow: 6px 6px 10px #c5a687;
        }
          
    }

    /* tablet */
    @media screen and (min-width: 768px) and (max-width: 1023px) {
        .grid{
        display: grid;
        grid-template-columns:1fr 1fr;/* display in two columns*/
        gap: 10px;
        }
        .grid figure {
            margin: 0;
        }
        .grid img {
            width: auto;
            height: auto;
            /*object-fit: cover;*/
            display: block;
            border: 4px solid #2a1f14;
            box-shadow: 6px 6px 10px #c5a687;
        }
    }
    aside{
        /*grid-column: 1 / span 3;*/
        font-size:  20px;
        font-family: Geneva, Arial, sans-serif;
        font-weight: bold;
        text-align: left;
        color: black; 
    }
    /* car picture page*/
    .grid figure img {
        width: 100%;
        height: 250px;
        object-fit: cover;
        display: block;
        border: 4px solid #2a1f14;
        box-shadow: 6px 6px 10px #c5a687;
    } 
    /* You Tube page*/
    .grid video {
        width: 100%;
        height: 250px;
        object-fit: cover;
        display: block;
        border: 4px solid #2a1f14;
        box-shadow: 6px 6px 10px #c5a687;
    }

       /* Contact page */

    #contact{
        text-align: center;
    }
    .tel-link{
        background-color: #2a1f14;
        padding:2%;
        width: 80%;
        margin-bottom: 0%;
        margin-top: 0%;
        margin-left: auto;
        margin-right: auto;
    }
    .tel-link .round{
        color: #2a1f14;
        text-decoration: none;
        font-weight: bold;
    }
    #questions p{
        cursor: pointer;
    }
    #answer {
        text-align: center;
        font-weight: bold;
        margin: 0 auto;
    }
    /*#answer {
        display:none;
    }*/
    iframe{
        height: 300px;
        width: 100%;
        display: block;
        margin: 0 auto;
        border: 4px solid #2a1f14;
        box-shadow: 6px 6px 10px #c5a687;  
    }

}


/* Media query for print*/
@media print{
    body{
        background-color: white;
        color: black;
    }
}