/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

/* style.css */

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

@font-face{
    font-family:'Altair';
    src:url('fonts/Altair-Bold Trial.ttf');
}

@font-face{
    font-family:'BaksoSapi';
    src:url('fonts/BaksoSapi.otf');
}
body{
  background:#ECE9DF;
  overflow:hidden;
  font-family:'Source Code Pro', monospace;
}

/* FONDO */

.desk-bg{
  width:100vw;
  height:100vh;

  display:flex;
  justify-content:center;
  align-items:center;

  position:relative;

  background:
  radial-gradient(circle at top left, #f6f1e8 0%, #ece9df 60%);
}

/* CUADERNO */

.notebook-link{
  position:relative;
  text-decoration:none;
}

.notebook{
  width:420px;
  max-width:85vw;

  transition:0.35s ease;

  filter:
  drop-shadow(0 18px 25px rgba(0,0,0,0.15));
}

/* HOVER */

.notebook:hover{
  transform:
  rotate(-1deg)
  scale(1.02);
}

/* TEXTO ABRIR */

.open-text{
  position:absolute;

  bottom:-55px;
  left:50%;

  transform:translateX(-50%);

  font-size:20px;
  color:#004B87;

  letter-spacing:1px;

  transition:0.3s ease;
}

.notebook-link:hover .open-text{
  transform:
  translateX(-50%)
  translateY(4px);
}

/* DOODLES */

.doodle{
  position:absolute;

  font-size:30px;

  color:#004B87;

  opacity:0.8;

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

.doodle-1{
  top:12%;
  left:18%;
}

.doodle-2{
  top:20%;
  right:20%;
}

.doodle-3{
  bottom:16%;
  left:24%;
}

/* ANIMACIÓN */

@keyframes float{

  0%{
    transform:translateY(0px);
  }

  50%{
    transform:translateY(-8px);
  }

  100%{
    transform:translateY(0px);
  }

}/* HOME */

.home-body{
  overflow-y:auto;
  overflow-x:hidden;
}

/* ESCRITORIO */

.desk{
  width:100%;
  min-height:100vh;

  padding-top:40px;
  padding-bottom:120px;

  display:flex;
  flex-direction:column;
  align-items:center;
}

/* CUADERNO */

.notebook-wrapper{
  position:relative;
  width:1200px;
  max-width:95vw;
}

/* IMAGEN CUADERNO */

.open-notebook{
  width:100%;
  display:block;

  filter:
  drop-shadow(0 18px 30px rgba(0,0,0,0.18));
}

/* ITEMS */

.item{
  position:absolute;
  text-decoration:none;

  transition:0.3s ease;
}

.item:hover{
  transform:
  scale(1.03)
  rotate(-1deg);
}



/* LAU CARD */

.lau-card{
  
  width:180px;


  display:block;

  filter:
  drop-shadow(0 10px 20px rgba(0,0,0,0.12));
}

.lau-title{
    font-family:'BaksoSapi';
    font-size:35px;
  position:absolute;

  top:-50px;
  left:20px;

  font-size:42px;

  color:#004B87;

  transform:rotate(-3deg);
}


/* STICKIES */

.sticky{
  width:220px;

  padding:24px;

  border-radius:8px;

  box-shadow:
  0 10px 20px rgba(0,0,0,0.10);
}

.sticky h2{
  color:#004B87;
  margin-bottom:10px;
}

.sticky p{
  color:#333;
  line-height:1.5;
}

/* COLORES */

.yellow{
  background:#FFE680;
}

.blue{
  background:#BFE8FF;
}

/* FAVS */

.bag{
  width:220px;
}

/* PLAYLIST */

.playlist-card{
  width:260px;

  background:#FFD6EA;

  padding:25px;

  border-radius:18px;

  box-shadow:
  0 10px 20px rgba(0,0,0,0.12);
}

.playlist-card h2{
  margin-bottom:15px;
  color:#004B87;
}

.playlist-card ol{
  padding-left:18px;

  line-height:1.8;

  color:#333;

  margin-bottom:20px;
}

.playlist-card span{
  color:#004B87;
}

/* POSICIONES */

.lau-item{
  top:140px;
  left:100px;
  position:absolute;
}



.blog-item{
  top:200px;
  left:300px;
}

.tuits-item{
  top:560px;
  left:140px;
}

.favs-item{
  top:580px;
  left:500px;
}

.playlist-item{
  top:320px;
  right:120px;
}

/* MURO */

.wall{
  margin-top:60px;

  width:1100px;
  max-width:90vw;
}

.wall h2{
  margin-bottom:25px;

  color:#004B87;
}

/* NOTAS */

.wall-notes{
  display:flex;
  flex-wrap:wrap;
  gap:20px;
}

.note{
  padding:25px;

  min-width:180px;

  border-radius:10px;

  box-shadow:
  0 8px 15px rgba(0,0,0,0.08);

  transform:rotate(-2deg);
}

.note:nth-child(even){
  transform:rotate(2deg);
}

.pink{
  background:#FFD5E5;
}

.green{
  background:#D9F2B4;
}
/* GUESTBOOK */

.guestbook-frame{
  background:#fffdf8;

  padding:20px;

  border-radius:25px;

  box-shadow:
  0 10px 25px rgba(0,0,0,0.08);

  border:3px solid #f1eadc;
}
.spotify-widget{

  border-radius:25px;

  overflow:hidden;

  box-shadow:
  0 10px 25px rgba(0,0,0,0.10);

  transform:rotate(-2deg);

}
.blog-card{
  width:260px;

  display:block;

  filter:
  drop-shadow(0 10px 20px rgba(0,0,0,0.12));
}

.blog-title{
  
  position:absolute;

  top:55px;
  left:80px;

  font-family:'BaksoSapi';

  font-size:35px;

  color:#004B87;

  transform:rotate(-4deg);

  pointer-events:none;
}