/* .body {
  background-image: url("../img/bg-img-graph.avif");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
} */

.graf-bg-img {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 300px;
    height: 200px;
    background-color: green;
    border: 2px solid red;
    border-radius: 4px;
    background-image: url("../img/bg-img.JPG");
    /* background-image: url("../img/clock.png"); */
    /* background-image: url("../img/bg-img-graph.avif"); */

    /* background-repeat: repeat-x; */
    /* background-repeat: repeat-y; */
    background-repeat: no-repeat;
    background-position: center;
    /* background-size: contain; */
    background-size: cover;
    /* background-attachment: fixed; */
}

.graf-bg-img > p {
    font-size: 26px;
    font-weight: 700;
    /* color: red; */
}



/* === object-fit ====*/
.thumb {
    /* position: relative; */
    height: 380px;
    width: 500px;
    border: 2px dashed #2a2a2a;  
    border-radius: 4px;
  }

.thumb > img {
  display: block;
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: 10% 50px;
}

/* ===Псевдоелементи ::before і ::after== */

  /* .list {
    border: 2px solid black;
    background-color: #a4d5d5;
    max-width: 300px;
  } */

  .list-item:not(:last-child) {
    margin-bottom: 5px;
  }
  
  .list-link {
    display: inline-flex;
    align-items: center;
    color: currentColor;
    text-decoration: none;
    font-size: 28px;
  }
  
  .list-link:hover {
    color: #2196f3;
  }
  
  .list-link::before,
  .list-link::after {
    content: "";
    width: 24px;
    height: 24px;
    background-size: contain;
  }
  
  /* Adds and hides eyes icon after the link text */
  .list-link::after {
    display: none;
    margin-left: 16px;
    background-image: url("https://cdn-icons-png.flaticon.com/512/599/599516.png")
  }

  .list-link::before {
    /* display: none; */
    margin-right: 16px;
    background-image: url("https://cdn-icons-png.flaticon.com/512/599/599516.png")
  }
  
  /* Show arrow icon on hover */
  .list-link:hover::after {
    display: block;
  }

  /* === end Псевдоелементи ::before і ::after== */

  .div-grad {
    width: 300px;
    height: 200px;
    font-size: 20px;
    text-align: center;
    border: 2px solid black;
    border-radius: 4px;
    box-shadow: 4px 4px 4px -1px rgba(0,0,0,0.2);
  }

  .div-grad.lin-gradient {
    /* background-image: linear-gradient(to top left, blue, red); */
    background-image: linear-gradient(75deg, blue, red);
  }


  .div-grad.color-stop {
    background-image: linear-gradient(
    to right,
    #f44336 15%,
    #09792b 40%,
    #00b9ff 65%,
    #ffb800
    );
  }


  .div-grad.rainbow {
    background-image: linear-gradient(
    to right,
    #c64f4f 25%,
    #09792b 25%,
    #09792b 50%,
    #00b9ff 50%,
    #00b9ff 75%,
    #ffb800 75%
    );
  }

  .div-grad.radian-grad {
    background-image: radial-gradient(
        circle at center,
        blue 10%,
        red 50%
    );
  }

  .div-grad.repeet-grad {
    background-image: repeating-linear-gradient(
    to right,
    red,
    red 20px,
    yellow 20px,
    yellow 40px
  );
  }

  .div-grad.shedow {
    height: 120px;
    box-shadow: 10px 10px 8px 2px rgba(0, 0, 0, 0.3);
    background-color: #f3e4e4;
  }

  .div-grad.ins-shedow {
    height: 120px;
    box-shadow: inset 0 0 10px 5px rgba(0, 0, 0, 0.3);
    background-color: #f3e4e4;
  }


  .svg-container {
    display: flex;
    /* flex-direction: column; */
    /* justify-content: flex-start; */
    justify-content: center;
    
    width: 900px;
    border: 2px solid red;
    /* justify-content: center; */
  }



  .button-svg {
    display: block;
    width: 80px;
    height: 80px;
    border: 1px solid black;
    border-radius: 20%;
    /* margin: 10px auto; */
    padding: 0 0 0 0;
  }

  .button-svg .svg-icon {
    width: 50px;
    height: 50px;
    fill: greenyellow;
  }

  .button-svg:hover .svg-icon {
    fill: rgb(240, 72, 72);
    background-color: yellow;
  }