@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Caveat:wght@400..700&family=Dancing+Script:wght@400..700&family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Parkinsans:wght@300..800&family=Sour+Gummy:ital,wght@0,100..900;1,100..900&display=swap');

*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body{
  min-height: 100vh; /* Ensure body spans the full viewport height */

  background-color:#b8c0ff;
  opacity: 0;
  transition: opacity 3s;
  overflow: hidden;
}

.card {
    align-items: center;
    width: 23em;
    height: 30.15em;
    background: #240046;
    transition: 1s ease-in-out;
    clip-path: polygon(30px 0%, 100% 0, 100% calc(100% - 30px), calc(100% - 30px) 100%, 0 100%, 0% 30px);
    border-top-right-radius: 20px;
    border-bottom-left-radius: 20px;
    display: flex;
    flex-direction: column;
    max-width: fit-content;
    margin-inline: auto;
    justify-content: center;
    margin-top: 7em;
    margin-left: auto;
    margin-right: auto;
  }
  
  .card span {
    font-weight: bold;
    color: #be95be;
    text-align: center;
    display: block;
    font-size: 1.25em;
  }
  
  .card .info {
    font-weight: 400;
    color: white;
    display: block;
    text-align: center;
    font-size: 0.92em;
    margin: 1em;
  }
  .card .add-on{
    font-style: italic;
    font-size: 1.0em;

  }
  
  .card .img {
    width: 4.8em;
    height: 4.8em;
    border-radius: 15px;
    background-color: #ffffff;
    margin: auto;
  }
  .img img{
    max-width: 80px;
    margin: auto;

  }
  
  .card .share {
    margin-top: 1em;
    display: flex;
    justify-content: center;
    gap: 1em;
  }
  
  .card #icon {
    cursor: pointer;
    color: white;
    z-index: 20;
    transition: .4s ease-in-out;
  }
  
  .card #icon:hover {
    cursor: pointer;
    color: #be95be;
  }
  
  .card #btn {
    bottom: 1 4em;
    padding: 0.8em 1.7em;
    display: block;
    margin: auto;
    border-radius: 25px;
    border: none;
    font-weight: bold;
    background: #ffffff;
    color: rgb(0, 0, 0);
    z-index: 20;
    transition: .4s ease-in-out;
  }
  #ic{
    z-index: 10;
    max-width: .1em;
    display: inline-block;

  }
  
  .card #btn:hover {
    background: #be95be;
    color: white;
    cursor: pointer;
    z-index: 20;
  }

  .tree-container {
    overflow: hidden;
    display: flex;
    justify-content: space-between; /* Ensure trees are spaced evenly */
    align-items: flex-end; /* Align trees at the bottom */
    position: relative;
    width: 100%; /* Full width of the viewport */
    padding: 0 2em; /* Optional padding to avoid trees hugging screen edges */
    bottom: 26em;
    
  }
  

#sketch-container .p5Canvas,
#sketch-container2 .p5Canvas {
  width: 30%; /* Adjust width as needed */
  max-width: 400px; /* Optional max width for consistency */
  border-radius: 15px;
  position: relative;
  max-height: 100%;
   /* Relative to the .tree-container */
  height: auto;
}

  /* #sketch-container .p5Canvas{
    left: 10em;
    bottom: 120px;
    width: 80%;
    max-width: 500px;
    border-radius: 15px;
    position: fixed;
    max-width: 100%;
    height: auto;
    display: block;
  }

  #sketch-container2 .p5Canvas{
    left: 58em;
    bottom: 120px;
    width: 80%;
    max-width: 500px;
    border-radius: 15px;
    position: fixed;
    max-width: 100%;
    height: auto;
    display: block;
  } */

  .footer{
    font-size: 13px;
    font-weight: 500;
    font-family: "Parkinsans", sans-serif;
    position: fixed; 
    bottom: 0; 
    width: 100%; 
    text-align: center; 
    color: rgb(40, 36, 36); 
    padding: 0.5em 0; 
    z-index: 10; 
  }


  .tree-container, .footer {
    pointer-events: none; /* Prevent interference */
  }
  .card #icon, .card #btn {
    pointer-events: auto;
  }
  @media only screen and (max-width: 600px){
    #sketch-container .p5Canvas{
     display: none;

    }
    #sketch-container2 .p5Canvas{
      display: none;
    }
    .footer{
      font-size: 10px;
      font-weight: 500px;
      left: 17em;
      bottom: .1em;
    }
  }