body {
    margin: 0 auto;
    padding: 0;
    width: 100%;
    font-family: 'Lexend', sans-serif;
    background-color: #EBF4F2;
}

.container {
    width: 85%;
    max-width: 1100px;
    height:auto;
    margin: 0 auto;
    text-align: center;
}

.name{
  font-size: 1.7rem;
  margin: 0 auto;
  height: 100%;
  width: 95%;
  max-width: 1100px;
  padding-top: 1rem;
  text-align: center;
  -webkit-animation: focus-in-contract-bck 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s both;
	        animation: focus-in-contract-bck 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s both;
        }
        
        @-webkit-keyframes focus-in-contract-bck {
    0% {
      letter-spacing: 1em;
      -webkit-transform: translateZ(300px);
      transform: translateZ(300px);
      -webkit-filter: blur(12px);
      filter: blur(12px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateZ(12px);
              transform: translateZ(12px);
              -webkit-filter: blur(0);
              filter: blur(0);
              opacity: 1;
    }
  }
  @keyframes focus-in-contract-bck {
    0% {
      letter-spacing: 1em;
      -webkit-transform: translateZ(300px);
      transform: translateZ(300px);
      -webkit-filter: blur(12px);
      filter: blur(12px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateZ(12px);
      transform: translateZ(12px);
      -webkit-filter: blur(0);
      filter: blur(0);
      opacity: 1;
    }
  }
  
.name p{
  margin: 0;
  background-image: linear-gradient(45deg, rgb(207, 199, 199),darkslategray , rgb(207, 199, 199),darkslategray);
   background-clip: text;
   -webkit-background-clip: text;
   font-family: Arial, Helvetica, sans-serif;
   font-weight: bolder;
   text-transform: uppercase;
   color:transparent;
   background-size: 400%;
   animation: bg 10s infinite alternate;
   
   font-family: 'REM', sans-serif;
   
}

@keyframes bg{
    0%{
        background-position: left;
    }

    100%{
        background-position: right;
    }
}

.type1{
    width: 100%;
    padding-block: 2rem;
    display: grid;
    place-items: center;
}

.line{
    font-family: 'Quicksand', sans-serif;
    position: relative;
    width: 15rem;
    margin: 0 auto;
    text-align: center;
    border-right: 2px solid black;
    white-space: nowrap;
    overflow: hidden;
    font-size: 1.5rem;}
    
.type{

    animation: typewriter 3s steps(40) 1s 1 normal both,
    blinktextcursor 500ms steps(40) infinite normal ;
}

@keyframes typewriter {
    from{
        width: 0;
    }
    to{
        width: 15rem;
    }
}

@keyframes blinktextcursor {
    from {
        border-right-color: black;
    } 
    to {
        border-right-color: transparent;
    }
}
.img{
    display: grid;
    place-content: center;
    
    width:100% ;
    border-radius: 16px;
}

.tilting-card-body {
    display: grid;
    place-content: center;
    text-align: center;
    box-shadow:  -5px 10px 36px 0px rgba(0,0,0,0.75);
    border-radius: 16px;
  }
  
  .mouse-position-tracker {
    position: absolute;
    width: calc(100% / 3);
    height: calc(100% / 3);
    z-index: 2;
  }
  .mouse-position-tracker {
   
  }
  
  /* 1st, 4th, 7th */
  .mouse-position-tracker:nth-child(3n - 2) {
    left: 0;
  }
  /* 2nd, 5th, 8th */
  .mouse-position-tracker:nth-child(3n - 1) {
    left: calc(100% / 3);
  }
  
  /* 2nd, 5th, 8th */
  .mouse-position-tracker:nth-child(3n) {
    right: 0;
  }
  
  /* 4 to 6 */
  .mouse-position-tracker:nth-child(n + 4):nth-child(-n + 6) {
    top: calc(100% / 3);
  }
  /* 7 to 9 */
  .mouse-position-tracker:nth-child(n + 7):nth-child(-n + 9) {
    bottom: 0;
  }
  
  .tilting-card-wrapper {
    position: relative;
    width: 16rem;
    height:16rem;
   border-radius: 12rem;
  }
  
  .tilting-card-body {
    position: absolute;
    inset: 0;
    
    background-image:url(/code.jpg);
    background-size: cover;
    background-position: center;
  }
  
  .tilting-card-body > :where(h1, p) {
    background: white;
    padding: 0.2rem;
    margin: 0;
  }
  
  .tilting-card-body {
    --perspective: 500px;
    --rotationX: 0;
    --rotationY: 0;
    --rotationZ: 0;
    --angle: 15deg;
    transform: perspective(var(--perspective)) rotateX(var(--rotationX))
      rotateY(var(--rotationY)) rotateZ(var(--rotationZ));
    transition: transform 500ms ease;
  }
  
  .mouse-position-tracker:nth-child(1):hover ~ .tilting-card-body {
    --rotationX: var(--angle);
    --rotationY: calc(var(--angle) * -1);
  }
  
  .mouse-position-tracker:nth-child(2):hover ~ .tilting-card-body {
    --rotationX: var(--angle);
  }
  
  .mouse-position-tracker:nth-child(3):hover ~ .tilting-card-body {
    --rotationX: var(--angle);
    --rotationY: var(--angle);
  }
  
  .mouse-position-tracker:nth-child(4):hover ~ .tilting-card-body {
    --rotationY: calc(var(--angle) * -1);
  }
  
  .mouse-position-tracker:nth-child(6):hover ~ .tilting-card-body {
    --rotationY: var(--angle);
  }
  
  .mouse-position-tracker:nth-child(7):hover ~ .tilting-card-body {
    --rotationY: calc(var(--angle) * -1);
    --rotationX: calc(var(--angle) * -1);
  }
  
  .mouse-position-tracker:nth-child(8):hover ~ .tilting-card-body {
    --rotationX: calc(var(--angle) * -1);
  }
  
  .mouse-position-tracker:nth-child(9):hover ~ .tilting-card-body {
    --rotationY: var(--angle);
    --rotationX: calc(var(--angle) * -1);
  }

  
  

.info{
    width: 100%;
    font: 1.2rem;
    text-align: center;
    margin-block: 2rem;
    padding: 1rem;
    border: #333 solid 1px;
    border-radius: 1rem;
    background: rgba( 255, 255, 255, 0.2 );
    box-shadow: 0 8px 12px 0 rgba( 31, 38, 135, 0.37 );
    backdrop-filter: blur( 20px );
    -webkit-backdrop-filter: blur( 20px );
    border-radius: 10px;
    border: 1px solid rgba( 255, 255, 255, 0.18 );
}

span{
    transition: .2s;
  }
  
  span:hover{
  color:#8BACA5;
  transition: .2s;
  }
  
  .tech{
    padding-block: 1rem;
    width:100%;
    font-size: 1.2rem;
    text-align: left;
}

.tech h2{
    text-align: center;
}

.tech h2:hover {
    -webkit-animation: shake-horizontal 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
	        animation: shake-horizontal 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
}

@-webkit-keyframes shake-horizontal {
    0%,
    100% {
      -webkit-transform: translateX(0);
              transform: translateX(0);
    }
    10%,
    30%,
    50%,
    70% {
      -webkit-transform: translateX(-10px);
              transform: translateX(-10px);
    }
    20%,
    40%,
    60% {
      -webkit-transform: translateX(10px);
              transform: translateX(10px);
    }
    80% {
      -webkit-transform: translateX(8px);
              transform: translateX(8px);
    }
    90% {
      -webkit-transform: translateX(-8px);
              transform: translateX(-8px);
    }
  }
  @keyframes shake-horizontal {
    0%,
    100% {
      -webkit-transform: translateX(0);
              transform: translateX(0);
    }
    10%,
    30%,
    50%,
    70% {
      -webkit-transform: translateX(-10px);
              transform: translateX(-10px);
    }
    20%,
    40%,
    60% {
      -webkit-transform: translateX(10px);
              transform: translateX(10px);
    }
    80% {
      -webkit-transform: translateX(8px);
              transform: translateX(8px);
    }
    90% {
      -webkit-transform: translateX(-8px);
              transform: translateX(-8px);
    }
  }
  

.tech ul li {
    margin-block: .5rem;
    list-style-type: none;
}

.hidden{
    opacity: 0;
    transition: all .5s;
    filter: blur(5px);
    transform: translateX(-100%);
}

.show{
    opacity: 1;
    filter: blur(0);
    transform: translateX(0);
}

ul li{
  transition:.2s;
  width: 10rem;
}
ul li:hover{
  margin-left:1rem ;
  transition:.2s;
}

.logo:nth-child(2){
    transition-delay: 200ms;
}

.logo:nth-child(3){
    transition-delay: 400ms;
}

.logo:nth-child(4){
    transition-delay: 600ms;
}

.logo:nth-child(5){
    transition-delay: 800ms;
}

.logo:nth-child(6){
    transition-delay: 1000ms;
}

.logo:nth-child(7){
    transition-delay: 1200ms;
}

.projects{
    height: auto;
    width:100%;
   
    
    margin-block: 1rem;
    font-size: 1.5rem;
  
}

.cards{
  width: 100%;
  margin: 0 auto;
}

.spin {
  width:90%;
  height: 20rem;
 margin: 0 auto;
 text-align: center;
 font-size: 1rem;
}

:root {
  --level-one: translateZ(3rem);
  --level-two: translateZ(6rem);
  --level-three: translateZ(9rem);
  
  --fw-normal: 400;
  --fw-bold: 700;
  
  --clr: #b7c9e5;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
}

.card {
  width:100%;
  height: inherit;
 padding-block: 1rem;
  border-radius: 10px;
 
}

.card__content {
  text-align: center;
  position: relative;
  height: 100%;
  transition: transform 1s;
  background: pink;
  transform-style: preserve-3d;
  border-radius: 10px;
}

.card:hover .card__content {
  transform: rotateY(.5turn);
}

.card__front,
.card__back {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 5em 3em;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  display: grid;
  align-content: center;
  border-radius: 10px;
}

.card__front {
  background-color: var(--clr);
  
  background-blend-mode: overlay;
  color: #333;
}

.card__front::before {
  content: '';
  position: absolute;
  --spacer: 1em;
  top: var(--spacer);
  bottom: var(--spacer);
  left: var(--spacer);
  right: var(--spacer);
  border: 3px solid currentColor;
  transform: var(--level-one);
}

.card__title {
  font-size: 1.5rem;
  transform: var(--level-three);
  order: 2;
  text-transform: uppercase;
}

.card__subtitle {
  transform: var(--level-two);
  text-transform: uppercase;
  letter-spacing: 4px;
  font-size: .75rem;
  font-weight: var(--fw-bold);
  opacity: .7;
}

.card__body {
  transform: var(--level-two);
  font-weight: var(fw-normal);
  font-size: 1rem;
  line-height: 1.6;
}



.card__back {
  transform: rotateY(.5turn);
  color: var(--clr);
  background: #333;
}


.projects h2 {
  font-size: 2rem;
	-webkit-animation: tracking-in-expand 0.9s cubic-bezier(0.215, 0.610, 0.355, 1.000) infinite alternate both;
	        animation: tracking-in-expand 0.9s cubic-bezier(0.215, 0.610, 0.355, 1.000) infinite alternate both;
}

@-webkit-keyframes tracking-in-expand {
    0% {
      letter-spacing: -0.5em;
      opacity: 0;
    }
    40% {
      opacity: 0.6;
    }
    100% {
      opacity: 1;
    }
  }
  @keyframes tracking-in-expand {
    0% {
      letter-spacing: -0.5em;
      opacity: 0;
    }
    40% {
      opacity: 0.6;
    }
    100% {
      opacity: 1;
    }
  }

.buttons{
  width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  place-items: center;
  margin-bottom: 1rem;
}

.btn{
width: 75%;
padding: .7rem;
border-radius:2rem ;
background-color: #333;
margin-block: 1rem;
text-decoration: none;
color: #EBF4F2;
font-weight: bold;
}

.btn:hover {
  -webkit-animation: shake-bottom 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
  animation: shake-bottom 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
}

@-webkit-keyframes shake-bottom {
  0%,
  100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-transform-origin: 50% 100%;
            transform-origin: 50% 100%;
  }
  10% {
    -webkit-transform: rotate(2deg);
            transform: rotate(2deg);
  }
  20%,
  40%,
  60% {
    -webkit-transform: rotate(-4deg);
            transform: rotate(-4deg);
  }
  30%,
  50%,
  70% {
    -webkit-transform: rotate(4deg);
            transform: rotate(4deg);
  }
  80% {
    -webkit-transform: rotate(-2deg);
            transform: rotate(-2deg);
  }
  90% {
    -webkit-transform: rotate(2deg);
            transform: rotate(2deg);
  }
}
@keyframes shake-bottom {
  0%,
  100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-transform-origin: 50% 100%;
            transform-origin: 50% 100%;
  }
  10% {
    -webkit-transform: rotate(2deg);
            transform: rotate(2deg);
  }
  20%,
  40%,
  60% {
    -webkit-transform: rotate(-4deg);
            transform: rotate(-4deg);
  }
  30%,
  50%,
  70% {
    -webkit-transform: rotate(4deg);
            transform: rotate(4deg);
  }
  80% {
    -webkit-transform: rotate(-2deg);
            transform: rotate(-2deg);
  }
  90% {
    -webkit-transform: rotate(2deg);
            transform: rotate(2deg);
  }
}

  .foot{
    width: 100%;
    height: 8rem;
    background-color:  rgb(25, 25, 25);
    text-align: center;
    padding-top: 1rem;
    color:#b7c9e5
}

