@font-face {
  font-family: customFont;
  src: url('assets/font.otf');
}
html, 
body {
    height: 100%;
    width: 100%;
    overflow: hidden;
}


canvas {
  position:absolute;
  top: 20%;
  height: 80%;
  width: 100%;
}

.smoke-c {
  display: none;
}

.opacity {
  opacity: 0;
  animation-delay: 2.0s;
  animation-name: textAnimation;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

.opacity-bounce {
  opacity: 0;
  animation: textAnimation 1s ease-in-out 2s,
              bounceAnimation 0.5s ease-in-out 3s;
  animation-fill-mode: forwards;
  transition: all .2s;
} 

.con {
  height: 100%;
  width: 100%;
  display: inline-grid;
  align-items: center;
  justify-content: center;
  transition: all .2s;
}

.con:hover {
  transform: scale(1.1);
}

@media only screen and (max-width: 1000px) {



.logo {

  image-rendering: crisp-edges;
  image-rendering: -moz-crisp-edges;          /* Firefox */
  image-rendering: -o-crisp-edges;            /* Opera */
  image-rendering: -webkit-optimize-contrast; /* Webkit (non-standard naming)*/
  -ms-interpolation-mode: nearest-neighbor;
  top: 35%;
  left: 50%;
  transform: translate(-50%, -35%) scale(0.3);
  position: absolute;
  
  }



  body {
    width: 100%;
  }

  .img-snack {
    width: 250px;
    top: 35%;
    left: 50%;
    transform: translate(-50%, -35%);
    position: absolute;
    }

.img-vape {
width: 173px;
top: 35%;
left: 50%;
transform: translate(-50%, -35%);
position: absolute;
}

.size {
  height: 100%;
}
.vapes {
  font-family: customFont;
  background-color: #003FE1;
  width: 100%;
  background-image: url('assets/bg.png');
  align-items: center;
  background-size: cover;
  background-repeat: no-repeat;
  justify-content: center;
  opacity: 0;
  height: 50%;
  position: relative;
  animation-delay: 0.9s;
  animation-name: textAnimation;
  animation-duration: 0.8s;
  animation-fill-mode: forwards;
} 

.snacks {
  font-family: customFont;
  background-color: #e74c3c;
  width: 100%;
  background-image: url('assets/bg.png');
  background-size: cover;
  background-repeat: no-repeat;
  align-items: center;
  justify-content: center;
  opacity: 0;
  height: 50%;
  position: relative;
  animation-delay: 0.9s;
  animation-name: textAnimation;
  animation-duration: 0.8s;
  animation-fill-mode: forwards;
} 



.svg {
height: 50vh;
width: 41vw;
display: inline-grid;
align-items: center;
justify-content: center;
}

.transformer {
transform: translate(43%,18vh);
}

.test {
align-content: center;
justify-items: center;
justify-content: center;
align-items: center;
display: inline-grid;
width: 50vh;
height: 100%;
}

.box {

  align-items: center;
  justify-items: center;
  display: inline-grid;
  transition: transform .2s;
}  


.box:nth-child(0){
margin-top: 70px;
}

.box:nth-child(1){
margin-bottom: 130px;
}



h4,h1,h2,h3,h5  {
  font-family: customFont;
  color: black;
}


.top-logo {

  opacity: 0;
  animation-delay: 0.8s;
  animation-name: topFadeIn;
  transform: translate(20px,-1000px);
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

.bottom-logo {

  opacity: 0;
  animation-delay: 1.5s;
  transform: translate(0px,1000px);
  animation-name: bottomFadeIn;
  animation-duration: 0.8s;
  animation-fill-mode: forwards;
}


.right-logo {

  opacity: 0;
  transform: translate(1000px,-138px);
  animation-delay: 1.2s;
  animation-name: rightFadeIn;
  animation-duration: 0.8s;
  animation-fill-mode: forwards;
}

.left-logo {
  opacity: 0;
  transform: translate(-1000px,-138px);
  animation-delay: 0.5s;
  animation-name: leftFadeIn;
  animation-duration: 0.8s;
  animation-fill-mode: forwards;
}

.text-animation {
  opacity: 0;
  animation-delay: 1.7s;
  animation-name: textAnimation;
  animation-duration: 0.8s;
  animation-fill-mode: forwards;
}

.text-animation-custom {
opacity: 0;
position: absolute;
top: 75%;
left: 40%;
animation-delay: 1.7s;
animation-name: textAnimation;
animation-duration: 0.8s;
animation-fill-mode: forwards;
}

.img {
transform: scale(0.5);
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
}

@keyframes bounceAnimation {
0% {
    transform: scale(1);
 
}

50%{
  transform: scale(1.1);
}


100% {
    transform: scale(1.0);
}
}


@keyframes textAnimation {
0% {
  opacity: 0;
 
}

100% {
    opacity: 1;
}
}


@keyframes topFadeIn {
0% {
  opacity: 0;
 
}

60% {

  opacity: 0.1;
}

100% {
    transform: translate(20px,150px);
    
    opacity: 1;
}
}

@keyframes rightFadeIn {
0% {
    opacity: 0;
}

60% {

  opacity: 0.1;
}
100% {
    transform: translate(55px,-68px);
    opacity: 1;
}
}

@keyframes leftFadeIn {
0% {
    opacity: 0;
 
}

60% {

  opacity: 0.1;
}
100% {
    transform: translate(-36px,-68px);
    opacity: 1;
}
}

@keyframes bottomFadeIn {
0% {
 
  opacity: 0;
}
60% {

  opacity: 0.1;
}

100% {
    transform: translateY(70px);
    opacity: 1;
}
}



}

@media only screen and (min-width: 1000px) {


  body {
    display: grid;

    grid-row: 2;
    height: 100%;
    width: 100%;
  }

  .img-vape {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -40%);
  width: 300px;
  }

  .img-snack {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -40%);
  width: 400px;
  }
  


.logo {

  image-rendering: crisp-edges;
  image-rendering: -moz-crisp-edges;          /* Firefox */
  image-rendering: -o-crisp-edges;            /* Opera */
  image-rendering: -webkit-optimize-contrast; /* Webkit (non-standard naming)*/
  -ms-interpolation-mode: nearest-neighbor;
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -40%) scale(0.5);
  
  }


  

