/* -------------------- */
/* RESET + BASE STYLE   */
/* -------------------- */

body {
  margin: 0;
  padding: 0;
  font-family: "Comic Sans MS", sans-serif;
 background-image: url('background.png');
 background-size: cover;
  height: 100vh;
  overflow-x: hidden;
  position: relative;
}

.floor {
  position: absolute;
  top: 220px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 0;
}

.floor img {
  width: 400px;
  height: auto;

}

/* -------------------- */
/* PANEL STYLE (WINDOWS) */
/* -------------------- */

.window {
  position: absolute;
  width: 260px;
  padding: 20px;
  border-radius: 20px;
  border: 4px solid #f19bb3;

  /* Grid paper effect */
  background-color: #fff2cc;
  background-image:
    linear-gradient(#f5c6a5 1px, transparent 1px),
    linear-gradient(90deg, #f5c6a5 1px, transparent 1px);
  background-size: 20px 20px;

  box-shadow: 8px 8px 0px #e07a9c;

  animation: float 4s ease-in-out infinite;
}

/* -------------------- */
/* INDIVIDUAL POSITIONS */
/* -------------------- */

.about {
  top: 100px;
  left: 80px;
}

.interests {
  top: 80px;
  right: 100px;
}

.favorites {
  top: 300px;
 right: 100px;
}
/* -------------------- */
/* CHARACTER CENTERING  */
/* -------------------- */

.character {
  position: absolute;
  top: 220px;
  left: 50%;
  transform: translateX(-50%);
}

.character img {
  width: 300px;
  height: auto;
}

/* -------------------- */
/* FLOATING ANIMATION   */
/* -------------------- */

@keyframes float {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-8px);
  }
  100% {
    transform: translateY(0px);
  }
}

/* -------------------- */
/* TEXT STYLING         */
/* -------------------- */

h2, h3 {
  margin-top: 0;
  color: #c75a7c;
}

p {
  color: #7a3e52;
}