.scroll {
  white-space: nowrap;
  overflow: hidden;
  margin-block: 1rem;
}

.scroll div {
  display: flex;
  gap: 6em;
}

.scroll p {
  padding-block: 1rem;
  font-size: 2em;
  color: black;
  font-weight: bold;
  margin-bottom: 0;
  line-height: 10px;
}

.RightToLeft {
  animation: RightToLeft 25s infinite linear;
}

@keyframes  RightToLeft {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(-50%);
  }
}



  @media (min-width: 850px){

  .name{
    font-size: 3.7rem;
  }
  .line{
    width: 35rem;
    font-size: 3.5rem;
  }

    @keyframes typewriter {
      from{
          width: 0;
      }
      to{
          width: 35rem;
      }
  }

  .tilting-card-wrapper {
    position: relative;
    width: 32rem;
    height:32rem;
   border-radius: 12rem;
  }

  .info {
    font-size: 2rem;
    margin: 0 auto;
    margin-top: 2rem;
    padding:2rem;
    width: 80%;
  }

  .info p{
    padding-block: .3rem;
  }

  .tech {
    font-size: 1.5rem;
  }

  .tech h2{
    width: 20%;
    margin: 0 auto;
  }

  .spin {
    width:70%;
    height: 40rem;
   margin: 0 auto;
   text-align: center;
   font-size: 1rem;
  }

  .scroll p{
    font-size: 3rem;
    margin-block: 2rem;
  }
}