style.css

@import url("https://use.typekit.net/jmk3xov.css");

canvas {
  position: fixed;
  top: 0;
  left: 0;
}


:root {
  --dark-bg: #f6feff(15, 15, 15, 0.95);
  --spacing: 350px;

  font-family: brandon-grotesque, sans-serif;
  font-weight: 400;
  font-style: normal;
}


main {
  width: 100vw;
  color: rgb(82, 171, 227);
  z-index: 99;
  position: absolute;
  width: 100%;
  margin: 0px auto;
  padding: 120px 0px;
  
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}

h1, h3, blockquote {
  font-family: elevon, sans-serif;
  font-weight: 700;
  font-style: normal;
}

canvas {
  position: fixed;
  top: 0;
  left: 0;
}




  header {
    background: var(--dark-bg);
    grid-column: 2 / span 5;
    font-size: 2.5rem;
    padding: 2rem;
    margin-bottom: var(--spacing);
  }

  section {
    grid-column: 2 / 8;
    padding: 1rem;
    background: var(--dark-bg);
    font-size: 1.25rem;
    line-height: 1.5;
    margin-bottom: var(--spacing);
  }
  

  blockquote {
    margin: 0;
    padding: 0;
    grid-column: 2 / span 9;
    margin-bottom: var(--spacing);
  }

  blockquote p {
    color: black;
    background-color: rgb(227, 236, 238);
    font-size: 2rem;
    display: inline;
    line-height: 1;
  }

  img {
    opacity: 0.5;
  }
  
  img:hover {
    
    opacity: 1.0;
  }

  .left {
    grid-column: 6 / 12;
  }

