.firstinfo, .badgescard, body {
  display: flex;
  justify-content: center;
  align-items: center;
}

html {
  height: 100%;
}

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  width: 100%;
  min-height: 100%;
  background: #ffffff;
  font-size: 16px;
  overflow: hidden;
  cursor: none;
}
  
*, *:before, *:after {
  box-sizing: border-box;
}

.content {
    position: relative;
    animation: animatop 0.9s cubic-bezier(0.425, 1.14, 0.47, 1.125) forwards;
    display: flex;

}

.card {
  width: 500px;
  min-height: 100px;
  padding: 20px;
  border-radius: 3px;
  background-color: white;
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
  position: relative;
  overflow: hidden;
}
.card:after {
  content: "";
  display: block;
  width: 250px;
  height: 550px;
  background: cadetblue;
  position: absolute;
  animation: rotatemagic 0.75s cubic-bezier(0.425, 1.04, 0.47, 1.105) 1s both;
}

.badgescard {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 10px 20px;
  border-radius: 3px;
  background-color: #ECECEC;
  width: 480px;
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
  position: absolute;
  z-index: -1;
  left: 10px;
  bottom: 10px;
  animation: animainfos 0.5s cubic-bezier(0.425, 1.04, 0.47, 1.105) 0.75s forwards;
}
.badgescard span {
  font-size: 1.6em;
  margin: 0px 6px;
  opacity: 0.6;
}

.firstinfo {
  flex-direction: row;
  z-index: 2;
  position: relative;
}
.firstinfo img {
  border-radius: 50%;
  width: 120px;
  height: 120px;
}
.firstinfo .profileinfo {
  padding: 0px 20px;
}
.firstinfo .profileinfo h1 {
  font-size: 1.8em;
}
.firstinfo .profileinfo h3 {
  font-size: 1.2em;
  color: #009688;
  font-style: italic;
}
.firstinfo .profileinfo p.bio {
  padding: 10px 0px;
  color: #5A5A5A;
  line-height: 1.2;
  font-style: initial;
}

@keyframes animatop {
  0% {
    opacity: 0;
    bottom: -500px;
  }
  100% {
    opacity: 1;
    bottom: 0px;
  }
}
@keyframes animainfos {
  0% {
    bottom: 10px;
  }
  100% {
    bottom: -42px;
  }
}
@keyframes rotatemagic {
  0% {
    opacity: 0;
    transform: rotate(0deg);
    top: -24px;
    left: -253px;
  }
  100% {
    transform: rotate(-30deg);
    top: -24px;
    left: -78px;
  }
}

:root {
    --bubble-diameter: 1300px;
    --bubble-color: cadetblue;
    --cursor-color: #009688;
    --animation-duration: 2s;
    --animation-easing: ease-in-out;
}

.bubble-1 {
    width: var(--bubble-diameter);
    height: var(--bubble-diameter);
    background-color: var(--bubble-color);
    position: absolute;
    right: 0;
    transform: translateX(50%);
    border-radius: 50%;
    z-index: -1;
    transition: all var(--animation-duration) var(--animation-easing);
}

@keyframes bubbleGrow {
    0% { transform: scale(1); }
    50% { transform: scale(1.15); }
    100% { transform: scale(0.15); }
}

@keyframes bubbleExpand {
    0% { transform: scale(0.15); z-index: -1; }
    100% { transform: scale(1.7); z-index: 9999; }
}

#bubble.animate {
    animation: bubbleGrow var(--animation-duration) var(--animation-easing) forwards;
}

#bubble.animate2 {
    animation: bubbleExpand var(--animation-duration) var(--animation-easing) forwards;
}

.bubble-2 {
    width: 800px;
    height: 800px;
    background-color: var(--bubble-color);
    position: absolute;
    left: 0;
    top: 0; /* Positions it at the top of the container */
    transform: translate(-50%, -50%); /* Centers it vertically and horizontally */
    border-radius: 50%; /* Makes it a circle */
    z-index: -1; /* Places it behind the text */
    transition: all 2s ease-in-out;

}

.bubble-3 {
    width: 200px; /* Adjust as needed */
    height: 200px; /* Adjust as needed */
    background-color: var(--bubble-color); /* Adjust as needed */
    position: absolute;
    left: 300px; /* X position */
    top: 500px; /* Y position */
    border-radius: 50%; /* Makes it a circle */
    z-index: -1; /* Places it behind the text */
    transition: all 2s ease-in-out;

}

@keyframes moveAround {
    0% {
        transform: translate(-50%, -50%);
    }
    25% {
        transform: translate(-55%, -45%);
    }
    50% {
        transform: translate(-50%, -50%);
    }
    75% {
        transform: translate(-45%, -55%);
    }
    100% {
        transform: translate(-50%, -50%);
    }
}

