/*HEADER*/
.header__icon{
    width: 1.5rem;
    height: 1.5rem;
    /*
    border: solid 1px red;
    */
}


.header__icon__text{
    color: black !important;

    display: block;
    position: relative;
    width: fit-content;
    text-align: center;
    font-size: 12px;

    /*
    border: solid red 1px;
    */
}

#logo__section{

  margin-left: -.25rem;
  margin-top: -.5rem;
  border-radius: 0rem .25rem .25rem 0rem;

  width: fit-content;
  padding-right: 1rem;
  height: 1.5rem;
  margin-bottom: -.5rem;
  background-color: var(--action);

  display: grid;
  grid-template-columns: auto 1fr;
  color: white;
  justify-content: center;
  align-items: center;
  gap: .25rem;
}



#software_logo{
  background-image: url('../assets/svg/logo.svg');
  height: 1.5rem;
  width: 1.5rem;
}





.header__icon__layout {
    display: grid;
    justify-content: center;
    justify-items: center;
    width: fit-content;
    /*
    border: solid blue 1px;
    */
    position: relative;
  
    /* Set up a single column grid */
    grid-template-columns: 1fr; /* Define a single column */
    grid-template-rows: auto; /* Allow rows to adjust to content */

    cursor: pointer;

    

  }


  #header {
    background: transparent;  /* fallback for old browsers */
    color: black;
  }




#top-header {
    background: var(--background-200);
    border: solid 1px var(--background-300); /* fallback for old browsers */
    border-radius: .25rem;
    margin-top: .5rem;
    margin-left: 1rem;
    margin-right: 1rem;
    display: grid;
    grid-template-columns: auto 1fr;
    padding: .25rem .25rem .25rem .25rem;
    height: fit-content;
    color: var(--font-300);
    justify-content: center;
    align-items: center;
    width: calc(100% - 2.5rem);
}



#dumono__coin__header__icon{
    width: 1rem;
    height: 1rem;
    display: block;

    background-image: url('../assets/svg/coin front.svg'); /* Replace 'path_to_your_image.jpg' with the path to your image */
    background-size: cover; /* Adjust the background size */
    background-position: center;



  }

  .top__header__icon__text__layout{
    display: grid;
    grid-template-columns: auto 1fr;
    width: fit-content;
    align-items: center;
    gap: .25rem;
    margin-left: 1rem;
  }

  #dumono__coin__drop__image {
    width: 4rem;
    height: 4rem;
    display: block;
    background-image: url('../assets/svg/coin front.svg');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform 0.5s ease; /* Adding a transition for smooth animation */
}

@keyframes flipCoin {
    0% {
        transform: rotateY(0deg);
        background-image: url('../assets/svg/coin front.svg'); /* Initial front image */
    }
    50% {
        transform: rotateY(90deg); /* Rotate halfway */
    }
    100% {
        transform: rotateY(180deg);
        background-image: url('../assets/svg/coin back.svg'); /* Show the back of the coin */
    }
}

#dumono__coin__drop__image:hover {
    cursor: pointer;
    animation: flipCoin 0.5s forwards; /* Animation duration is 1 second */
    animation-delay: 0.25s; /* Delay before the animation starts */
}
  #wallet{
    display: grid;
    grid-template-columns: 1;
    grid-template-rows: auto;
    justify-items: center;
    padding: .5rem;
    gap: .5rem;
  }

  #coins__text{
    font-size: 20px;
    color: #d18829;
  }