#profile-pic {
  position: absolute;
  left: 0;
  top: 60px; /* Adjust this value to position the image just under the header */
  z-index: 0; /* This will place the image behind the card */
  width: 450px; /* Adjust this value to change the size of the image */
  height: auto;
}

@media (max-width: 480px) {
  #profile-pic {
    position: absolute;
    left: -50px; /* Adjust this value to move the image more to the left */
    top: 100px; /* Adjust this value to move the image higher */
  }
}

@property --gradient-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

:root {
  --clr-1: #151320;
  --clr-2: #38586B;
  --clr-3: #4C808D;
  --clr-4: #69AAA9;
  --clr-5: #94D3BF;
}

body {
    background: var(--clr-1);
    min-height: 100vh;
    display: flex;
    align-items: flex-start; /* Align items to the start */
    justify-content: center;
    margin: 0;
}
.card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 90%; /* Set a percentage width */
    max-width: 1100px; /* Set a max-width for larger screens */
    height: auto; /* Let the container grow with the content */
    background: var(--clr-1);
    border-radius: 0.5rem;
    overflow: hidden; /* Hide shadows that spill out of the container */
    z-index: 1;
    padding: 20px; /* Add padding */
    box-sizing: border-box; /* Ensure padding doesn't affect the total width */
    top: -600px; /* Add this line */
}
/* Adjust the card properties for larger screens */
@media (min-width: 768px) {
    .card {
        width: auto; 
        padding: 40px; /* Increase the padding */
    }
}

/* Adjust the card properties for smaller screens */
@media (max-width: 480px) {
  .card {
    top: -700px; /* Adjust this value for mobile screens */
    width: 100%; /* Increase the width */
    padding: 10px; /* Decrease the padding */
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); /* Add shadow */
    transform: translateY(50px); /* Lower the card */
    margin: 0 auto; /* Reset the margin */
  }
}

.card h2, .card p {
  color: #fff;
  text-align: center;
  z-index: 2;
}

.card h2 {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}

.card p {
  font-size: 1rem;
  margin: 0 1rem;
}

.card::before, .card::after {
  content: "";
  position: absolute;
  top: -2rem;
  right: -2rem;
  bottom: -2rem;
  left: -2rem;
  border-radius: inherit;
  background: conic-gradient(from var(--gradient-angle), var(--clr-2), var(--clr-3), var(--clr-4), var(--clr-5), var(--clr-4), var(--clr-3), var(--clr-2));
  animation: rotation 12s linear infinite;
  z-index: -1;
}

.card::after {
  filter: blur(2rem);
}

@keyframes rotation {
  to { --gradient-angle: 360deg; }
}

.inner-box {
    background: rgba(0, 0, 0, 0.5); /* Semi-transparent black */
    padding: 20px; /* Add some padding */
    box-sizing: border-box; /* Ensure padding doesn't affect the total width */
    width: 100%; /* Full width */
    height: auto; /* Auto height */
    overflow: auto; /* Add a scrollbar if the content is too long */
}

.gif-container {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
}