main {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 120px;
}
.container {
  max-width: 1200px;
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.sol {
  max-width: 810px;
  width: 100%;
  margin-left: 20px;
  display: flex;
  flex-direction: column;
}

.sol h1 {
  font-size: 30px;
  font-weight: 600;
}
.detay {
  display: flex;
  margin: 20px 0;
  align-items: center;
  justify-content: space-around;
  width: 220px;
}
.konu {
  font-size: 15px !important;
  font-weight: 400;
}
.sure {
  font-size: 15px !important;
  font-weight: 400;
  padding: 0 !important;
  width: 135px;
  height: 25px;
  background-color: #c7ffc2;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 25px;
  overflow: visible;
}
.sol h2 {
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 20px;
  line-height: 25px;
  padding: 0 5px;
}
.resim {
  width: 90%;
  height: 300px;
  background-size: cover;
  background-position: center;
  margin: 20px 0;
}

.sol h3 {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 20px;
}
.sol p {
  font-size: 19px;
  font-weight: 400;
  line-height: 32px;
  padding: 5px;
  margin-bottom: 20px;
}

.aside {
  width: 320px;
  margin-top: 50px !important;
  margin: 0 20px;
}
.aside h2 {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 10px;
  color: rgb(53, 53, 53);
}
.populer {
  width: 100%;
  background-color: #e0ffdd;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 10px 0;
  transition: 200ms;
}
.populer:hover {
  background-color: #c1ffba;
}
.aside-resim {
  width: 100px;
  height: 100px;
  background-size: cover;
  background-position: center;
}
.populer h3 {
  font-size: 20px;
  width: 200px;
}
a {
  color: black;
}
.vki {
  width: 100%;
  display: flex;
  justify-content: start;
}
.kutu {
  width: 250px;
  height: 230px;
  background-color: lime;
  border-radius: 25px;
  text-align: center;
}
input[type="text"] {
  color: #000000;
  padding: 10px;
  margin-top: 25px;
  border-radius: 10px;
  border: none;
  outline: none;
  transition: 0.1s;
}

input[type="text"]:focus {
  border-radius: 6px;
  box-shadow: 1px 1px 18px 1px #cecece;
}

input[type="button"] {
  padding: 9px;
  margin: 10px;
  background-color: white;
  border-radius: 10px;
  cursor: pointer;
  border: none;
  outline: none;
}

.kutuanimasyon {
  width: 730px;
  height: 300px;
  background: url(../images/animasyonbg.svg);
  background-size: cover;
  background-position: center;
  margin-bottom: 20px;
}
.pota {
  width: 150px;
  position: absolute;
}
.top {
  width: 60px;
  margin-top: 100px;
  margin-left: 450px;
  animation: basket 5s infinite;
}
@keyframes basket {
  0% {
    margin-top: 100px;
    margin-left: 450px;
  }
  10% {
    margin-top: 150px;
    margin-left: 450px;
  }
  20% {
    margin-top: 100px;
    margin-left: 450px;
  }
  30% {
    margin-top: 150px;
    margin-left: 450px;
  }
  40% {
    margin-top: 100px;
    margin-left: 450px;
  }

  70% {
    margin-top: 5px;
    margin-left: 70px;
  }

  100% {
    margin-top: 150px;
    margin-left: 70px;
  }
}

input[type="button"]:focus {
  box-shadow: 1px 1px 13px 1px #c0c0c0;
}

.yazi {
  font-size: 16px;
  color: white;
}
@media screen and (max-width: 1200px) {
  .aside {
    display: none;
  }
  .container {
    justify-content: space-around;
  }
}
@media screen and (max-width: 800px) {
  .resim {
    height: 200px;
  }
}
@media screen and (max-width: 760px) {
  .vki {
    justify-content: center;
  }
}
.aside-resim1 {
  background-image: url("../images/patates.png");
}
.aside-resim2 {
  background-image: url("../images/vki.png");
}
.aside-resim3 {
  background-image: url("../images/parkur.webp");
}
.aside-resim4 {
  background-image: url("../images/kreatin.webp");
}
.aside-resim5 {
  background-image: url("../images/paten.webp");
}
.aside-resim6 {
  background-image: url("../images/kafein.webp");
}

.resim1 {
  background-image: url("../images/patates.png");
}
.resim2 {
  background-image: url("../images/vki.png");
}
.resim3 {
  background-image: url("../images/parkur.webp");
}
.resim4 {
  background-image: url("../images/kreatin.webp");
}
.resim5 {
  background-image: url("../images/paten.webp");
}
.resim6 {
  background-image: url("../images/kafein.webp");
}
.resim7 {
  background-image: url("../images/tuz.webp");
}
.resim8 {
  background-image: url("../images/dogayuruyusu.webp");
}
.resim9 {
  background-image: url("../images/low-carb-diyeti.webp");
}