@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;700&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  color: white;
}

body {
  background-color: rgba(0, 0, 0, 0.952);
  font-family: "Poppins", sans-serif !important;
}

::-webkit-scrollbar {
  width: 5px;
}

::-webkit-scrollbar-thumb {
  background: rgb(245, 17, 17);
}

::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.952);
}

.ajal {
  position: fixed;
  top: 0;
  left: 0;
  margin: 10px;
}

.ajal a {
  text-decoration: none;
  font-size: 30px;
  color: rgba(8, 197, 125, 0.7);
  text-shadow: 3px 3px black;
}

.smallName {
  /* color: rgb(245, 17, 17); */
  background: linear-gradient(45deg, rgb(161, 159, 159), rgb(250, 246, 246));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: normal;
  animation: nameAnime 1s cubic-bezier(0.165, 0.84, 0.44, 1) 2.5s forwards;
  opacity: 0;
}

@keyframes nameAnime {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.topDiv,
.contact {
  min-height: 100vh;
  /* height: auto; */
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-direction: column;
  padding: 30px;
  background-color: #2a2929;
}

.topDiv {
  position: relative;
}

.topDiv h1 {
  background: linear-gradient(45deg, rgb(44, 44, 44), rgb(116, 115, 115));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 100px;
  letter-spacing: 3px;
  text-transform: uppercase;
  animation: portfolio 1s forwards ease-in 1s;
  transform: translateX(3%);
  opacity: 0;
}

@keyframes portfolio {
  to {
    opacity: 1;
    letter-spacing: 25px;
  }
}

.left-line {
  position: absolute;
  bottom: 50%;
  left: 0%;
  /* background: linear-gradient(0deg, rgb(168, 167, 167), rgb(240, 238, 238)); */
  background: rgb(245, 17, 17);
  width: 100vw;
  height: 4px;
  animation: line 2s forwards ease-in;
  transform: translate(-50%, -50%);
}

@keyframes line {
  0% {
    transform: translateX(-100%);
  }
  50% {
    transform: translateX(0);
  }
  100% {
    transform: translateY(-100%);
    opacity: 0;
  }
}

.contact {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

.topDiv .name {
  font-size: 100px;
  letter-spacing: 20px;
  text-shadow: 3px 3px black;
  animation: name 3.5s cubic-bezier(0, 0, 0.85, 1.01);
}

@keyframes name {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.content {
  min-height: 100vh;
  width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 30px;
  background-color: #2a2929;
  text-align: center;
}

.about,
.projects {
  flex: 1;
  height: 90vh;
  width: 200px;
}

.flipCard,
.mainCard {
  width: 100%;
  height: 100%;
  transition: all 1.5s ease-in-out;
  transform-style: preserve-3d;
}

.about:hover .flipCard {
  transform: rotateY(180deg);
  cursor: pointer;
}

.projects:hover .mainCard {
  transform: rotateY(180deg);
  cursor: pointer;
}

.about figure,
.projects figure {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.aboutFront,
.projectsFront {
  width: 100%;
  height: 100%;
  background-color: #2a2929;
  color: rgb(245, 17, 17);
  font-size: 30px;
  letter-spacing: 5px;
}

.aboutBack,
.projectsBack {
  width: 100%;
  height: 100%;
  transform: rotateY(180deg);
  background-color: #252525;
  color: white;
}

.aboutBack {
  flex-direction: column;
  height: 100%;
  justify-content: space-evenly !important;
  padding: 20px;
}

.projectsBack {
  flex-direction: column;
  /* justify-content: space-around !important; */
}

.image {
  background-blend-mode: lighten;
  border-radius: 50%;
  width: 200px;
  height: 200px;
  margin-bottom: 10px;
  animation: shad infinite 2s alternate-reverse ease-in-out;
}

@keyframes shad {
  0% {
    filter: drop-shadow(0px 1px 11px rgb(245, 17, 17));
  }
  100% {
    filter: drop-shadow(0px 1px 25px rgb(245, 17, 17));
  }
}

.contactDescContainer {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin: 50px;
}

.contactDescContainer a {
  text-decoration: none;
  font-size: 30px;
  color: white;
  transition: all 0.5s ease-in-out;
}

.contactDescContainer a:hover {
  transform: scale(1.5);
  color: rgb(245, 17, 17);
}

.aboutHeadContainer h1 {
  color: rgb(245, 17, 17);
  font-size: 50px;
  font-weight: normal;
  letter-spacing: 5px;
}

.skill {
  margin: 20px 0px 20px 0px;
}

.bar {
  background: rgba(175, 175, 175, 0.432);
  width: 300px;
  height: 10px;
  border-radius: 30px;
  margin-top: 10px;
}

.level {
  /* background: linear-gradient(-90deg, #e60808, #e21d1dc0); */
  background: rgb(230, 8, 8);
  background: linear-gradient(
    90deg,
    rgba(230, 8, 8, 1) 74%,
    rgba(233, 88, 56, 1) 100%
  );
  height: 100%;
  border-radius: 30px;
}

.mic {
  width: 200px;
  height: 200px;
}

#MainMic {
  animation: mic 5s infinite cubic-bezier(0.73, -0.34, 0.57, 1.13) alternate 2s;
}

@keyframes mic {
  from {
    transform: translateY(-10%);
  }
  to {
    transform: translateY(50%);
  }
}

@media screen and (max-width: 780px) {
  .topDiv h1 {
    font-size: 50px;
    letter-spacing: 10px !important;
  }
  .content {
    flex-direction: column !important;
  }

  .about,
  .projects {
    width: 450px;
  }
}

@media screen and (max-width: 480px) {
  .topDiv h1 {
    font-size: 35px;
    letter-spacing: 10px !important;
  }
  .content {
    flex-direction: column !important;
  }
  .about,
  .projects {
    width: 320px;
  }
}