/* =========================
   MADRIGUERA DIARIES
   ========================= */


/* COLORES */

:root {

  --pink-bg: #fff6f8;
  --pink-light: #ffe7ee;
  --pink: #f6bdcb;
  --pink-dark: #d58da1;

  --cream: #fffaf1;
  --lavender: #eee7f7;

  --brown: #7a5d59;
  --text: #675653;

  --border: #e8c8cf;
  --white: #ffffff;

}


/* GENERAL */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {

  margin: 0;

  font-family:
    "Trebuchet MS",
    Arial,
    sans-serif;

  color: var(--text);

  background-color: var(--pink-bg);

  background-image:
    radial-gradient(#f5ced8 1px, transparent 1px);

  background-size: 18px 18px;

  line-height: 1.7;

}


a {
  color: var(--pink-dark);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}


.page {

  width: 94%;
  max-width: 1250px;

  margin: 35px auto;

}


/* =========================
   HEADER
   ========================= */

.header {

  text-align: center;

  padding: 35px 20px 25px;

  background: rgba(255,255,255,0.92);

  border: 2px solid var(--border);

  border-radius: 25px;

  box-shadow:
    0 8px 0 rgba(229,187,198,0.25);

}


.little-note {

  font-size: 12px;

  letter-spacing: 2px;

  text-transform: lowercase;

  color: var(--pink-dark);

}


.header h1 {

  font-family: Georgia, serif;

  font-size: clamp(38px, 6vw, 68px);

  font-weight: normal;

  margin:

  5px 0 0;

  color: var(--brown);

}


.subtitle {

  font-family: Georgia, serif;

  font-style: italic;

  margin: 5px 0 20px;

  color: #a87d82;

}


/* MENU */

.menu {

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  gap: 8px;

}


.menu a {

  padding: 7px 16px;

  background: var(--pink-light);

  border: 1px solid var(--border);

  border-radius: 20px;

  font-size: 13px;

  color: var(--brown);

  transition: 0.2s;

}


.menu a:hover {

  background: var(--pink);

  text-decoration: none;

  transform: translateY(-2px);

}


/* =========================
   LAYOUT
   ========================= */

.layout {

  display: grid;

  grid-template-columns:
    210px
    minmax(0, 1fr)
    210px;

  gap: 20px;

  margin-top: 25px;

}


/* =========================
   SIDEBARS
   ========================= */

.sidebar,
.right-sidebar {

  display: flex;

  flex-direction: column;

  gap: 18px;

}


.box {

  background: rgba(255,255,255,0.94);

  border:
    1px solid var(--border);

  border-radius: 18px;

  padding: 18px;

  box-shadow:
    4px 5px 0
    rgba(229,187,198,0.20);

}


.box h2,
.box h3 {

  font-family: Georgia, serif;

  color: var(--brown);

  text-align: center;

  margin-top: 0;

}


.box h3 {

  border-bottom:
    1px dashed var(--pink);

  padding-bottom: 8px;

}


.box p {

  font-size: 13px;

}


.profile {

  text-align: center;

}


.profile-photo {

  width: 100px;
  height: 100px;

  margin:
    0 auto 12px;

  display: flex;

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

  border-radius: 50%;

  background:

    linear-gradient(
      135deg,
      #ffe2eb,
      #fff5d9
    );

  border:
    3px double var(--pink);

}


.profile-photo span {

  font-size: 45px;

}


.links {

  text-align: center;

}


.links a {

  display: block;

  margin: 7px 0;

  padding: 5px;

  background: var(--pink-bg);

  border-radius: 8px;

}


.small-message {

  text-align: center;

  font-family: Georgia, serif;

  font-style: italic;

}


/* =========================
   MAIN CONTENT
   ========================= */

.content {

  min-width: 0;

}


/* WELCOME */

.welcome {

  position: relative;

  background:
    linear-gradient(
      145deg,
      #fff,
      #fff6f8
    );

  border:
    1px solid var(--border);

  border-radius:
    25px;

  padding:
    40px;

  text-align: center;

  box-shadow:
    5px 7px 0
    rgba(229,187,198,0.25);

}


.welcome h2 {

  font-family:
    Georgia,
    serif;

  font-size:
    30px;

  color:
    var(--brown);

}


.welcome p {

  max-width:
    620px;

  margin:
    14px auto;

}


.tape {

  position:
    absolute;

  top:
    -13px;

  left:
    50%;

  transform:
    translateX(-50%)
    rotate(-2deg);

  background:
    rgba(255,232,179,0.82);

  padding:
    5px 25px;

  font-size:
    11px;

  letter-spacing:
    1px;

}


/* =========================
   SECTIONS
   ========================= */

.section {

  margin-top:
    30px;

}


.section-title {

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    12px;

  margin-bottom:
    15px;

}


.section-title h2 {

  margin:
    0;

  font-family:
    Georgia,
    serif;

  font-size:
    24px;

  font-weight:
    normal;

  color:
    var(--brown);

}


/* =========================
   FEATURED POST
   ========================= */

.post-card {

  display:
    grid;

  grid-template-columns:
    44% 56%;

  background:
    var(--white);

  border:
    1px solid var(--border);

  border-radius:
    22px;

  overflow:
    hidden;

  box-shadow:
    5px 6px 0
    rgba(229,187,198,0.22);

}


.post-image {

  min-height:
    300px;

}


.placeholder-image {

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  font-size:
    45px;

  background:

    linear-gradient(
      135deg,
      #f8dce4,
      #fff3cf,
      #e9e2f4
    );

}


.post-content {

  padding:
    32px;

}


.date {

  font-size:
    11px;

  letter-spacing:
    2px;

  color:
    var(--pink-dark);

}


.post-content h3 {

  font-family:
    Georgia,
    serif;

  font-size:
    25px;

  line-height:
    1.35;

  color:
    var(--brown);

}


.button {

  display:
    inline-block;

  margin-top:
    12px;

  padding:
    8px 17px;

  border-radius:
    20px;

  background:
    var(--pink-light);

  border:
    1px solid
    var(--border);

  color:
    var(--brown);

}


.button:hover {

  background:
    var(--pink);

  text-decoration:
    none;

}


/* =========================
   MINI POSTS
   ========================= */

.mini-grid {

  display:
    grid;

  grid-template-columns:
    repeat(2,1fr);

  gap:
    17px;

}


.mini-card {

  background:
    white;

  border:
    1px solid
    var(--border);

  border-radius:
    18px;

  padding:
    16px;

  text-align:
    center;

}


.mini-image {

  min-height:
    130px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  font-size:
    40px;

  border-radius:
    13px;

  background:
    var(--cream);

}


.mini-card h3 {

  font-family:
    Georgia,
    serif;

  color:
    var(--brown);

  line-height:
    1.4;

}


.mini-card p {

  font-size:
    13px;

}


/* =========================
   JOURNAL
   ========================= */

.journal-box {

  background:
    #fffdf8;

  border:
    1px solid
    #e8d6bd;

  padding:
    28px;

  border-radius:
    5px;

  box-shadow:
    4px 5px 0
    rgba(210,190,164,.15);

  position:
    relative;

}


.journal-box::before {

  content:
    "";

  position:
    absolute;

  top:
    0;

  left:
    28px;

  width:
    1px;

  height:
    100%;

  background:
    #f2c7cf;

}


.journal-box h3,
.journal-box p,
.journal-box a {

  margin-left:
    22px;

}


.journal-box h3 {

  font-family:
    Georgia,
    serif;

  color:
    var(--brown);

}


/* =========================
   ABOUT
   ========================= */

.about-box {

  background:
    var(--lavender);

  border:
    1px dashed
    #cfc2dd;

  border-radius:
    20px;

  padding:
    30px;

}


.signature {

  text-align:
    right;

  font-family:
    Georgia,
    serif;

  font-size:
    18px;

}


/* =========================
   CALENDAR
   ========================= */

.calendar-grid {

  display:
    grid;

  grid-template-columns:
    repeat(7,1fr);

  gap:
    3px;

  text-align:
    center;

  font-size:
    11px;

}


.calendar-grid span {

  padding:
    3px;

}


.today {

  background:
    var(--pink);

  border-radius:
    50%;

  color:
    white;

}


/* =========================
   STATUS
   ========================= */

.status {

  text-align:
    center;

}


.status-bar {

  width:
    100%;

  height:
    10px;

  background:
    #f3e6ea;

  border-radius:
    10px;

  overflow:
    hidden;

}


.status-progress {

  width:
    72%;

  height:
    100%;

  background:
    var(--pink);

}


.visitor {

  text-align:
    center;

}


.visitor strong {

  display:
    inline-block;

  letter-spacing:
    3px;

  background:
    var(--brown);

  color:
    white;

  padding:
    4px 10px;

  font-family:
    monospace;

}


/* =========================
   FOOTER
   ========================= */

footer {

  margin-top:
    30px;

  text-align:
    center;

  padding:
    20px;

  font-size:
    11px;

  color:
    #aa858a;

}


/* =========================
   RESPONSIVE
   ========================= */

@media
(max-width: 950px) {

  .layout {

    grid-template-columns:
      190px 1fr;

  }


  .right-sidebar {

    grid-column:
      1 / -1;

    display:
      grid;

    grid-template-columns:
      repeat(3,1fr);

  }

}


@media
(max-width: 700px) {

  .page {

    width:
      92%;

    margin:
      15px auto;

  }


  .layout {

    display:
      flex;

    flex-direction:
      column;

  }


  .sidebar {

    order:
      2;

  }


  .content {

    order:
      1;

  }


  .right-sidebar {

    order:
      3;

    display:
      flex;

  }


  .post-card {

    grid-template-columns:
      1fr;

  }


  .mini-grid {

    grid-template-columns:
      1fr;

  }


  .welcome {

    padding:
      35px 22px;

  }


  .header {

    padding:
      25px 12px;

  }


  .header h1 {

    font-size:
      42px;

  }

}


/* FOTO DE PERFIL */

.profile-photo {
    overflow: hidden;
}

.profile-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}