/* RESET & BASICS */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background: #ffe6f3 url("https://i.pinimg.com/originals/b3/5c/c3/b35cc390682262a87b5205e82f469739.gif") repeat;
  color: #000;
  font-family: "Verdana", sans-serif;
  font-size: 14px;
  cursor: url("https://cur.cursors-4u.net/cursors/cur-13/cur1167.cur"), auto;
}

/* TOP NAV BAR */
nav.top {
  background: #ff99cc;
  padding: 5px 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 4px double #fff;
}
.nav_class {
  height: 80px;
}
nav.top h1 {
  font-family: "Comic Sans MS", cursive;
  color: white;
  font-size: 24px;
  text-shadow: 2px 2px #d60077;
}
nav.top ul.links {
  display: flex;
  gap: 15px;
  list-style: none;
}
nav.top ul.links li {
  background: #fff;
  padding: 5px 10px;
  border-radius: 5px;
  color: #d60077;
  font-weight: bold;
}
/* MAIN PROFILE WRAPPER */
.profile {
  max-width: 1000px;
  margin: 30px auto;
  background: rgba(255, 255, 255, 0.9);
  padding: 20px;
  border: 3px solid #ff66a3;
  box-shadow: 0 0 15px hotpink;
}

/* HEADER SECTION */
.profile-header {
  display: flex;
  align-items: center;
  margin-bottom: 30px;
  position: relative;
}
.profile-pic-container {
  width: 200px;
  height: 200px;
  border: 3px dashed #ffb3d9;
  padding: 5px;
  margin-right: 20px;
  position: relative;
}
.profile-pic {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  animation: spin 20s linear infinite;
  object-fit: cover;
}
.profile-pic-container::after {
  content: "";
  background-image: url("https://i.pinimg.com/originals/8e/16/c6/8e16c6d4bb53531d29c60f09c3045a36.gif");
  background-size: contain;
  background-repeat: no-repeat;
  width: 40px;
  height: 40px;
  position: absolute;
  top: -10px;
  left: -10px;
}

/* PROFILE TEXT */
.profile-info h2 {
  font-size: 20px;
  font-family: "Georgia", serif;
  color: #ff3399;
  text-shadow: 1px 1px #fff;
}
.profile-info p {
  margin-top: 10px;
  font-style: italic;
}

/* SECTION CONTENT */
.section {
  background: #fff0f5;
  border: 2px dotted #ff66cc;
  margin-bottom: 20px;
  padding: 15px;
  border-radius: 10px;
}
.section h3 {
  font-size: 18px;
  color: #cc0077;
  margin-bottom: 10px;
  border-bottom: 1px dashed #cc0077;
}
.section img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* MUSIC BLOCK */
#music {
  background: #ffd6e7;
  padding: 10px;
  border: 1px dashed hotpink;
  border-radius: 8px;
  text-align: center;
}
#music iframe {
  width: 90%;
  height: 160px;
}

/* KITTY FLOATERS */
.kittyphone {
  background-image: url("https://i.pinimg.com/originals/f4/2b/95/f42b95cf7ea31b66d130f3f20dffdb3b.gif");
  background-size: contain;
  width: 100px;
  height: 100px;
  position: fixed;
  bottom: 10px;
  right: 10px;
  z-index: 999;
  animation: float 5s ease-in-out infinite;
}
.kittycam {
  background-image: url("https://i.pinimg.com/originals/c1/2f/e7/c12fe76697c45353944f727a21790c43.gif");
  background-size: contain;
  width: 90px;
  height: 90px;
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 999;
  animation: float 6s ease-in-out infinite;
}

/* FOOTER */
footer {
  text-align: center;
  margin-top: 40px;
  font-size: 12px;
  color: #555;
}

/* ANIMATIONS */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}