/* ----------------------------- Global ----------------------------- */
.b-example-divider {
  height: 3rem;
  background-color: rgba(0, 0, 0, .1);
  border: solid rgba(0, 0, 0, .15);
  border-width: 1px 0;
  box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
}

#my-navbar{
  background-color: rgb(38,38,38);
}

/* ----------------------------- Crypto Diesel ----------------------------- */
#sec-crypto-diesel {
  background-color: rgb(15, 15, 15);
}

#cryptodiesel-title {
  color: rgb(244,245,176);
}

/* ----------------------------- Our Projects banner ----------------------------- */

#sec-ourproj{
  background-color: rgb(224,207,62);
}

#our-projects {
  font-size: 10vw;
}

/* ----------------------------- Crypto Pixels ----------------------------- */
#sec-cryptopixels {
  background-color: rgba(42, 148, 107, 0.8);
}

#cp-canvas{
  cursor: alias;
  /* display: absolute; */
  /* width: 90%;
  height: 100%; */
  /* height: auto;   */
  /* display: flex; */
  /* justify-content: center; */
  /* align-items: center; */
  /* display: block; */
  background-color: white;
  border: 5px solid black;
  /* padding: 100px; */
  /* width: 100%;
  height: 100%; */
}


/* ----------------------------- Beetle Mania ----------------------------- */
#sec-beetle-mania{
  background-image: url("assets/MarbleFloor_Cabinet.png");
  background-size: cover;
}

.reveal{
  position: relative;
  transform: translateY(150px);
  opacity: 0;
  transition: 1s all ease;
}

.reveal.active{
  transform: translateY(0);
  opacity: 1;
}

/* ----------------------------- RGB Loopers ----------------------------- */
#sec-loopers {
  background-color: rgb(29,110,253,0.8);
}

#sec-loopers .image img {
  display: absolute;
  width: 100%;
  height: auto;  
}

.content {
  display: flex;
  justify-content: center;
  align-items: center;
}

main .container {
  display: grid;
  grid-template-columns: repeat(2,50%);
  grid-template-rows: repeat(2,50%);
}

.image {
  overflow: hidden;
  position: relative;
  padding: 0;
  margin: 0;
  transition: clip-path 1s;
}

.image:first-child { 
  clip-path: circle(100% at 100% 100%);
}

.image:nth-of-type(2) {
  clip-path: circle(100% at 0% 100%);
}

.image:nth-of-type(3) {
  clip-path: circle(100% at 100% 0%);
}

.image:nth-of-type(4) {
  clip-path: circle(100% at 0% 0%);
}

.image:hover {
  clip-path: circle(100% at 50% 50%);
}

.image.active{
  clip-path: circle(100% at 50% 50%);
}

/* ----------------------------- Crypto X ----------------------------- */
#sec-projectx{
  background-color: lightslategray;
}

/* ----------------------------- Media Queries ----------------------------- */
@media screen and (min-width: 812px) {
  #our-projects {
    font-size: 81px;
  }
}

@media screen and (max-width: 1208px) {
  #beetles-link img:nth-of-type(9) {
    display: none;
  }
  #beetles-link img:nth-of-type(10) {
    display: none;
  }
  #beetles-link img:nth-of-type(11) {
    display: none;
  }
}

@media screen and (max-width: 991px) {
  #beetles-link img:nth-of-type(8) {
    display: none;
  }
  #beetles-link img:nth-of-type(7) {
    display: none;
  }
  #beetles-link img:nth-of-type(6) {
    display: none;
  }
}

@media screen and (min-width: 280px) {
  #beetles-div img{
    width: 55px;
  }
}

@media screen and (min-width: 305px) {
  #beetles-div img{
    width: 80px;
  }
}

@media screen and (min-width: 340px) {
  #beetles-div img{
    width: 100px;
  }
}

@media screen and (min-width: 395px) {
  #beetles-div img{
    width: 128px;
  }
}

@media screen and (max-width: 377px) {
  .my-icon {
    width: 30px;
  }  
}