*{box-sizing: border-box;}

body{margin: 0;
    background-color: rgb(183 133 108);
    background-image:url(bbg.jpg);
    background-size: cover;
  
}
.grid-container{
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-areas:
        'header header'
        'menu menu'
        'left right'
        'footer footer';
    gap: 10px;
    background-image: url(bg.jpg);
    background-size: cover;
    padding: 10px;
    box-shadow: 0 0 40px 0 rgba(0,0,0,0.2);
    opacity: calc(0.9);
}

.grid-container > *{
    background-color:beige;
    text-align: center;
    padding: 20px 0px;  
    font-size: 1.5em;
    border: 3px solid hotpink;
    border-radius: 10px;
    opacity:calc(0.9);

}

@media screen and (max-width:992px) {
    main{
        width: 100%;
    }    
}
@media screen and (max-width:600px) {
    main{
        width: 100%;
    }    
}
main{
    width: 100%;
    max-width: 100%;
    margin: auto;
}

header{ grid-area: header;
    text-shadow: 1px 1px  tomato;
    font-family:  "Sofia", sans-serif;
}


nav{ grid-area: menu;
 }
article {grid-area: left;}
aside {grid-area: right;}
footer {grid-area: footer;
    font-family:  "Sofia", sans-serif;}

h1{
    text-align: center;
}
ul {
    list-style-type:circle;
    margin: 0;
    padding: 0;
  }
  
li {
    display: inline;
    border: 2px solid salmon;
    padding : 5px;
    border-radius: 5px;
  
   
}
li a, .dropbtn {
    
    
    text-align: center;
    text-decoration: none;
    
 
    border-radius: 5px
}
.dropdown:hover .dropbtn {
    background-color:bisque;
  }
li.dropdown  {
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: brown;
    min-width: 100px;
    box-shadow: 2px 2px blueviolet;
    z-index: 1;
}
.dropdown-content a{
    color: rgb(0, 0, 0);
    padding: 12px 15px;
    text-decoration: none;
    display: block;
    text-align: center;
}
.dropdown-content a:hover{
    background-color: aqua;
    color: black;
}
.dropdown:hover .dropdown-content{
    display: block;
}
h1{
   
    color: darkorange;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
p{
    color: darkgoldenrod;
}

.one {
    background-color:burlywood;
  }
.samosa p{
    padding: 10px;
    float: left;
  
}
.PT {
    padding: 10px;
    float: right;
}   
.aloo{
    padding: 10px;
}