@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
body{font-family: 'Poppins', sans-serif;}
/* ---- reset ---- */ canvas{ display: block; vertical-align: bottom; } /* ---- particles.js container ---- */ #particles-js{ position:absolute; width: 100%; height: 100%; background-image: url(""); background-repeat: no-repeat; background-size: cover; background-position: 50% 50%; } /* ---- stats.js ---- */ .count-particles{  position: absolute; top: 48px; left: 0; width: 80px; color: #13E8E9; font-size: .8em; text-align: left; text-indent: 4px; line-height: 14px; padding-bottom: 2px; font-family: Helvetica, Arial, sans-serif; font-weight: bold; } .js-count-particles{ font-size: 1.1em; } #stats, .count-particles{ -webkit-user-select: none; margin-top: 5px; margin-left: 5px; } #stats{ border-radius: 3px 3px 0 0; overflow: hidden; } .count-particles{ border-radius: 0 0 3px 3px; }

body{ background:#000d30;}
.list img{width: 100%;
height: auto;
filter: grayscale(90%);
transition:all 0.2s ease-in;
}
.list img:hover{filter: grayscale(0%);}
.list{ margin:10px; border:6px solid #fff;box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.32); position:relative;}
.tooltip {
  position: absolute;
  z-index: 1;
  padding: 0.25rem 1rem;
  border-radius: 5px;
  background: #29343d;
  opacity: 0;
  color: #cedfe9;
  font-size: 0.875rem;
  transition: opacity 500ms, transform 500ms;
  left:25%;
}
.diamond {
    position: absolute;
    top: 0;
    left: 0;
    background: #000;
    width: 35px;
    height: 35px;
    color: #fff;
    font-weight: bold;
    text-align: center;
    font-size: 15px;
    line-height: 35px;
    z-index: 99999;
}
.modal{ z-index:99999;}
.tooltip:before {
  content: '';
  position: absolute;
  top: -9px;
  left: calc(50% - 10px);
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #29343d;
}
.golden-base {
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight:bold;
  -webkit-margin-before: 0.3em; 
  -webkit-margin-after: 0.2em;
}
.golden1 {
  background-image: -webkit-linear-gradient(#FFF65C, #3A2C00);
  text-shadow: -1px -1px 1px rgba(255, 223, 0, 0.60);
}
.golden2 {
  background-image: -webkit-linear-gradient(#E8D800, #E0CF00 50%, #A86800 60%, #A86800 );
  text-shadow: -2px -2px 1px rgba(255, 255, 0, 0.56);
}
.golden3 {
  background-image: -webkit-linear-gradient(#FFF65C 45%, #9A8000 75%);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.09),
    -1px -1px 0 rgba(255, 220, 0, 0.670);
  font-size:3em;text-align:center;
  padding-top:50px;
}
.star{ z-index:-1;}

.grid {
    text-align: center;
    max-width: 100%;
    margin-top: 35px;
}
.list .btn{ padding:0; margin:0;}
.grid-item img{ max-width:100%;}


/* Step 3: how big should the gap be between grid items? remember that the total gap between two items would be double what you set here since both would have that amount set as their individual padding. Also add box-sizing:border-box to make sure the padding doesn't affect the total widh of the item */

.grid-item {
  box-sizing: border-box;
  padding:0;
  
}


/* Step 4: Add media queries (subjective) to make the whole grid resposive. */
@media (min-width:320px) {
  .grid-item {
    width: 90%;
  }
.grid-item{ padding:0 3px;}
}

@media (min-width: 500px) {
  .grid-item {
    width: 90%;
  }
.grid-item{ padding:0 3px;}
}

@media (min-width: 1024px) {
  .grid-item {
    width: 33.333%;
  }


}

@media (min-width: 1360px) {
  .grid-item {
    width: 25%;
  }
.grid-item{ padding:0;}
}

@media (min-width: 1600px) {
  .grid-item {
    width: 20%;
  }
.grid-item{ padding:0;}
}

.tooltip {
  position: absolute;
  z-index: 1;
  padding: 0.25rem 1rem;
  border-radius: 5px;
  background: #29343d;
  opacity: 0;
  color: #cedfe9;
  font-size: 0.875rem;
  transition: opacity 500ms, transform 500ms;
  left:25%;
  bottom:20px;
}

.list:hover .tooltip{  opacity: 1;}
.tooltip:before {
  content: '';
  position: absolute;
  top: -9px;
  left: calc(50% - 10px);
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #29343d;
}

.modal-dialog{ max-width:1000px;}