style.css

*{
    margin : 0px;
    padding : 0px;
    box-sizing: border-box;
}

body {
    background-color: rgba(188, 240, 234, 0.986);
}

h1 {
    text-align: center;
    padding : 10px;
    text-decoration: underline rgba(69, 151, 62, 0.753) 4px double;

}
nav{
    height : 30px;
    width : 100vw;
    background-color: aliceblue;
    font-size:  1.3rem;
    
}
nav a{
    padding : 10px;
    text-decoration: none;
    color : black;
    padding : 10px;
    margin-top : 3px;
}

/* indian-recipes */
h2{
    text-align : center;
    padding-bottom: 10px;

}
.center{
    display : block;
    margin-left  :  auto;
    margin-right  : auto;
    width : 50%;
    margin-bottom : 30px;
    margin-top : 10px;
}

hr{
    height  : 10px;
    background-image: linear-gradient(to right, red , yellow);   
}

/* recipe items */
.recipe-item {
    height : auto;
    width : auto;

}

.header {
    font-size: 20px;
    height : 30px;
    /* width : 0%; */
    display : flex;
    margin-top: 10px;
    margin-bottom : 10px;
    /* border : 2px solid red; */
}
.index {
    margin : 5px;
    padding : 3px;
    border-right : 1px solid black;
    align-self: center;
}

.title {
    margin : 5px;
    align-self: center;

}

.recipe-img {
    height : 15rem;
    width : 30rem;
}

.btn {
    cursor : pointer;
    height : 20px;
    width : 11rem;
    background-color: rgb(255, 115, 0);
    color: white;
    font-weight: 700;
    text-transform: uppercase;
    padding : 22px;
    
    margin : 20px;
    letter-spacing: .10rem;
    margin-left : 120px;
    padding-top: 10px;
}
.btn a {
    text-decoration: none;
    color : white;
    text-align: center;
}

.btn a:hover {
    color : gray;
    /* background-color: rgb(219, 101, 22); */
    transition :cubic-bezier(1, 0, 0, 1)
}