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

body{
background-image:url("pattern-background-desktop.svg");
background-repeat:no-repeat;
display:flex;
justify-content:center;
align-items:center;
height:100vh;
}

.main{
width:100%;
max-width:350px;
background-color:#e0e8ff;
border-radius:20px;
box-shadow: 0px 5px 5px grey;
}
.mainimage{
border-radius:20px 20px 0px 0px;
margin-bottom:20px;
width:100%;
}
h1,p{
margin:20px;
text-align:center;
}
.second{
display:flex;
justify-content:space-between;
align-items:center;
background-color:#f8f9fe;
border-radius:20px;
padding:15px;
margin:20px;

max-width:400px;
}
.hed{
padding:10px;
background-color:#382ae1;
border-radius:5px;
margin:20px;
color:white;
text-align:center;
font-size:18px;
cursor:pointer;
}
.hed:hover{
background-color:blue;
transition-duration: 0.4s;
}
.bed{
margin:20px;
text-align:center;
font-size:18px;
color:#757a8d;
cursor:pointer;
}
.bed:hover{
color:black;
}
@media only screen and (max-width:399px){
body{
background-image:url("pattern-background-mobile.svg");
background-repeat:no-repeat;
object-fit:cover;
}
}