* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}
/* body { */
/* width: 100%; */
/* height: 100%; */
/* background-color: green; */
/* } */
body{
  /* background: url(/images/bg-pattern-bottom-desktop.svg),url(/images/bg-pattern-top-desktop.svg); */
  background-position: left bottom,0% 0%;
  background-repeat: no-repeat;
  background-size: contain;
  padding: 20px;
}
.container {
  margin: 20px auto;
  position: relative;
  height: 10%;
  /* background-color: black; */
}
.cover {
  display: flex;
  /* transform: translate(0px, -350px); */
  margin: 20px auto;
  /* margin-left: 100px; */
  /* background-color: yellow; */
}

.ptone {
  width: 50%;
}
.ptone h1 {
  line-height: 45px;
  padding-bottom: 20px;
  color: hsl(300, 43%, 22%);
  font-family: sans-serif;
  /* background-color: red; */
  font-size: xx-large;
  font-weight: 900;
}
.ptone p {
  line-height: 25px;
  font-size: small;
  color: hsl(303, 10%, 53%);
}
.linetwo {
  transform: translate(30px, 0px);
}
.linethree {
  transform: translate(60px, 0px);
}
#color {
  margin-left: 100px;
  background-color: hsl(300, 24%, 96%);
  margin-top: 10px;
  padding: 10px;
  border-radius: 8px;
}
.boxes {
  display: flex;
  gap: 10px;
  position: absolute;
  margin-top: 80px;
  /* background-color: red; */
  /* top: 0px; */
  /* transform: translate(0px, -10px); */
}
.name {
  border-radius: 100%;
  width: 15%;
  /* padding-bottom: 30px; */
}
/* .background { */
/* background-color: rebeccapurple; */
/* } */
.span {
  display: flex;
  align-items: center;
  gap: 20px;
}
.write {
  color: hsl(300, 24%, 96%);
  line-height: 25px;
  font-family: sans-serif;
  padding-top: 30px;
  letter-spacing: 2px;
}
.one {
  width: 30%;
  padding: 30px;
  /* padding-bottom: 10px; */
  border-radius: 10px;
  transform: translate(0px, -70px);
  margin-left: 100px;
  margin-top: 10px;
  background-color: hsl(300, 43%, 22%);
}
#a {
  margin-left: 10px;
  /* margin-top: 20px; */
  transform: translate(0px, -50px);
}
#b {
  margin-left: 10px;
  margin-right: 150px;
  /* margin-top: 40px; */
  transform: translate(0px, -30px);
}
.name {
  color: white;
  font-family: sans-serif;
  font-weight: bold;
}
.verified {
  color: hsl(333, 80%, 67%);
}
@media screen and (min-width: 300px) and (max-width: 1000px) {
  .cover {
    /* background-color: blue; */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* text-align: center; */
    width: 100%;
    margin-top: 0px;
    margin-left: 0px;
  }
  /* br{
    display: none;
  } */
  .top,.bottom{
    width: 100%;
    display: none;
    /* background-color: red; */
  }
  .ptone{
    /* background-color: purple; */
    /* margin-top: 95%; */
    width: 100%;
    text-align: center;
  }
 #color{
  margin-left: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  font-weight: 800;
  font-family: sans-serif;
  width: 100%;
 } 
 .boxes{
  /* display: none; */
  flex-direction: column;
  width: 100%;
 }
 body{
  /* background: url(/images/bg-pattern-bottom-mobile.svg),url(/images/bg-pattern-top-mobile.svg); */
  /* background-position: 100% 100%,0% 0%; */
  padding: 10px;
 }
 .one{
  width: 100%;
  margin-left: 0px;
  /* margin-top: 160%; */
  /* transform: translate(0px); */
 }
 #a,#b{
  margin-top: 10px;
 }
 .linetwo,.linethree{
  transform: translate(0px);
  margin-left: 0px;
 }
}