*{
    padding: 0%;
    margin: 0%;
    box-sizing: border-box;
}
body{
    background-color: hsl(233, 47%, 7%);
}
.hero{
    display: flex;
    justify-content: center;
    align-items: center;
    height:100vh;
}
.container{
    display: flex;
    border: 1px solid black;
    background-color: hsl(244, 37%, 16%);
}
.container1{
    width: 470px;
    padding: 70px;
    color: white;
}
.container1 h1{
    width: 260px;
    margin-bottom: 20px;
}
.container1 span{
    color: hsl(277, 64%, 61%);
}
.container1 p{
    font-size: 16px;
    margin-bottom: 30px;
}
.container2{
    display: flex;
    justify-content:space-between;
}
.container3 img{
      width: 450px;
      opacity: 0.5;
      background-color:hsl(276, 54%, 11%);
}
.container3{
    background-color: hsl(277, 95%, 46%);
}

@media screen and (max-width:576px) {
    *{
    padding: 0%;
    margin: 0%;
    box-sizing: border-box;
}
body{
    background-color: hsl(233, 47%, 7%);
}
.hero{
    display: flex;
    justify-content: center;
    align-items: center;
    height:100vh;
}
.container{
    display: flex;
    flex-direction: column-reverse;
    border: 1px solid black;
    background-color: hsl(244, 37%, 16%);
    text-align: center;
    margin-top: 30px;
}
.container1{
    width: 400px;
    padding: 70px;
    color: white;
}
.container1 h1{
    width: 260px;
    margin-bottom: 20px;
     font-size:30px;
}
.container1 span{
    color: hsl(277, 64%, 61%);
}
.container1>p{
    width: 270px;
    font-size: large;
    /* margin-left: 40px; */
    margin-bottom: 30px;
}
.container2{
    font-size:larger ;
    display: flex;
    flex-direction: column;
    justify-content:space-between;
}
.container3 img{
      width: 400px;
      opacity: 0.5;
      background-color:hsl(276, 54%, 11%);
}
.container3{
    background-color: hsl(277, 95%, 46%);
}
}