.size {
  height: 100%;
  display: flex;
}



.vapes {
  font-family: customFont;
  background-color: #003FE1;
  width: 100%;
  height: 100%;
  background-image: url('assets/bg.png');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center; 
  position: relative;
  flex: 0 0 50%;
  display: inline-grid;
  align-items: center;
  justify-content: center;
} 

.snacks {
  font-family: customFont;
  background-color: #e74c3c;
  width: 100%;
  height: 100%;
  background-image: url('assets/bg.png');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center; 
  position: relative;
  flex: 0 0 50%;
  display: inline-grid;
  align-items: center;
  justify-content: center;
}

.svg {
height: 50vh;
width: 41vw;
display: inline-grid;
align-items: center;
justify-content: center;
}

.transformer {
transform: translate(43%,18vh);
}

.test {
align-content: center;
justify-items: center;
justify-content: center;
align-items: center;
display: inline-grid;
width: 50vh;
height: 100%;
}

.box {

  align-items: center;
  justify-items: center;
  display: inline-grid;
  transition: all .2s;
}  

.box:hover {
  transform: scale(1.2);
  cursor: pointer;
}

h4,h1,h2,h3,h5  {
  font-family: customFont;
  color: black;
}


.top-logo {

  opacity: 0;
  animation-delay: 0.8s;
  animation-name: topFadeIn;
  transform: translate(20px,-1000px);
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

.bottom-logo {

  opacity: 0;
  animation-delay: 1.5s;
  transform: translate(0px,1000px);
  animation-name: bottomFadeIn;
  animation-duration: 0.8s;
  animation-fill-mode: forwards;
}


.right-logo {

  opacity: 0;
  transform: translate(1000px,-138px);
  animation-delay: 1.2s;
  animation-name: rightFadeIn;
  animation-duration: 0.8s;
  animation-fill-mode: forwards;
}

.left-logo {
  opacity: 0;
  transform: translate(-1000px,-138px);
  animation-delay: 0.5s;
  animation-name: leftFadeIn;
  animation-duration: 0.8s;
  animation-fill-mode: forwards;
}

.text-animation {
  opacity: 0;
  animation-delay: 1.7s;
  animation-name: textAnimation;
  animation-duration: 0.8s;
  animation-fill-mode: forwards;
}

.text-animation-custom {
opacity: 0;
position: absolute;
top: 75%;
left: 40%;
animation-delay: 1.7s;
animation-name: textAnimation;
animation-duration: 0.8s;
animation-fill-mode: forwards;
}




.img {
transform: scale(0.5);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
left: 7%;
top: 25%;
position: absolute;

}

@keyframes bounceAnimation {
0% {
    transform: scale(1);
 
}

50%{
  transform: scale(1.1);
}


100% {
    transform: scale(1.0);
}
}


@keyframes textAnimation {
0% {
  opacity: 0;
 
}

100% {
    opacity: 1;
}
}


@keyframes topFadeIn {
0% {
  opacity: 0;
 
}

60% {

  opacity: 0.1;
}

100% {
  transform: translate(-25%,20%);
    
    opacity: 1;
}
}

@keyframes rightFadeIn {
0% {
    opacity: 0;
}

60% {

  opacity: 0.1;
}
100% {
  transform: translate(35%,-24pc);
    opacity: 1;
}
}

@keyframes leftFadeIn {
0% {
    opacity: 0;
 
}

60% {

  opacity: 0.1;
}
100% {
  transform: translate(-25%,-27pc);
    opacity: 1;
}
}

@keyframes bottomFadeIn {
0% {
 
  opacity: 0;
}
60% {

  opacity: 0.1;
}

100% {
  transform: translate(-38%,-40%);
    opacity: 1;
}
}


}








  .vape1 {
    position: absolute;
    width: 12pc;
    background-size: contain;
    bottom: 0;
    left: 0;
    opacity: 0;
    animation-delay: 0.7s;
    animation-name: textAnimation;
    animation-duration: 0.8s;
    animation-fill-mode: forwards;
  }

  .vape2 {
    position: absolute;
    width: 12pc;
    background-size: contain;
    bottom: 0;
    right: 50%;
    opacity: 0;
    animation-delay: 0.7s;
    animation-name: textAnimation;
    animation-duration: 0.8s;
    animation-fill-mode: forwards;
  }