/**Stylesheet for Digital Drams.*/
@font-face{
  font-family: icomoon;
  src: url('../Fonts/icomoon.woff') format('woff'),
     url('../Fonts/icomoon.ttf') format('truetype');
  font-display: swap;  
}

@font-face{
  font-family: outfit;
  src: url('../Fonts/Outfit-Regular.woff2') format('woff2'),
     url('../Fonts/Outfit-Regular.ttf') format('truetype');
  font-display: swap;  
}

@font-face{
  font-family: outfitbold;
  src: url('../Fonts/Outfit-ExtraBold.woff2') format('woff2'),
     url('../Fonts/Outfit-ExtraBold.ttf') format('truetype');
  font-display: swap;  
}

@font-face{
  font-family: outfitlight;
  src: url('../Fonts/Outfit-Light.woff2') format('woff2'),
     url('../Fonts/Outfit-Light.ttf') format('truetype');
  font-display: swap;  
}

#dashboard_page {
  font-family: outfitbold, sans-serif;
  text-transform: uppercase;
  text-align: center;
}

#dashboard_grid {
  display: grid;
  width: 100%;
  max-width: 80em;
  grid-gap: 2em;
  height: auto;
  grid-template-columns: repeat(1, 1fr);
  grid-template-rows: auto;
  grid-template-areas:
    "one"
    "two"
    "three"
    "five"
    "four";
  padding-top: 2em;
}

.dashboard_block {
    position: relative;
    background: #0B0E10;
    border-radius: 2em;
    border: 4px solid #FA731C;
    box-shadow: 0 0 10px #000;
}

#db_1{
    background: #161616; 
    border: 4px solid #161616;
}

#db_4{
    background-image: url("https://digitaldrams.inksplat.dev/wp-content/uploads/2025/03/whiskey-glass-orange.jpg");
    background-size: cover;
    background-position: center right;
    border: none;
}

#db_4 .db_block_inner{
  background: none;
}

.db_block_outer{
  position: relative;
  width: 100%;
  height: 100%;
  padding: .4em;
  box-sizing: border-box;
}

.db_block_inner{
  position: relative;
  width: 100%;
  height: 100%;
  padding: .3em;

  border-radius: 2em;
  box-sizing: border-box;
}


#dashboard_grid .dashboard_block:nth-child(1) {
  grid-area: one;
}

#dashboard_grid .dashboard_block:nth-child(2) {
  grid-area: two;
}

#dashboard_grid .dashboard_block:nth-child(3) {
  grid-area: three;
}

#dashboard_grid .dashboard_block:nth-child(4) {
  grid-area: four;
}

#dashboard_grid .dashboard_block:nth-child(5) {
  grid-area: five;
}

#dashboard_grid .dashboard_block:nth-child(6) {
  grid-area: six;
}




/**Dashboard - 1 : Menu*/
#dashboard_nav_menu{
  position: relative;
  left: 50%;
  width: 10em;
  transform: translateX(-50%);
}

#dashboard_nav_menu ul{
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: left;
}

#dashboard_nav_menu span{
  display: inline-block;
  font-size: 1.3em;
  width: 2em;
}

#dashboard_nav_menu li{
  margin: .5em 0em;
}

#dashboard_nav_menu a{
    font-family: outfit, sans-serif;
    font-size: 1.2em;
    color: #F5F5F5;
    text-transform: capitalize;
    text-decoration: none;
}

#dashboard_nav_menu a:hover{
  color: #FA731C;
}


/**Dashboard - 2 : Stats*/
#dashboard_balance_flex{
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  height: 100%;
}

#db_balance_left, #db_balance_right{
  width: 100%;
}

.db_balance_flex{
    position: relative;
    padding: 1em;
    margin: .5em;
    background: #161616; 
    border-radius: 2em;
}

.db_balance_flex div{
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

.db_balance_flex h3{
    font-family: outfitbold, sans-serif;
    font-size: 2.5em;
    text-transform: uppercase;
    margin: 0em 0em .5em 0em;
}

.db_balance_flex h4{
    font-family: outfit, sans-serif;
    font-size: 1.2em;
    text-transform: capitalize;
    margin: 0;
}


/**Dashboard - 3 : Chart*/
#db_3{
  position: relative;
  width: 100%;
  overflow: hidden;
}

#dashboard_chart{
  position: relative;
  width: 100%;
  background: #F5F5F5;
  border-radius: 2em;
  overflow: hidden;
}


/**Dashboard - 4 : Discover*/
#db_4{
  height: 20em;
}

