style.css

body {
    background-image: url("./images/bg-desktop.svg");
background-color: hsl(257, 40%, 49%);
}

.huddle {
    width: 20%;
}
h1 {
    color: blanchedalmond;
    font-family: "Poppins";
   /* font-size: 35px; */
    font-size: 3vw;
}



.data {
    color: blanchedalmond;
font-family: "Open Sans";
 /*font-size: 15px; */
font-size: 1.5vw;

}

button {
  background-color: blanchedalmond;
  color: hsl(257, 40%, 49%);
  font-family: "Open Sans";
  font-size: 1.3vw;
  width: 30%;
  height: 10%;
  border-radius: 25px;
  border: none;
  box-shadow: 2px 2px 4px #000000;
}

.logo {
   margin: 5% 7%;
}
.pic {
    margin: 0 5% 0 7%;
}
.container {
display: flex;

}

.info {
    width: 45%;
    padding-right: 5%;
}

.social {
    display: flex;
justify-content: flex-end;
margin-right: 7%;
}

@media only screen and (max-width: 375px){
    body {
        background-image: url(./images/bg-mobile.svg);
        background-repeat: no-repeat;
        background-position-y: -50px;
        background-position-x: 5;
    }
    .huddle {
        width: 40%;
        margin-bottom: 10%;
    }
    .container{
        display: inline-block;
        justify-content: center;
    }
   h1, .head {
    display: flex;
       justify-content: center;
       font-size: 6vw;
       text-align: center;
   }
   .info {
       display: contents;
   }
   .data {
       width: 80%;
       font-size: 4vw;
       text-align: center;
       display: table-row;
       justify-content: center;
       margin: 0;
   }
   p {
       margin: 0 6% 5% ;
   }
   button {
    font-size: 3vw;
    width: 40%;
    height: 8vw;
   
   }
   .button {
display: flex;
justify-content: center;
   }
   .social {
      display: flex;
      justify-content: center;
margin: 15% 5% 5%;
   }
   .social-logo {
       margin: 3%;
   }

}