@import url("./reset.css");
@import url("./variables.css");
@import url("./typography.css");
@import url("./nav.css");
@import url("./footer.css");
@import url("./hero.css");
@import url("./projects.css");
@import url("./flowers.css");

body {
  position: relative;
  color: var(--text-main);
  background-color: var(--bg-main);
  background: radial-gradient(circle at 0% 0%, var(--bg-hero), var(--bg-main) 20%);
  display: grid;
  grid-template-columns: minmax(1rem, 1fr) minmax(250px, 1200px) minmax(1rem, 1fr);
  /* cursor: url('data:image/svg+xml;utf8,<svg width="40" height="40" viewBox="0 0 127 127" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.0045 113.045C32.6371 119.256 51.2697 125.467 66.044 121.42C80.8183 117.374 91.1697 102.882 96.5022 88.1704C101.835 73.4588 101.835 58.9669 98.7293 47.3607C93.0529 26.1458 74.7329 14.8008 59.0803 8.52721C51.9572 5.67228 45.498 6.39419 40.2281 9.49961C28.8197 16.2224 24.4814 33.4961 21.3446 49.1487C18.6676 62.5072 22.3484 75.3409 30.6609 87.8567C35.5696 95.2475 47.2546 100.373 58.798 102.537C70.3414 104.701 82.7631 102.631 91.2324 96.3888C108.009 84.0237 108.108 56.7084 103.968 33.747C101.958 22.603 91.5461 14.9263 82.1043 9.62509C63.6874 -0.715325 45.4352 2.19089 32.9194 7.39796C26.4175 10.103 20.4036 14.6753 16.1689 19.9138C7.95199 30.0784 7.73096 50.1838 12.9067 76.2506C19.1655 107.772 45.3098 121.389 57.8256 124.526C70.0099 127.58 85.0216 121.452 99.639 111.038C114.245 100.632 116.452 81.74 119.589 68.189C123.12 52.9348 116.515 37.8249 105.066 25.3091C90.4556 9.33806 64.3187 6.39419 41.3574 10.5348C19.1649 14.5367 11.9343 37.6994 8.79747 50.2152C5.74376 62.3995 9.80124 75.3409 20.184 88.8919C36.9958 110.833 64.1305 115.115 76.6463 118.252C82.849 119.807 89.1621 119.319 95.4671 112.073C111.932 93.1499 114.382 69.1928 110.241 55.6419C104.409 36.555 83.0768 27.348 69.5258 21.0744C62.5894 17.8631 53.9046 18.9414 46.5331 24.1171C39.1616 29.2928 32.9508 39.6442 30.7864 50.1525C28.622 60.6607 30.6923 71.0121 34.8642 79.4501C39.0362 87.8881 45.247 94.0989 51.552 97.2985C63.0719 103.144 80.8183 100.498 97.5374 96.3574C104.91 94.5315 105.975 83.9357 106.007 74.494C106.038 65.0522 103.968 54.7008 99.7959 46.2628C95.6239 37.8249 89.4131 31.614 83.1081 29.4496C76.8032 27.2852 70.5923 29.3555 66.3576 34.5626C62.123 39.7697 60.0527 48.0508 60.0213 56.4574C59.9899 64.864 62.0602 73.1452 68.3025 79.4815C74.5447 85.8178 84.8961 89.9584 95.4044 86.9157C105.913 83.873 116.264 73.5216 121.597 65.0836C126.929 56.6456 126.929 50.4348 122.789 43.0947C112.983 25.7117 95.6239 16.8711 83.1081 16.8397C68.118 16.8021 62.123 39.7697 60.0213 55.4223C59.0404 62.7282 62.0602 69.0046 66.2322 72.2041C70.4041 75.4037 76.615 75.4037 81.8848 71.2631C94.1386 61.6351 95.5612 39.9579 92.4558 24.2739C91.2572 18.2206 83.1395 18.9414 77.8697 23.0819C65.6159 32.7099 64.1932 56.4574 68.3338 76.3133C70.0709 84.6436 80.7555 85.8178 87.0918 81.7086C93.4282 77.5994 97.5687 67.248 96.5963 58.81C95.6239 50.372 89.4131 44.1612 83.1081 44.0671C76.8032 43.973 70.5923 50.1838 67.3928 56.4888C61.5469 68.0087 64.1932 81.6145 67.2987 91.0249C68.696 95.2591 76.615 94.2244 79.8145 86.9784C88.6898 66.8785 80.9437 44.0985 74.7015 33.6529C71.6521 28.5501 64.3187 27.348 60.084 29.3869C50.7288 33.8913 51.6461 56.4574 55.7866 78.3836C57.7104 88.5708 68.2083 94.0989 75.5798 97.2985C82.9513 100.498 89.1621 100.498 94.4319 97.3926C99.7018 94.2872 103.842 88.0763 105.975 80.7362C110.375 65.5963 106.038 48.3018 99.7959 32.6492C96.6583 24.7816 89.4131 19.0668 83.1081 16.9024C76.8032 14.7381 70.5923 16.8083 65.3225 24.0857C52.5182 41.7678 51.6461 62.7937 52.6812 75.3095C53.2079 81.6772 55.7866 87.8254 62.0289 92.06C68.2711 96.2947 78.6225 98.365 88.0956 94.2558C109.103 85.1435 116.452 60.8489 119.589 45.1963C121.053 37.8933 120.656 31.614 116.515 24.2739C112.374 16.9338 104.093 8.65268 95.6867 4.38664C87.2801 0.120601 78.9989 0.120601 68.522 8.40174C42.0156 29.3529 32.8253 62.731 34.8956 84.6572C35.81 94.3415 41.1064 100.373 47.38 101.502C53.6536 102.631 61.9348 98.4905 68.2711 91.1817C81.722 75.6666 83.014 56.6456 78.8734 43.0947C76.4108 35.0351 66.4517 27.4734 59.0803 22.1723C51.7088 16.8711 45.498 14.8008 39.193 18.91C23.1708 29.3524 18.2079 50.2466 16.1062 64.8327C14.9118 73.1223 18.1451 83.5593 22.3171 91.9973C26.489 100.435 32.6998 106.646 41.0751 109.846C49.4503 113.045 59.8017 113.045 67.2046 109.94C74.6074 106.834 78.748 100.623 80.881 93.2834C85.2806 78.1435 78.8734 62.9192 69.4944 51.4385C60.1182 39.9613 41.2947 35.6918 23.5404 35.6605C9.35209 35.6354 5.66068 56.5202 2.52388 69.036C-0.529831 81.2203 7.66823 96.232 20.184 109.814C30.027 120.496 45.3098 119.319 57.8256 117.248C71.6104 114.968 82.9513 98.4905 92.3617 78.6973C103.611 55.0353 91.4206 31.5513 82.0416 20.0706C72.6654 8.59334 57.9824 4.3239 44.4314 4.29254C26.7657 4.25164 18.2079 25.1522 14.0359 39.7383C8.75995 58.1844 9.80125 77.4112 15.0083 93.0638C17.5371 100.665 22.2857 106.646 31.6647 109.846C41.0437 113.045 55.5357 113.045 66.1067 110.975C76.6777 108.905 82.8885 104.764 87.1232 98.4905C91.3579 92.2169 93.4282 83.9357 91.3893 75.5291C89.3503 67.1225 83.1395 58.8414 74.7642 54.5753C66.389 50.3093 56.0376 50.3093 48.6348 53.4147C41.2319 56.5202 37.0914 62.731 33.9232 71.1062C30.755 79.4815 28.6847 89.8329 31.7588 98.2709C34.8329 106.709 43.114 112.92 51.5206 116.119C59.9272 119.319 68.2083 119.319 73.5095 114.143C85.808 102.136 83.014 81.74 80.9437 69.2242C79.8607 62.677 74.7329 56.7084 70.5296 56.6143C66.3263 56.5202 62.1857 62.731 59.0175 70.0711C55.8494 77.4112 53.7791 85.6923 56.8532 89.9584C59.9272 94.2244 68.2083 94.2244 72.4744 85.9433C76.7404 77.6621 76.7404 61.0999 74.6701 56.7084C72.5999 52.3169 68.4593 60.598 67.3614 60.7235C59.2011 61.6561 68.3966 37.8249 63.1895 31.5199C60.0527 31.4258 55.9121 37.6367 55.8494 44.9768C55.7866 52.3169 59.9272 60.598 64.1932 69.1301" stroke="black" stroke-width="2" stroke-linecap="round"/></svg>') 12 12, auto; */
  overflow-x: hidden;
}

