fiction.css

* {
    box-sizing: border-box;
  }
body{
    margin:0px;
    padding:0px;
}
#offer {
    display: flex;
    /* border:1px solid blue; */
    background-color: #004D40;
    color:white;
    text-align: center;
}

#details{
    
    display:flex;
    /* border: 1px solid red; */
    justify-content: space-between;
    
    width:80%;
    margin: auto;
}
#details p{
    font-size: 15px;
    color:#21282d;
}
#details p:hover{
    border-bottom: 1px solid rgb(136, 116, 4);
    cursor: pointer;
}
#details a:hover{
    border-bottom: 1px solid rgb(136, 116, 4);
    cursor: pointer;
}
#details>div:nth-child(2) span{
    color:rgb(243, 208, 8);
}
#details>div:nth-child(1) span{
    /* display: flex; */
   color:rgb(243, 208, 8);
    /* font-size: 30px; */
    /* height:5px; */
    /* margin-right: 5px;
    margin-left: 5px; */
    /* align-content: center; */
    
}
#details>div:nth-child(1){
    display: flex;
    /* border: 1px solid blue; */
    width:60%;
    justify-content: space-between;
    align-items: center;
}
#details>div:nth-child(1)>p{
    margin-right: 1px;
}
#details>div:nth-child(2){
    display: flex;
    /* border: 1px solid blue; */
    width:13%;
    justify-content: space-between;
    align-items: center;
}
#details>div:nth-child(2) a{
    color:black;
    text-decoration: none;
}
#logo{
    display:flex;
    width:80%;
    margin: auto;
    /* border:1px solid black; */
    justify-content: space-between;
    align-items: center;
    
}
#logo input{
    width:700px;
    padding:15px;
    border:1px solid #004D40;
    outline: none;
}
#cat{
    display: flex;
    /* border:1px solid black; */
    align-items: center;
    width:80%;
    justify-content: space-between;
    margin: auto;
}
#cat a{
    text-decoration: none;
    color:black;
}
#cat span{
    color:rgb(197, 169, 9);
}
#deals img{
    width:100%
}
#container>div{
    box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
    border-radius: 10px;
}
#container>div>div{
    
    /* box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px; */
    padding-bottom: 20px;
    padding-left: 20px;
}
#container>div>img{
    width:100%;
    height:600px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    
}
#container>div>div button{
    display: block;
    margin: auto;
    padding: 10px;
    color:white;
    background-color: #004D40;
    border-radius: 5px;
}
#categ{
    padding:10px;
    margin-right: 30px;
} 
#child1>button{
    margin-right: 30px;
    color:white;
    background-color: #21282d;
    border-radius: 5px;
}
#child1>button:hover{
    background-color: rgb(218, 100, 100);
    cursor: pointer;
}
#last{
    text-align: center;
    color:white;
    background-color: #004D40;
    
    padding-top: 0.5px;
    padding-bottom: 0.5px;
    margin-bottom: 50px;
}
#display{
    /* border: 1px solid red; */
    width:70%;
    margin: auto;
    /* text-align: center; */
}
#display>p{
    text-align: center;
    margin: 0px;
}
#display>p:nth-child(1){
    margin:0px;
    color:green;
    font-size: 15px;
}
#display>h2{
    text-align: center;
    margin-top: 5px;
    margin-bottom: 0px;
}
#display>p:nth-child(2){
    margin-bottom: 30px;
    
}
#container{
    /* border:1px solid blue; */
    display: grid;
    grid-template-columns: 31% 31% 31%;
    gap:30px;
    
}
#child1{
    display: flex;
    /* justify-content: space-between; */
    margin-bottom: 50px;
    margin-top: 30px;
}
/* #container>div img{
    width:100%;
    height:400px;
} */

#limage>div{
    display: flex;
    flex-direction: column;
    /* border: 1px solid red; */
}
#limage{
    display: flex;
    width:80%;
    margin: auto;
    justify-content: space-between;
    margin-top: 70px;
}
#limage>div i{
    display: block;
    margin: auto;
}
#bottom-div{
    width:80%;
    margin: auto;
    border-top: 1px solid gray;
    display: flex;
    justify-content: space-between;
}
#bottom-div p{
    font-size: 13px;
    color:green
}
#bottom-div p:hover{
    text-decoration: underline;
    cursor: pointer;
   
}
#bottom-div>div:nth-child(5)>h5{
    margin-bottom: 0px;
}
#bottom-div>div:nth-child(5) input{
    width:265px;
    padding-top: 5px;
    padding-bottom: 5px;
    border:1px solid gray;
    outline: none;
    margin:0px;
}
#bottom-div>div:nth-child(5) button{
    padding-top: 6px;
    padding-bottom: 6px;
    padding-left: 7px;
    padding-right: 7px;
    background-color: #004D40;
    color:white;
    border: none;
    margin:0px;

}
#bottom-div>div:nth-child(5) p{
    color:black;
    text-decoration: none;

}
#limg{
    display: flex;
    align-items: center;
    margin-top: 30px;
    justify-content: space-between;

}

#ldiv{
    display: flex;
    border-top: 1px solid gray;
    width:80%;
    margin: auto;
    justify-content: space-between;
    align-items: center;
}
#ldiv>div{
    display: flex; 
    /* border:1px solid red; */
    width:60%;
    justify-content: space-between;
}
#ldiv>div p{
    color:gray;
    font-size: 13px;
}
#ldiv>p{
    font-size: 13px;
    /* padding-top: 10px; */
    
}