.card2X{
  padding: min(2%, 3%);
  background-color: rgb(13, 13, 20);
}
.h1Card{
  
  display: absolute;
  justify-content: right;
  align-items: left;
  background-color: #0071FF;
  //font-size: 40pt;
}
.cardX{
  color:rgba(255,255,255,1);
  border: 1px solid rgb(75, 82, 92);
  border-radius: 10px;
  background-color: rgba(35,44,200,.7);
  text-align: left;
    
      margin: 13% 1% 1% 1%;
  padding: clamp(1%, 2%, 4%);
  
  width: clamp(40%,50%,70%);
  grid-row-start: 1;
  grid-column-start: 2;
      //grid-area: 1 / 1 / span 2 / span 3;
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3), 0 6px 20px 0 rgba(0, 0, 0, 0.29);
    }

.fh2{
      font-family: 'Xoutfit', sans-serif;
  font-weight:600;
  //font-size:clamp(.8em, 1.3em, 3.2em);
  /*color: white;*/


  
      
 color: rgba(129,200,233,1);     
      /*font-size : clamp(1rem, 2vw, 3rem);*/
      font-size: calc(1em + 1.2vmin);
      line-height: 90%; 
      word-spacing: -50%;
      
    }
    .xp{
      margin-top: 0%;
       font-family:"Xoutfit", sans-serif;
      /*font-size: clamp(1rem, 1.6rem, 3rem);*/
      font-size: calc(1em + 1.6em);
      line-height: 120%;
      /*font-size: calc(1.25rem + 1.9    vmin);*/
      color:rgba(239, 250, 250,1);
    }



.cardX3 {
  color:rgba(255,255,255,1);
  border: 1px solid rgb(75, 82, 92);
  border-radius: 10px;
  background-color: rgba(15,14,50,.9);
  text-align: left;
  margin: -5% 2% 0% 15%;
  padding: clamp(2%, 3%, 5%);
  //grid-row-start: 2;
  //grid-column-start: 3;
  //grid-area: 1 / 3 / span 1 / span 1;
  width: clamp(50%,80%,90%);
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3), 0 6px 20px 0 rgba(0, 0, 0, 0.29);
  

}

.cardX4 {
  
  color:rgba(255,255,255,1);
  border: 1px solid rgb(75, 82, 92);
  border-radius: 10px;
  background-color: rgba(15,14,50,.9);
  text-align: left;
  margin: -5% 2% -0% 5%;
  padding: clamp(2%, 3%, 5%);
  //grid-row-start: 1;
  grid-column-start: 3;
//  grid-area: 1 / 3 / span 1 / span 1;
  width: clamp(25%,30%,50%);
  
  //box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3), 0 6px 20px 0 rgba(0, 0, 0, 0.29);

  

}

.grid-containerC{
  display: grid;
  grid-template-columns: repeat(minmax(35%, 1fr));
  gap: clamp(.5% 1% 2%);
  justify-content: center;
  grid-template-rows: auto;
    align-items: start;
 align-self: center;
 justify-self: center;
 padding: clamp(4%, 5%, 7%);
 //grid-auto-flow:column dense;
 
}

/* Animate - Border CSS */
.cardAnimate{
  margin: 0 auto;
  padding: clamp(1%, 3%, 6%);
  width: 35%;
  background: rgba(15,14,200,.7)
  text-align: center;
  border-radius: 10px;
  position: relative;
}

@property --angle{
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

.cardAnimate::after, .cardAnimate::before{
  content: '';
  position: absolute;
  height: 100%;
  width: 100%;
  background-image: conic-gradient(from var(--angle), #090979, #00008F, #006aff, #9FC0C7, #00D4FF);
  /*background-image: linear-gradient(from var(--angle), #ff4545, #00ff99, #006aff, #ff0095, #ff4545);*/
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  z-index: -1;
  padding: 3px;
  border-radius: 10px;
  animation: 25s spin linear infinite;
  opacity: .5;
}
.cardAnimate::before{
  filter: blur(15.5rem);
  opacity: 0.4;
}
@keyframes spin{
  from{
    --angle: 0deg;
  }
  to{
    --angle: 360deg;
  }

 /*
 //grid-template-columns: 1fr 1fr 1fr 1fr;
  
  //grid-template-columns: auto 1fr auto;
  //grid-template-columns: repeat(3, auto);
  //grid-auto-columns: minmax(100px, auto) auto max-content fit-content(250px);
  //grid-auto-columns: auto auto auto;
//grid-auto-columns: fit-content(300px) fit-content(300px) 1fr;
//grid-auto-columns: 1fr 1fr 1fr;
//grid-auto-flow: column;
 //grid-auto-columns: 240px;
  //grid-template-columns: 300px 300px 300px;
  //grid-auto-rows: 300px;
  //grid-template-rows: repeat(2, auto);
  .grid-containerCard{
  display: grid;
  width: 100%;

  //grid-template-rows: auto;
//  grid-template-columns: repeat(3, 1fr;);
  //grid-auto-rows: 35%;
//grid-template-columns: repeat(4, auto-fill);
// grid-template-columns: repeat(auto-fit, minmax(30%, 1fr));
grid-template-columns: fit-content(35%) fit-content(35%) fit-content(35%) fit-content(35%);
align-items: start;
 align-self: center;
 justify-self: center;
 //grid-auto-flow:column dense;
 gap: clamp(1% 2% 4%);
 
}
*/