.body--about{
  background: radial-gradient(circle at 0% 0%, var(--pink), var(--bg-main) 80%);
}

@media screen and (min-width: 1000px){
  .projects:after {
    content: "";
    position: absolute;
    top: 25%;
    right: 0%;
    transform: translateX(50%);
    width: 100vmax;
    height: 100vmax;
    background: radial-gradient(circle at 50% 50%, var(--bg-hero), transparent 50%);
    z-index: -1;
  }
}

.projects,
.about,
.services,
.flowers {
  padding: 5rem 0;
  grid-column: 2 / 3;
}

.path {
  grid-column: 1 / 4;
}

.curve {
  height: auto;
  margin-left: -2rem;
}

#textPath {
  fill: var(--blue);
  font-size: calc(200px + 7vmax);
  font-weight: 400;
}

#curve{
  stroke-width: 24rem;
}

@media screen and (min-width: 800px){
  #textPath {
    font-size: calc(50px + 7vmax);
  }

  #curve{
    stroke-width: 12rem;
  }
}

.about {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 1rem;
  align-items: center;
  padding: 3rem 0 5rem 0;
}

.about__text{
  padding: 0 1rem;
}

.about__picture {
  clip-path: url(#myClip);
  object-fit: cover;
  aspect-ratio: 1/1;
}

.about__text > p {
  font-size: var(--font-lg);
  margin-bottom: 1rem;
}

@media screen and (min-width: 800px){
  .about{
    gap: 5rem;
  }

  .about__text{
    padding: 0;
  }
}

.services {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

.service {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.service__title {
  text-transform: uppercase;
}

.service__img {
  width: 100%;
  aspect-ratio: 1/1;
  background-color: var(--red);
  border-radius: 8px;
}