h2{
  
  display: inline-block;
  font-size: 2em;
  font-weight: 500;
  color:#222;
  letter-spacing: 5px;
  cursor: pointer;
}
h2 span{
  transition: 0.5s;
}
h2:hover span:nth-child(1)
{
  margin-right: 10px;
}
h2:hover span:nth-child(1)::after{
  content:"BE-12th-10th"
}
h2:hover span:nth-child(2)
{
  margin-left: 10px;
}
h2:hover span:nth-child(1)::after{
  color: #fff;
  text-shadow: 0 0 10px #fff,
               0 0 20px #fff,
               0 0 40px #fff,
               0 0 80px #fff,
               0 0 1200px #fff;
}
h1{
  
  display: inline-block;
  font-size: 2em;
  font-weight: 500;
  color:#222;
  letter-spacing: 5px;
  cursor: pointer;
}
h1 span{
  transition: 0.5s;
}
h1:hover span:nth-child(1)
{
  margin-right: 10px;
}
h1:hover span:nth-child(1)::after{
  content:"Data-Analysis & Three.js"
}
h1:hover span:nth-child(2)
{
  margin-left: 10px;
}
h1:hover span:nth-child(1)::after{
  color: #fff;
  text-shadow: 0 0 10px #fff,
               0 0 20px #fff,
               0 0 40px #fff,
               0 0 80px #fff,
               0 0 1200px #fff;
}
h3{
  
  display: inline-block;
  font-size: 2em;
  font-weight: 500;
  color:#222;
  letter-spacing: 5px;
  cursor: pointer;
}
h3 span{
  transition: 0.5s;
}
h3:hover span:nth-child(1)
{
  margin-right: 10px;
}
h3:hover span:nth-child(1)::after{
  content:"Intership"
}
h3:hover span:nth-child(2)
{
  margin-left: 10px;
}
h3:hover span:nth-child(1)::after{
   color: #fff;
  text-shadow: 0 0 10px #fff,
               0 0 20px #fff,
               0 0 40px #fff,
               0 0 80px #fff,
               0 0 1200px #fff;
}
.light{
  margin: 0;
  padding: 0;
  grid-column: 2 / span 9;
  display: inline-block;
  position: relative;
  font-size: 2em;
  letter-spacing: 0.5px;
  color: #0e3742;
  text-transform: uppercase;
  width: 100%;
  text-align: center;
  -webkit-box-reflect: below 1px linear-gradient(transparent,#0008);
  line-height: 0.70em;
  outline: none;
  animation: animate2 5s linear infinite;
}

@keyframes animate2 
{
  0%,18%,20%,50.1%,60%,65.1%,80%,90.1%,92%
  {
    color: #0e3742;
    text-shadow: none;
  }
  18.1%,20.1%,30%,50%,60.1%,65%,80.1%,90%,92.1%,100%
  {
    color: #fff;
    text-shadow: 0 0 10px #03bcf4,
    0 0 20px #03bcf4,
    0 0 40px #03bcf4,
    0 0 80px #03bcf4,
    0 0 160px #03bcf4;
  }
}
.light2{
  margin: 0;
  padding: 0;
  grid-column: 2 / span 9;
  margin-bottom: var(--spacing);
  display: inline-block;
  position: relative;
  font-size: 2em;
  letter-spacing: 0.5px;
  color: #0e3742;
  text-transform: uppercase;
  width: 100%;
  text-align: center;
  -webkit-box-reflect: below 1px linear-gradient(transparent,#0008);
  line-height: 0.70em;
  outline: none;
  animation: animate9 5s linear infinite;
}

@keyframes animate9 
{
  0%,18%,20%,50.1%,60%,65.1%,80%,90.1%,92%
  {
    color: #0e3742;
    text-shadow: none;
  }
  18.1%,20.1%,30%,50%,60.1%,65%,80.1%,90%,92.1%,100%
  {
    color: #fff;
    text-shadow: 0 0 10px #03bcf4,
    0 0 20px #03bcf4,
    0 0 40px #03bcf4,
    0 0 80px #03bcf4,
    0 0 160px #03bcf4;
  }
}
/* h4
{
  position: relative;
  margin: 0;
  font-size: 4em;
  font-weight: 900;
  color: #fff;
  z-index: 1;
  overflow: hidden;
}
h4: before{
  content: '';
  position:absolute;
  left: 110%;
  width: 120%;
  height: 100%;
  background: linear-gradient(90deg,transparent 0%,#000 5%,#000 100%);
  animation: animate 5.5s linear forwards;
}
@keyframes animate {
  0%{
    left: 110%
  }
  100%
  {
    left: 120%
  }
  
}
h4 span
{
  color: #ff022c;
} */

.neon {
  margin: 0;
  padding: 0;
  grid-column: 2 / span 9;
  margin-bottom: var(--spacing);
  display: inline-block;
  position: relative;
  font-size: .8em;
  letter-spacing: 0.5px;
  margin: 0;
  padding: 0;
  width: 100%;
  color: #fff;
  text-transform: uppercase;
  font-weight: 10;
  text-shadow: 0 0 10px rgba(255,255,255,1),
  0 0 20px rgba(255,255,255,1),
  0 0 40px rgba(255,255,255,1),
  0 0 80px rgba(255,255,255,1),
  0 0 160px rgba(255,255,255,1);
}

h4{

  position: relative;
  font-size: 5vw;
  color: #000000;
  -webkit-text-stroke: 0.3vw #383d52;
  text-transform: uppercase;


}
h4::before{
  mix-blend-mode: lighten;
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 0%;
  height: 110%;
  color: #5ff0ac;
  -webkit-text-stroke: 0vw #010410;
  border-right: 2px solid #70eab1;
  overflow: hidden;
  animation: animate 6s linear infinite;

}
  @keyframes animate{
    0%,20%,100%
    {
      width:0;
    }
    70%,90%
    {
      width:100%;
    }
  }

 /* .water {
  position: relative;
   display: inline-block;
   margin: 0%;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins',sans-serif;
    grid-column: 2 / span 9;
    margin-bottom: var(--spacing);
 } 
.water h2{
  position: absolute;
  transform: translate(-50%,-50%);
  font-size: 3em;
}
.content h2:nth-child(1)
{
  color: transparent;
  -webkit-text-stroke: 2px #03a9f4;
}
.content h2:nth-child(2)
{
  color: #03a9f4;
  animation: animateW 4s ease-in-out infinite;
}
@keyframes animateW
{
  0%,100%
  {
    clip-path: polygon(0% 45%,15% 44%,32% 50%,
    54% 60%,70% 61%,84% 59%,100% 52%,100% 100%,
    0% 100%);
  }
  50%
  {
    clip-path: polygon(0% 60%,16% 65%,34% 66%,
    51% 62%,67% 50%,84% 45%,100% 46%,100% 100%,
    0% 100%);
  }
} */

.Gcontainer {
  position: relative;
  display:flex;
  justify-content: center;
  align-items: center;
  max-width: 1200px;
  flex-wrap: wrap;
  z-index: 1;
}
.Gcontainer .card{
  position: relative;
  width: 280px;
  height: 400px;
  margin: 30px;
  box-shadow: 20px 20px 50px rgba(0,0,0,0.5);
  border-radius: 2em;
  background: rgba(255,255,255,0.1);
  overflow:auto;
  display: flex;
  justify-content: center;
  align-items: center;
  border-top: 1px solid rgba(255,255,255,0.5);
  border-left: 1px solid rgba(255,255,255,0.5);
  backdrop-filter: blur(5px);
}


.Gcontainer .card .contentR
{
  padding: 0.3px;
  text-align: center;
  transition: 0.5s;

}

.Gcontainer .card .contentR h2{
  position: absolute;
  top: -80px;
  right: 0;
  font-size: 1em;
  color: rgba(255,255,255,0.5);
  pointer-events: none;
}
.Gcontainer .card .contentR h3{
   font-size: 1em;
   color: #fff;
   z-index: 0;

}
.Gcontainer .card .contentR p{
  font-size: .6em;
  color: #fff;
  font-weight: 30;
}

.pos1{
  grid-column: 2 / 8;
    padding: 0rem;
    background: var(--dark-bg);
    font-size: 1.25rem;
    line-height: 1.5;
    margin-bottom: var(--spacing);
}

.pos1{
  grid-column: 1 / 8;
    padding: 4rem;
    background: var(--dark-bg);
    font-size: 1.25rem;
    line-height: 1.5;
    margin-bottom: var(--spacing);
}

.Pin:hover{
  text-shadow: 0 0 10px hsl(69, 98%, 48%),
    0 0 20px hsl(73, 98%, 48%),
    0 0 40px hsl(73, 98%, 48%),
    0 0 80px hsl(60, 98%, 48%),
    0 0 160px hsl(66, 98%, 48%);

}
.Pin2:hover{
  text-shadow: 0 0 10px #f00947,
    0 0 20px #f00947,
    0 0 40px #f00947,
    0 0 80px #f00947,
    0 0 160px #f00947;


}

li{
  color: #f6feff;
}