style.scss

@import url("https://fonts.googleapis.com/css2?family=Lato&display=swap");

$primary-color: #1019bd;
$secondary-color: #be2edd;

canvas {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;

  height: 1000px
 
}




html {
  scroll-behavior: smooth;
  
}
* {
  box-sizing: border-box;
 
}


body {
  font-family: "Lato", sans-serif;
  margin: 0;
  // background-image: url('pics/space.jpg');

  color: white;
  text-align: center;

}


p {
  font-size: 1.5rem;
}

h2 {
  font-size: 3rem;
  background: url(https://d2pn8kiwq2w21t.cloudfront.net/images/jpegPIA17669.width-1024.jpg);
  background-position: center;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  }

  a {
    color: rgb(7, 208, 7);
    font-size: 3rem;
    text-decoration: none;
  
  }
header {
  
  text-align: center;
  margin-top: 1rem;
 margin-bottom: 3rem;

 .nft {
  padding: 1rem;
  text-align: left;
  line-height: 2.5rem;
  background: rgba(0, 0, 0, 0.17);
}
}




.container {
  padding: 15px;
  margin: 0 auto;
  max-width: 100%;
 
 height: 5500px;
  display: flex;
  flex-direction: column;
  justify-content: end;

}
.nftcontainer {

  margin: 0 auto;
 padding-bottom: 5rem;
  max-width: 90%;
  display: flex;
  flex-direction: column;
 
  justify-content: space-between;
  

  .card {

    opacity: 0.8;

    transition: transform .2s;
    
  img { width: 250px;
    height: auto;}
    p{
      color:rgb(7, 208, 7);
    }
   
   
   
  }
  .card:hover {
    transform: scale(1.3); 
    opacity: 1
  }
}

h1 {


  font-size: 3rem;
 background: url(https://d2pn8kiwq2w21t.cloudfront.net/images/jpegPIA17669.width-1024.jpg);
 background-position: center;
 -webkit-text-fill-color: transparent;
 -webkit-background-clip: text;
 background-clip: text;
}
.chart {
  margin: 2rem;
 
  z-index: 200;
 
box-shadow: 10px 10px 10px 10px 10px white;
transform:  translateY(-100%) translateX(120%);
cursor: pointer;
 


  }
.video {
  display: flex;
  justify-content: space-around;
 
  padding: 3rem;
  // transform: translateX(-100%) rotateY(50deg);
  perspective: 1000px;
#video1 {
  margin: 2rem;
  z-index: 200;
  border: 5px solid white;
  border-radius: 5px;
box-shadow: 10px 10px 10px 10px 10px white;
cursor: pointer;
  transform-style: preserve-3d;
  transform-origin: center right;

  transform:  rotateY(60deg);
  }
  #video2 {
    margin: 2rem;
    z-index: 200;
    border: 5px solid white;
    border-radius: 5px;
  box-shadow: 10px 10px 10px 10px 10px white;
  cursor: pointer;
    transform-style: preserve-3d;
    transform-origin: center left;
    transition: transform 1s;
    
    transform: translateX(10rem) rotateY(-70deg)

  }
}

@keyframes videomove {
  from {transform: rotateY(0deg)}
  to {transform: rotateY(360deg);}
}
.nft {
  display: flex;
  justify-content: end;
  margin: 5rem;
  img {
  width: 5rem;
  height: 5rem;
  animation: mymove 5s;
  animation-iteration-count: infinite;
}
}

 

@keyframes mymove {
  from {transform: rotateY(0deg)}
  to {transform: rotateY(360deg);}
}




footer {
margin: 1rem;
  display: flex;
  justify-content: space-around;
  background: rgba(0, 0, 0, 0.77);
  padding: 1rem;
a {
  color: white;
}
  .social {
 
    display: flex;
    justify-content: space-around;
   p {
    font-size: 1.5rem;
   }
    
  }
}

@media (min-width: 900px) {
  .nftcontainer {
    flex-direction: row;

  }
 
  .video  { #video1 {
  transform: translateX(-25%) rotateY(70deg);
   }
   #video2 {
    transform: translateX(0%) translateY(-50%)rotateY(-70deg)
   }}
 
 h2 {
   font-size: 4rem;
 }
 
  h1 {
    font-size: 4rem;
    a {
      font-size: 4rem;
    }
  }
  .video {
   
    margin: 1rem;
    }
    

  }