@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
:root {
  --border-radius: 8px;

  /* Dark/Light mode variables */
  --bg-color: #080808;
  --bg-card-glass: #151515;
  --bg-card-glass-hover: #343434;
  --bg-card-glass-border: #080808;
  --bg-card-attribute: #72eb3a08;
  --bg-inverted: #f5f5f5;
  --bg-input-field: #1d1d1d;
  --bg-trending-category: #222428;
  --bg-attribute-warn: #352919;
  --icon-color: #96a2b5e5;
  --icon-gradient-theme-color-primary: #656565;
  --icon-text-color: #ffffffc2;
  --border-color-cards: rgb(255 255 255 / 6%);
  --nav-color: #1a1a1a;
  --text-color: #e7e7e7;
  --text-color-inverted: #000000;
  --text-card-color: rgba(255, 255, 255, 0.8);
  --text-color-sidebar: #c1c1c1;
  --text-color-hover: #f2f2f2;
  --text-attribute-warn: #ffac00;
  --hr-color: #919191;
  --card-attribute-color: #71e33c;
  --nav-item-hover:#f0f0f0;
  --skeleton-primary-color: #333333; 
  --skeleton-secondary-color: #3f3f3f;
}

html.light:root {
  /* Dark/Light mode variables */
  --bg-color: rgb(252, 252, 252);
  --bg-card-glass: #f6f8fa;
  --bg-card-glass-border: #d0d7de;
  --bg-card-glass-hover: rgba(236, 236, 236, 0.916);
  --bg-card-attribute: #72eb3a08;
  --bg-inverted: #1d1d1d;
  --bg-input-field: #ededed;
  --bg-trending-category: #4d4d4d14;
  --bg-attribute-warn: #352919;
  --icon-color: rgba(0, 0, 0, 0.8);
  --icon-gradient-theme-color-primary: #FCB033;
  --icon-gradient-theme-color-secondary: #FA8607;
  --icon-text-color: rgba(0, 0, 0, 0.8);
  --border-color-cards: rgba(48, 48, 48, 0.125);
  --nav-color: #ffffff;
  --text-color: #000000;
  --text-color-inverted: #e7e7e7;
  --text-card-color: rgba(0, 0, 0, 0.8);
  --text-color-sidebar: #373737;
  --text-color-hover: #313131;
  --text-attribute-warn: #ffac00;
  --hr-color: #454545;
  --card-attribute-color: #226d00;
  --nav-item-hover: #000;
  --skeleton-primary-color: #ededed;
  --skeleton-secondary-color: #dadada;
}

html {
  background-color: var(--bg-color) !important;
  height: 100%;
}

html.light {
  color-scheme: light;
}

body {
  background: var(--bg-color) !important;
}

body.modal-open bg {
  filter: blur(5px);
  -webkit-filter: blur(5px);
}

* {
  /* font-family: 'Titillium Web', sans-serif; */
  font-family: 'Barlow', sans-serif;
}

a {
  text-decoration: none !important;
}

hr {
  border-color: var(--hr-color) !important;
}

.text-wrapper {
  color: var(--text-color-hover) !important;
}

.text-wrapper-inverted {
  color: var(--text-color-inverted) !important;
}

.text-danger {
  color: red;
}

#__nuxt {
  background-color: var(--bg-color);
}

.flex{
  display: flex;
}

.items-center{
  align-items: center;
}

.grid {
  display: grid !important;
}

.grid-template-col-auto-03 {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

/* Glassmorphism properties */
.glass-card {
  backdrop-filter: blur(16px) saturate(200%);
  -webkit-backdrop-filter: blur(16px) saturate(200%);
  background-color: var(--bg-card-glass);
  border-radius: 12px;
  border: 1px solid var(--border-color-cards);
}

.api_count {
  color: var(--icon-text-color);
  opacity: 40%;
}

/* utils css */
.wrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.contrast-color {
  background-color: var(--nav-item-hover) !important;
  color: var(--bg-color) !important;
  font-size: medium !important;
}

.inverted-theme-color {
  backdrop-filter: blur(16px) saturate(200%);
  background: var(--bg-inverted) !important;
  font-weight: 400;
  font-size: 15px;
  -webkit-backdrop-filter: blur(16px) saturate(200%);
}

.inverted-theme-color:hover {
  border: solid 1px var(--bg-color);
  transition: scale 0.1s ease-in-out;
}

.no-hover:hover {
  opacity: 1 !important;
}

/* Responsive properties */
@media (min-width: 1581px) {
  #__nuxt {
    background-color: var(--bg-color);
    margin-left: 3vw;
    margin-right: 3vw;
  }

  body {
    background: var(--bg-color) !important;
  }
}

@media only screen and (max-width: 680px) {
  .no-margin {
    margin-left: 0 !important;
  }  
}