@keyframes moveAroundBubble1 {
    0% {
        transform: translate(45, 0);
    }
    25% {
        transform: translate(50%, -5%);
    }
    50% {
        transform: translate(-50, 0);
    }
    75% {
        transform: translate(50%, 5%);
    }
    100% {
        transform: translate(55, 0);
    }
}

.bubble-1 {
    animation: moveAroundBubble1 10s ease-in-out infinite;
}
.bubble-2 {
    animation: moveAround 10s ease-in-out infinite;
}
.bubble-3{
    animation: moveAround 12s ease-in-out infinite;
}


@media screen and (min-width: 768px) {
    .cursor {
        width: 50px;
        height: 50px;
        border-radius: 100%;
        border: 1px solid black;
        transition: all 200ms ease-out;
        position: fixed;
        pointer-events: none;
        left: 0;
        top: 0;
        transform: translate(calc(-50% + 15px), -50%);
        z-index: 99990;
      }
      
      .cursor2 {
        width: 20px;
        height: 20px;
        border-radius: 100%;
        background-color: var(--cursor-color);
        opacity: .3;
        position: fixed;
        transform: translate(-50%, -50%);
        pointer-events: none;
        transition: width .3s, height .3s, opacity .3s;
        z-index: 9999;
      }
      
      .hover {
        background-color: var(--first-color);
        opacity: 0.5;
      }
      
      .cursorinnerhover {
        width: 50px;
        height: 50px;
        opacity: .5;
      }
}

@media only screen and (max-width: 600px) {
    .bubble-1 {
        width: 500px; /* Adjust as needed */
        height: 500px; /* Adjust as needed */
        background-color: var(--bubble-color); /* Adjust as needed */
        position: absolute;
        right: 0;
        transform: translateX(50%); /* Centers it vertically */
        border-radius: 50%; /* Makes it a circle */
        z-index: -1; /* Places it behind the text */
        transition: all 2s ease-in-out;
    }
    .bubble-2 {
        width: 400px; /* Adjust as needed */
        height: 400px; /* Adjust as needed */
        background-color: var(--bubble-color); /* Adjust as needed */
        position: absolute;
        left: 0;
        top: 0; /* Positions it at the top of the container */
        transform: translate(-50%, -50%); /* Centers it vertically and horizontally */
        border-radius: 50%; /* Makes it a circle */
        z-index: -1; /* Places it behind the text */
        transition: all 2s ease-in-out;
    }
    .bubble-3 {
        width: 100px; /* Adjust as needed */
        height: 100px; /* Adjust as needed */
        background-color: var(--bubble-color); /* Adjust as needed */
        position: absolute;
        left: 300px; /* X position */
        top: 500px; /* Y position */
        border-radius: 50%; /* Makes it a circle */
        z-index: -1; /* Places it behind the text */
        transition: all 2s ease-in-out;
    }

    .body{
        cursor: auto;
    }
    
    .content {
        flex-direction: column;
        width: 80%; /* or any other percentage or fixed value you want */
        margin: 0 auto; /* center the content */
    }

    .badgescard {
      width: 80%; /* or any other percentage or fixed value you want */
      margin: 0 auto; /* center the content */
  }

    .card {
        width: 100%;
        padding: 10px;
    }
}



.bio::selection {
    background: var(--bubble-color); /* Yellow highlight with 50% opacity */
}
.bio::-moz-selection {
    background: var(--bubble-color); /* For Firefox */
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #e0e0e0; /* Semi-transparent black */
  z-index: 999;
  transition: transform 0.5s ease-in-out;
}

.overlay.slide-up {
  transform: translateY(-100%);
}

.neumorphism-button {
  padding: 10px 20px;
  border: none;
  border-radius: 50px;
  background: #e0e0e0;
  box-shadow: 6px 6px 12px #c5c5c5, -6px -6px 12px #ffffff;
  font-size: 1.2em; /* Increase the font size */
  font-weight: bold; /* Make the text bold */
  color: #333; /* Change the text color */
  text-transform: uppercase; /* Make the text uppercase */
  cursor: none;
  transition: all 0.3s ease-in-out;
}

.neumorphism-button:hover {
  color: var(--bubble-color);
  box-shadow: 8px 8px 16px #c5c5c5, -8px -8px 16px #ffffff;
}

.neumorphism-button:active {
  box-shadow: 4px 4px 12px #c5c5c5, -4px -4px 12px #ffffff;

}

#site-container {
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

#site-container.fade-in {
  opacity: 1;
}
@media only screen and (max-width: 600px) {
  /* Adjustments for small screens */
  body {
    font-size: 14px; /* Example adjustment for font size */
    width: 100vw;
    height: 100vh;
    overflow: hidden;
  }
  .content {
    flex-direction: column;
    width: 80%; /* or any other percentage or fixed value you want */
    margin: 0 auto; /* center the content */
  }
  .badgescard {
    width: 80%; /* or any other percentage or fixed value you want */
    margin: 0 auto; /* center the content */
  }
  .card {
    width: 100%;
    padding: 10px;
  }
  
}