#db_4 h4{
  font-size: 2em;
  text-align: left;
  text-transform: capitalize;
  text-shadow: 1px 1px 2px #000;
  max-width: 5em;
  margin-top: .8em;
  padding-left: 1em;
  line-height: 1.1em;
}


/**Dashboard - 5 : Assets*/
#db_5 .db_block_inner{
  background: #161616;
  border-radius: 2em;
}

#asset_vault_holder{
    position: relative;
    height: 30em;
    overflow-y: scroll;
}

#asset_vault_top{
  position: sticky;
  top: 0em;
  padding: .5em;
  text-transform: capitalize;
  background: #161616;
  z-index: 2;
}

#asset_vault_top h3{
  font-family: outfit, sans-serif;
  font-size: 1.2em;
  margin: 0;
}

.asset_vault_item{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    position: relative;
    color: #0B0E10;
    background: #F5F5F5;
    border-radius: 2em;
    padding: 1em .5em;
    margin: 1em 0em;
    align-items: center;
}

.asset_vault_image{
    width: 50%;
}

.avi{
    position: relative;
    left: 50%;
    width: 90%;
    max-width: 10em;
    transform: translateX(-50%);
}

.avi img{
    width: 100%;
    height: auto;
}

.asset_vault_value{
    position: relative;
    width: 50%;
}

.asset_vault_value h4{
    font-size: 1.1em;
    margin: 0em 0em .5em 0em;
}

.asset_vault_description{
    position: relative;
    width: 100%;
}

.asset_vault_description h5{
    font-family: outfit, sans-serif;
    font-size: 1em;
    text-transform: none;
    margin: 0;
}

#asset_vault_contents{
  padding-bottom: 1em;
}

#scroll_prompt{
  display: none;
  position: absolute;
  bottom: 0em;
  right: .5em;
  font-size: 2em;
  transform: rotate(45deg);
  animation: fingerwag 2s infinite;
}


@keyframes fingerwag {
  0%{
    transform: rotate(45deg);
  }
  30%{
    transform: rotate(135deg);
  }     
  60% {
    transform: rotate(45deg);
  }
} 





/**Media Queries*/
@media only screen and (min-width: 36em){

    /**Dashboard Styles*/

    /**Dashboard - 1 : Menu*/
    #dashboard_nav_menu{
      position: relative;
      left: 50%;
      width: 100%;
      max-width: 30em;
      transform: translateX(-50%);
    }

    #dashboard_nav_menu ul{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    #dashboard_nav_menu li{
      width: 13em;
      margin: .5em 0em;
    }

    /**Dashboard - 1 : Stats*/
    #db_balance_left, #db_balance_right{
      width: calc(50% - 1em);
    }

} 


@media only screen and (min-width: 44em){ 

    /**Dashboard Styles*/
    #dashboard_grid {
      display: grid;
      width: 100%;
      max-width: 80em;
      grid-gap: 2.5em;
      height: auto;
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: auto;
      grid-template-areas:
        "one one"
        "two two"
        "three four"
        "three four"
        "five five"
        "five five";
    }

    .dashboard_block {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-end;
    }

    /**Dashboard - 4 : Discover*/
    #db_4{
      height: auto;
    }



    /**Dashboard - 5 : Assets*/
    #asset_vault_holder{
        height: 35em;
    }

    .asset_vault_image, .asset_vault_value, .asset_vault_description{
        width: 33.3%;
        padding: 0em .5em;
        box-sizing: border-box;
    }

    .asset_vault_value{
        order: 3;
    }

    .asset_vault_description{
        order: 2;
        text-align: left;
    }


}




@media only screen and (min-width: 60em){ 

    /**Dashboard - 1 : Menu*/
    #dashboard_nav_menu{
      max-width: 54em; 
    }
}




@media only screen and (min-width: 74em){ 


    /**Dashboard  Styles*/
     #dashboard_grid {
      grid-template-columns: repeat(10, 1fr);
      grid-template-areas:
        "one one two two two two two five five five"
        "one one two two two two two five five five"
        "three three three three four four four five five five"
        "three three three three four four four five five five";

    }

    /**Dashboard - 1 : Menu*/
    #dashboard_nav_menu{
      width: 10em;
    }

    /**Dashboard - 5 : Assets*/
    #db_5 .db_block_inner{
      padding-bottom: 0em;
      overflow-y: hidden;
    }

    #asset_vault_holder{
        height: 36.5em;
    }

    .asset_vault_image{
        width: 50%
    }

    .asset_vault_value{
        order: 2;
        width: 50%;
    }

    .asset_vault_description{
        width: 100%;
        order: 3;
        text-align: center;
    }




}