@font-face {
  font-family: GrapeFont;
  src: url(https://shdw-drive.genesysgo.net/5VhicqNTPgvJNVPHPp8PSH91YQ6KnVAeukW1K37GJEEV/Gilroy-Light.ttf);
  font-weight:normal;
  font-style:normal;
}

@font-face {
  font-family: GrapeFont;
  src: url(https://shdw-drive.genesysgo.net/5VhicqNTPgvJNVPHPp8PSH91YQ6KnVAeukW1K37GJEEV/Gilroy-ExtraBold.ttf);
  font-weight:bold;
  font-style:normal;
}


html, body {
  margin: 0;
  font-size-adjust: none;
  font-family: GrapeFont, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  background: #4e8ebf;  /* fallback for old browsers */
  background: radial-gradient(at right bottom, rgb(255, 196, 195), rgb(152, 79, 172), rgb(68, 39, 156));
  /*
  background: radial-gradient(88.33% 113.42% at 71.34% 83.89%, #4e8ebf 0%,  #5671be 32.29%,  #713585 58.85%,  #36325d 85.5%,  #251a3a 98.96%);*/
  height:100%;
  background-attachment: fixed;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}

.profileAvatarIcon:hover {
  color:#fff!important;
}

.grape-profile-background{
  background: linear-gradient(to bottom, #36325d 0%, #251A3A 48.6%, #251A3A 90.62%, #251A3A 10%);
  border-radius: 17px;
  min-height: 225px;
  min-width: 200px;
  overflow:hidden;
  padding-bottom:2em;
  position:relative;
}

.grape-art-header{
  background: none;
  backdrop-filter: blur(12.5px);
  -webkit-backdrop-filter: blur(12.5px);
}

.grape-store-splash{
}
.grape-store-info{
}

.grape-store-background{
  background: linear-gradient(to right, #4597D6 0%, #8D41A7 48.6%, #36325D 90.62%, #251A3A 100%);
}

.grape-art-profile-img{
  opacity: 0.1;
  position: absolute;
  left: 0;
  top: 0;
  width: 200%;
  height: auto;
}

.grape-art-generic-placeholder-container{
  padding: 1em;
  margin-bottom: 3em;
  width: 100%;
  background: #13151C;
  border-radius: 24px;
  overflow: hidden;
  text-overflow: ellipsis;

}

.grape-art-feed-outer-container{
  position: relative;
  margin:0;
  padding:0;
  margin-top: 1em;
  margin-bottom: 1em;
}

.grape-art-feed-inner-container{
  overflow: hidden;
  position: relative;
  border-radius: 24px;
}

.grape-art-feed-inner-img{
  opacity: 0.2;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: auto;
}

.grape-art-feed-overlay{
  position:relative;
}

.grape-art-generic-dark-box{
  background: #13151C;
  min-width: 100%;
  min-height: 100%;
  padding: 1em;
  margin-top: 1em;
  border-radius: 24px;
  z-index: 9999;
}

button.grape-crossmint-button {
    background-color: transparent;
    border:none;
    border-radius: 4px;
    font-weight: normal;
    text-transform: uppercase;
    padding: 6px 8px;
    margin:2px;
    color: #90caf9!important;
}
button.grape-crossmint-button:hover {
  background-color: rgba(144, 202, 249, 0.08);
}

@keyframes avataranimation {
  0%   {color: white; }
  25%  {color: rgb(144, 202, 249); }
  50%  {color: white; }
  75%  {color: rgb(144, 202, 249); }
  100% {color: white; }
}

.buyNowButton {
  position: relative!important;
  background: linear-gradient(270deg, #00F0DD 0%, #DC1FFF 100%);
  border-radius: 17px!important;
  color: #fff!important;
  animation: 0.5s ease-in;
}

.buyNowButton:hover {
  animation-name: avataranimation;
  animation-duration: 0.5s;
  animation-iteration-count: 1;
}

#wallet-menu .MuiPaper-root {
  border-radius: 24px!important;
}

#wallet-menu ul {
  background:none!important;
}#wallet-menu ul li:first-child {
}

.grape-wallet-button{
  color:white!important;
  line-height: 20px !important;
  max-height:40px;
  background:none!important;
  border:1px solid #fff!important;
  border-radius: 24px!important;
  font-weight:bold;
}

ul li .grape-wallet-button{
  border:none!important;
  border-radius: 0!important;
}

.grape-wallet-button img{
  max-height:25px;
}
.grape-wallet-button .MuiTouchRipple-root{
  background:none!important;
}

.wallet-adapter-button-trigger {
  line-height: 20px !important;
  background:none!important;
  border:1px solid #fff!important;
  border-radius: 24px!important;
}

.grape-wallet-provider .MuiPaper-root{
  border-radius: 24px!important;
}

.grape-wallet-provider {
  backdrop-filter: blur(5px)!important;
}

.grape-wallet-provider .MuiDialogTitle-root{
  background:black!important;
}

.grape-community-tab {
  color:white;
}
.grape-community-tab .Mui-selected {
  color:white !important;
}
.grape-community-tab .MuiTab-root:hover {
  color:#ccc !important;
}
.grape-community-tab .Mui-focusVisible {
  background-color: '#d1eaff';
}



@keyframes avataranimation {
  0%   {background: linear-gradient(270deg, #00F0DD 0%, #DC1FFF 100%);}
  10%  {background: linear-gradient(306deg, #00F0DD 0%, #DC1FFF 100%);}
  20%  {background: linear-gradient(342deg, #00F0DD 0%, #DC1FFF 100%);}
  30%  {background: linear-gradient(18deg, #00F0DD 0%, #DC1FFF 100%);}
  40%  {background: linear-gradient(54deg, #00F0DD 0%, #DC1FFF 100%);}
  50%  {background: linear-gradient(90deg, #00F0DD 0%, #DC1FFF 100%);}
  60%  {background: linear-gradient(126deg, #00F0DD 0%, #DC1FFF 100%);}
  70%  {background: linear-gradient(162deg, #00F0DD 0%, #DC1FFF 100%);}
  80% {background: linear-gradient(192deg, #00F0DD 0%, #DC1FFF 100%);}
  90% {background: linear-gradient(234deg, #00F0DD 0%, #DC1FFF 100%);}
  100% {background: linear-gradient(270deg, #00F0DD 0%, #DC1FFF 100%);}
}

@media screen and (max-width: 550px) {
  .likeTab{
    display:none;
  }

  /* Overriding MUI Stylings for mobile screens */
  .wallet-adapter-button,
  .grape-wallet-button {
    line-height: 20px !important;
  }
  .wallet-adapter-button-start-icon{
    margin-right:0!important;
  }
  .wallet-adapter-solana-domain{
    display:none;
  }

  .header-logo {
    width: 120px !important;
  }

  .dt-w-full{
    width:92.5% !important;
  }
  
  .\!dt-translate-y-\[calc\(100\%-3\.5rem\)\] {
    --tw-translate-y: calc(100% - 2.5rem) !important;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important;
  }
}

/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card {
  
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
}

/* This container is needed to position the front and back side */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front, .flip-card-back {
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
}

/* Style the back side */
.flip-card-back {
  position:absolute;
  top:0;
  background-color: black;/*dodgerblue*/;
  color: white;
  height: 100%;
  border-radius:24px;
  transform: rotateY(180deg);
}

.grape-flip-background{
  background: linear-gradient(to bottom, #36325d 0%, #251A3A 48.6%, #251A3A 90.62%, #251A3A 10%);
  border-radius: 24px;
  min-height: 225px;
  min-width: 100px;
  height: 100%;
  overflow:hidden;
  position:relative;
}