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



body{
    background-color:  hsl(233, 47%, 7%);

}

.text{
    background-color:  hsl(244, 38%, 16%);
    margin: 130px auto;
    display: flex;
    flex-direction: row;
    align-items:center;
    width: 800px;
    justify-content: space-around;
    border-radius: 9px;
    font-family: "Inter", serif;
    font-optical-sizing: auto;
    font-weight:400, 700;
    font-style: normal;
  
}
.content{
    padding: 20px;  
    margin: 19px;
}
.last{
    display: flex;
    flex-direction: row;
    align-items:center;
    justify-content: space-evenly;
    margin: 30px auto;
}

img{
    width: 400px;
    height: 320px;
    filter: hue-rotate(hsl(277, 64%, 61%));
    border-radius:0 10px 10px 0;
}
a:hover{
    background-color: hsl(277, 64%, 61%);
}h3{
    color:  hsl(0, 0%, 100%);
    margin: 20px auto;
}
h4{
    color:  hsl(0, 0%, 100%);
}
p{
    color:  hsla(0, 0%, 100%, 0.75);
    font-size: 15px;
}
span{
    margin: 0 10px;
}
b{
    color: hsl(277, 64%, 61%);
}

@media (max-width:600px) {
    .text{
        background-color:  hsl(244, 38%, 16%);
        display: flex;
        flex-direction:column-reverse;
        align-items:center;
        text-align: center;
        width: 320px;
        
        
    }
    img{
        width: 320px;
        height: 300px;
        border-radius:  9px 9px 0 0;
    }
    .last{
        display: flex;
        flex-direction: column;
        align-items:center;
        justify-content: space-evenly;
        margin: 20px auto;

    }
    p{
    margin: 10px 40px;
    }
    span{
        margin: 10px auto;
    }
    
    
}