* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Inter", sans-serif;
  padding-bottom: 5px;
}
body {
  background-color: hsl(0, 0%, 5%);
}
.cont {
  width: 30%;
  margin: 30px auto;
  background-color: hsl(0, 0%, 12%);
  border-radius: 15px;
}
/* .cont{
    line-height: 15px;
} */
.cont > img {
  margin: 5% auto;
  object-fit: cover;
  /* border-top-left-radius: 15px;
  border-top-right-radius: 15px; */
  border-radius: 50%;
  margin-left: 27%;
  margin-right: 27%;
}

.cont > h1 {
  text-align: center;
  color: aliceblue;
  font-weight: 700;
  margin-bottom: 5px;
}
.cont > h3 {
  text-align: center;
  color: yellowgreen;
  font-weight: 500;
  margin-bottom: 6%;
}
.dev {
  text-align: center;
  font-weight: 400;
  color: white;
  margin-bottom: 20px;
}
.medialist > :nth-child(1) {
  text-align: center;
  background-color: hsl(0, 0%, 20%);
  color: #fff;
  font-weight: 400;
  padding-top: 10px;
  padding-bottom: 10px;
  /* margin-left: 10%;
 margin-right: 10%; */
  border-radius: 10px;
  /* margin-bottom: 5px; */
  margin: 4% 10% 4% 10%;
}
.medialist > :nth-child(2) {
  text-align: center;
  background-color: hsl(0, 0%, 20%);
  color: #fff;
  font-weight: 400;
  padding-top: 10px;
  padding-bottom: 10px;
  /* margin-left: 10%;
 margin-right: 10%; */
  border-radius: 10px;
  /* margin-bottom: 5px; */
  margin: 4% 10% 4% 10%;
}
.medialist > :nth-child(3) {
  text-align: center;
  background-color: hsl(0, 0%, 20%);
  color: #fff;
  font-weight: 400;
  padding-top: 10px;
  padding-bottom: 10px;
  /* margin-left: 10%;
    margin-right: 10%; */
  border-radius: 10px;
  /* margin-bottom: 5px; */
  margin: 4% 10% 4% 10%;
}
.medialist > :nth-child(4) {
  text-align: center;
  background-color: hsl(0, 0%, 20%);
  color: #fff;
  font-weight: 400;
  padding-top: 10px;
  padding-bottom: 10px;
  /* margin-left: 10%;
    margin-right: 10%; */
  border-radius: 10px;
  /* margin-bottom: 5px; */
  margin: 4% 10% 4% 10%;
}
.medialist > :nth-child(5) {
  text-align: center;
  background-color: hsl(0, 0%, 20%);
  color: #fff;
  font-weight: 400;
  padding-top: 10px;
  padding-bottom: 10px;
  /* margin-left: 10%;
    margin-right: 10%; */
  border-radius: 10px;
  /* margin-bottom: 5px; */
  margin: 4% 10% 4% 10%;
}
.medialist > :nth-child(6){
  text-align: center;
  background-color: hsl(0, 0%, 20%);
  color: #fff;
  font-weight: 400;
  padding-top: 10px;
  padding-bottom: 10px;
  /* margin-left: 10%;
    margin-right: 10%; */
  border-radius: 10px;
  /* margin-bottom: 5px; */
  margin: 4% 10% 4% 10%;
}
.medialist > :nth-child(1):hover,
.medialist > :nth-child(2):hover,
.medialist > :nth-child(3):hover,
.medialist > :nth-child(4):hover,
.medialist > :nth-child(5):hover,
.medialist > :nth-child(6):hover {
  background-color: yellowgreen;
  color: black;
  cursor: pointer;
}

@media(min-width:481px) and (max-width: 800px){
    .cont{
        width: 45%;
    }
}
@media (max-width: 480px) {
  .cont{
    width: 90%;
  }
}