@tailwind base;
@tailwind components;
@tailwind utilities;


html{
  overflow-x: hidden;
}
body{
  overflow-x: hidden;
}
/*===== general setup =====*/
input[type="email"], input[type="password"], input[type="text"], input[type="tel"], textarea{
  @apply border p-2 block my-2 w-full rounded-md outline-none border-[#DCA0AE]
}
/*===== strokel =====*/
.text-stroke-3 {
  text-shadow: -1px -1px 0 #95743D, 2px -1px 0 #95743D, -1px 2px 0 #95743D, 1px 1px 0 #95743D;
} 
/*== logo ==*/
.circle{
    animation: animate 17.5s linear infinite;
}
@keyframes animate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.letter {
  transform-origin: 0 50px;
}
/*===== profile =====*/
div.tabs > *{
  @apply py-1 px-2 sm:py-2 sm:px-3 bg-gray-200 text-gray-700 rounded-md text-sm sm:text-base 
}
div.tabs > *.active{
  @apply bg-pink-500 text-white font-semibold
}
/*=====about card flip=====*/
.flip-card{
  background-color: transparent;
  perspective: 1000px;
}
.flip-card-inner{
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  backface-visibility: hidden;
  -moz-backface-visibility: hidden;
}
.flip-card:focus{
    outline: 0;
}
.flip-card:hover .flip-card-inner, .flip-card:focus .flip-card-inner{
  transform: rotateY(180deg);
}
.flip-card-front1, .flip-card-back, .flip-card-front2, .flip-card-back{
  position: absolute;
  width: 100%;
  height: 100%;
}
.flip-card-front1{
  z-index: 2;
}
.flip-card-front2{
  z-index: 2;
}
.flip-card-back{
  background: white;
  color: black;
  transform: rotateY(180deg);
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
h3{
  font-size: 20px;
  font-family: Verdana, sans-serif;
  font-weight: bold;
  color: black;
}

/*=====Responsive=====*/
@media (min-width: 765px){
  .letter {
    transform-origin: 0 70px;
  }
}