@import url('https://fonts.googleapis.com/css2?family=Concert+One&display=swap');
.my-projects-sec{
    /* background: linear-gradient(#ecdd4e,#4eec95, #1ecfcf); */
    min-height:100vh ;
    min-width: 100vw;
    
  }

 

  .project-header{
    color: #000000;
    text-align: center;
    font-size: 2.3em;
    letter-spacing: 5px;
    font-family: 'Concert One', cursive;
    /* animation: forHeader 3s linear; */
    animation-iteration-count: infinite;
    animation-direction: alternate;
  }


  .project-header-span{
    color: #fff;
    -webkit-text-stroke: 2px rgb(238, 5, 5);
  }
    /* animation : stroke 2s linear ;
    animation-iteration-count: infinite;
  }
  
  @keyframes stroke{
    25%{
      -webkit-text-stroke-color: rgb(255, 0, 128);
    }
    50%{
      -webkit-text-stroke-color: rgb(0, 247, 255);
    }
    75%{
      -webkit-text-stroke-color: rgb(162, 0, 255);
    }
    100%{
      -webkit-text-stroke-color: rgb(218, 173, 26);
    }
  } */



  .project-frames{
    display: flex;
    margin-top: 4%;
    flex-wrap: wrap;
    justify-content: space-evenly;
  }

  .project-frames > div{
    display: flex;
    flex-direction: column;
  }

  .project-frames > div > iframe{
    width: 30vw;
    height: 70vh;
    margin-top: 20px;
    border: 5px solid #ffffff;
  }

  .frame-names{
    margin-top:10px;
    text-align: center;
    font-weight: 700;
    letter-spacing: 1px;
  }

  .frame-names > a:hover{
   color: #000000;
   text-shadow: 0px 2px 4px #09d3ee;
  }

   @media screen and (max-width:600px){
    .project-header{
      font-size: 1.8em;
    }
    .project-frames > div > iframe{
      width: 90vw;
      height: 70vh;
      margin-top: 20px;
      border: 5px solid #ffffff;
    }
    .last-child{
      margin-bottom: 50px !important;
    }
  }