*{

  margin:0;
  padding:0;
  box-sizing:border-box;

}

body{

  background-image:url("387be55cc74c92114b3f73151daf9374.jpg");

  background-size:cover;

  background-position:center;

  background-attachment:fixed;

  overflow-x:hidden;

  min-height:2600px;

  position:relative;

  font-family:Verdana;

  color:#5e4d57;

}

/* =====================================
   BOLHA CENTRAL
===================================== */

.main-bubble{

  position:absolute;

  width:1100px;

  height:1100px;

  left:50%;

  top:-50px;

  transform:translateX(-50%);

}

/* IMAGEM */

.main-bubble::before{

  content:"";

  position:absolute;

  inset:0;

  background-image:url("44aeeb8db4eafe1e54bf3ed089032371-removebg-preview.png");
");

  background-size:contain;

  background-repeat:no-repeat;

  background-position:center;

}

/* TEXTO */

.main-content{

  position:relative;

  z-index:2;

  width:100%;
  height:100%;

  display:flex;

  flex-direction:column;

  justify-content:center;

  align-items:center;

  text-align:center;

  padding:280px;

}

.main-content h1{

  font-size:60px;

  color:#2E6F40;

  margin-bottom:30px;

  text-shadow:
    0 0 10px rgba(255,255,255,.7);

}

.main-content p{

  font-size:22px;

  line-height:2;

  color:#FFFFFF;

}

/* =====================================
   BOLHAS
===================================== */

.bubble{

  position:absolute;

  filter:
    drop-shadow(0 0 20px rgba(255,255,255,.45));

  animation:float 6s ease-in-out infinite;

}

/* IMAGEM DAS BOLHAS */

.bubble::before{

  content:"";

  position:absolute;

  inset:0;

  background-image:url("bd6a93c0d8507504d896d731ed9091a6-removebg-preview.png");

  background-size:contain;

  background-repeat:no-repeat;

  background-position:center;

}

/* CONTEÚDO */

.bubble-content{

  position:relative;

  z-index:2;

  width:100%;
  height:100%;

  display:flex;

  justify-content:center;

  align-items:center;

  text-align:center;

  padding:120px;

}

/* =====================================
   FLOAT
===================================== */

@keyframes float{

  0%{

    margin-top:0px;

  }

  50%{

    margin-top:-15px;

  }

  100%{

    margin-top:0px;

  }

}

/* =====================================
   HOBBIES
===================================== */

.hobbies{

  width:260px;
  height:260px;

  top:820px;

  left:180px;

  rotate:-6deg;

}

/* =====================================
   INTERESSES
===================================== */

.interesses{

  width:260px;
  height:260px;

  top:820px;

  left:520px;

  rotate:4deg;

}

/* =====================================
   PROJETOS
===================================== */

.projetos{

  width:260px;
  height:260px;

  top:820px;

  left:860px;

  rotate:-3deg;

}
/* =====================================
   TÍTULOS
===================================== */

h2{

  font-size:48px;

  color:#ff5fa2;

  text-shadow:
    0 0 10px rgba(255,255,255,.5);

}