html{
  margin: 0;
    overflow-x: hidden;
  
}
body, h1, h2, h3, p, ul, li {
  margin: 0;
  padding: 0;

}
nav{
  background-color: #ffffff;
  color: #252525;
  
}
/* Set a basic font family and size */
body {
  background-color: #f5f5f5;
  
  margin: 0;
 


  font-family: 'Open Sans', sans-serif;
  /* font-size: 16px; */
  line-height: 1.6;
  color: #252525; /* Set your desired text color */
}
.signature{
  font-family: 'Ms Madi', sans-serif;
  font-weight: 400;
  font-size: 2rem;
  /* text-decoration: underline;
  text-decoration-thickness: 1px; */
  color: rgb(179, 0, 0);
  transform: rotate(-5deg);
}
 
h1, h2, h3 {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  margin-bottom: 7px;
}
.sub-heading{

font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  font-size: 1rem;
  margin-bottom: 7px;
}



h1 {
  font-size: 3.3em;
}

h2 {
  font-size: 2em;
}

h3 {
  color: rgb(241, 239, 239);
  font-size: 1.5rem;
  /* font-weight: 100; */
}

/* Style paragraphs and basic text */
p {
  font-family: 'Open Sans', sans-serif;
  font-size: 1rem;
  font-weight: 400;
}

/* Style unordered lists */
ul {
  list-style-type: disc;
  margin-bottom: 15px;
}

/* Style links */
a {
  color: #000000; /* Set your desired link color */
  text-decoration: none;
}

.hover-underline-animation {
  display: inline-block;
  position: relative;
  color: #000101;
}

.hover-underline-animation::after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #000000;
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
}

.hover-underline-animation:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}
  
 
.css-selector {
  background: linear-gradient(270deg, #001708, #0d2413,#39463c, #39463d);
  background-size: 600% 600%;
color: white;
  -webkit-animation: AnimationName 17s ease infinite;
  -moz-animation: AnimationName 17s ease infinite;
  animation: AnimationName 17s ease infinite;
}

@-webkit-keyframes AnimationName {
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
@-moz-keyframes AnimationName {
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
@keyframes AnimationName {
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
  
/* .circular--portrait { position: relative; width: 230px; height: 230px; overflow: hidden; } 
.circular--portrait img { width: 100%; height: auto; }   */
.circular--portrait {
  position: relative;
  width: 230px;
  height: 230px;
  overflow: hidden;
  border: 8px solid #fff; /* White border */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Shadow effect */
}

.circular--portrait img {
  width: 100%;
  height: auto;
  /* border-radius: 50%; */
}

.circular--portrait:hover {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Shadow effect on hover */
  transform: rotate(-5deg);
  

}

.skills_icon{
  width: auto;
  height: 5rem;
}


/* copied fromm movie */

.description {
  width: 100%;
  margin-top: 0;
  margin-left: 1rem;
  margin-bottom: 3rem;
}
.card {
  color: inherit;
  cursor: pointer;
  width: calc(100% - 3rem);
  min-width: calc(100% - 3rem);
  height: 400px;
  min-height: 400px;
  perspective: 1000px;
  margin: 1rem auto;
  position: relative;
}
@media screen and (max-width: 800px) {
  .card {
    width: calc(50% - 3rem);
 }
}
@media screen and (max-width: 500px) {
  .card {
    width: 100%;
 }
}

@keyframes levitate {
  0%, 100% {
    transform: translate(0, 0);
    transform: translateX(0);
  }
  25% {
    transform: translate(-20px, -20px); /* Move left and up */
  }
  40%{
    /* transform: translateX(calc(100vw - 800px));  */
    /* Move to the right side of the screen */

  }
  50% {
    transform: translate(20px, 20px); /* Move right and down */

  }
  75% {
    transform: translate(-10px, -10px); /* Move left and up slightly */
  }
}

.levitating-image {
  width: 300px;
  height: auto;
  position: absolute;
  z-index: -1;
  animation: levitate 12s linear infinite; /* Adjust the duration as needed */
}

.levitating-image:hover {
  transform: scale(2);
  -webkit-transform: scale(2); /* Safari and older versions of Chrome and Opera */
  -moz-transform: scale(2); /* Firefox */
  -ms-transform: scale(2); /* Internet Explorer */
  -o-transform: scale(2); /* Opera */
}