body {
    background-color: #0f1f19;
    color: wheat;
  }
  
  div.row.align-items-center {
    /* Add inner box shadow to the div */
    box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.5);
    background-color: rgba(0, 255, 128, 0.06); /* Reduce opacity of the background color */
  }
  
  .hex {
      display: block;
      margin: 0 auto;
      position: relative;
      width: 150px;
      height: 130px; /* width * 0.866 */
      background: #238a6b;
      box-sizing: border-box;
      -webkit-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
      -moz-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
    }
  
    .hex-background {
      position: absolute;
      top: 2px; /* equal to border thickness */
      left: 2px; /* equal to border thickness */
      width: 150px; /* container height - (border thickness * 2) */
      height: 130px; /* container height - (border thickness * 2) */
      -webkit-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
      -moz-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
    }
  
    .hex img {
      position: absolute;
      width: 100%; 
      height: 100%; 
      object-fit: cover;
      -webkit-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
      -moz-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
    }
  
    .hex-background img {
        max-width: 100%;
    }
    

    .circle {
        width: 40px; /* Adjust the size of the circle as needed */
        height: 40px; /* Same as width for a perfect circle */
        background: linear-gradient(to bottom, #00770a, #66ffa6); /* Gradient background */
        border-radius: 50%; /* Makes it a circle */
        display: flex;
        align-items: center;
        justify-content: center;
        color: wheat; /* Set the text color inside the circle */
        font-weight: bold; /* Optional: Make the text bold */
        font-size: 20px; /* Optional: Set the text size */
        border: 2px solid wheat;
        position: relative; /* Add this to make positioning the pseudo-element relative to the circle */
        overflow: hidden; /* Hide overflowing content of pseudo-element */
      }
    
      .list-group {
        flex-grow: 1; /* Allow the list-group to grow and take up the remaining space */
      }
    
            /* Custom styles for the list group item */
      .custom-list-item {
        background-color: #e5f0e7; /* Set the default background color */
        transition: background-color 0.3s ease; /* Add smooth transition effect */
      }

      /* Styles for the hover effect */
      .custom-list-item:hover {
        background-color: #83aaa8; /* Set the background color on hover */
      }


    .custom-width {
        width: 150px; /* Adjust the width as needed to match the calendar's width */
      }
    
    .image-container {
        /* Ensure the container expands to accommodate the image */
        width: 84%;
        height: auto;
        text-align: center; /* Optionally center the image horizontally */
        overflow: hidden;
        }
    
    .with-border {
              border: 2px solid #238a6b;
            }


      .my-item {
        background-color: #113c52;
      }
      
      .my-item-header {
          color: rgb(19, 16, 16);
      
      }   
      .card-body {
          background-color: #2c5e52;
          color: white;
          border: 2px solid #00c9b7;
      }    

      .my-image {
          width: 100%;
          height: 100%;
          object-fit: cover;
      }

      .spotify-icon-container {
        display: flex;
        justify-content: center;
        align-items: center; /* Add this line for vertical centering */
        margin-bottom: 2px;
    }
    
    .spotify-icon-container a i {
        color: limegreen;
        transition: color 0.3s ease-in-out;
    }
    
    .spotify-icon-container a i:hover {
        color: darkgreen; /* Adjust the desired darker color */
    }
    
    .list-group-item:hover {
        background-color: #9fe2ce;  /* Change the background color on hover */
        cursor: pointer;  /* Change the cursor on hover */
    }
    
    .streak-item:hover {
        /* Add any specific styles for hover state in the streak list */
        background-color: aliceblue; /* Set the background color to transparent or the desired color */
        cursor: default; /* Change the cursor back to default for the streak list items */
    }

    .container {
      width: 95%;
    }