/* =========================
   DEAR IRIS
   version 2
========================= */


* {
    box-sizing: border-box;
}


body {

    margin: 0;
    padding: 0;

    background-color: #fceaf4;

    color: #69495b;

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

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

    background-size: 18px 18px;

}


/* =========================
   MAIN PAGE
========================= */


.page {

    width: 900px;

    max-width: 94%;

    margin: 35px auto;

    background: #fffafd;

    border: 3px solid #dfa2bd;

    box-shadow:
        0 0 0 6px #f8dce9,
        0 0 25px rgba(150, 90, 120, 0.25);

}


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


.header {

    text-align: center;

    padding: 35px 20px 30px;

    background:
        linear-gradient(
            #f9d8e7,
            #f7cddd
        );

    border-bottom: 3px solid #dfa2bd;

}


.header h1 {

    margin: 10px 0;

    font-family:
        Georgia,
        serif;

    font-size: 48px;

    font-style: italic;

    font-weight: normal;

    color: #a94f78;

    text-shadow:
        2px 2px #ffffff;

}


.subtitle {

    margin: 5px;

    font-size: 14px;

    color: #80566a;

}


.tiny-stars {

    color: #b9678d;

    font-size: 20px;

}


/* =========================
   NAVIGATION
========================= */


.navigation {

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 8px;

    padding: 12px;

    background: #f4c2d7;

    border-bottom: 2px solid #dfa2bd;

}


.navigation a {

    padding: 6px 12px;

    background: #fff7fb;

    border: 1px solid #d996b5;

    color: #8e4e6c;

    text-decoration: none;

    font-size: 13px;

    border-radius: 4px;

}


.navigation a:hover {

    background: #ffffff;

    color: #d04f88;

    transform: translateY(-2px);

}


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


.content {

    display: grid;

    grid-template-columns:
        230px 1fr;

    gap: 18px;

    padding: 20px;

}


/* =========================
   SIDEBAR
========================= */


.sidebar {

    display: flex;

    flex-direction: column;

    gap: 15px;

}


/* =========================
   BOXES
========================= */


.box {

    background: #ffffff;

    border: 2px solid #e4abc4;

    padding: 15px;

    box-shadow:
        3px 3px 0 #f3d2e0;

}


.box h2 {

    margin-top: 0;

    color: #ad557d;

    font-family: Georgia, serif;

    font-size: 20px;

}


.box p {

    font-size: 14px;

    line-height: 1.6;

}


.big-box {

    background:
        linear-gradient(
            135deg,
            #fff,
            #fff5fa
        );

}


.box-title {

    margin: -15px -15px 15px -15px;

    padding: 7px;

    text-align: center;

    background: #f5d0df;

    border-bottom: 1px solid #dfa2bd;

    color: #914d6d;

    font-size: 13px;

    font-weight: bold;

}


/* =========================
   CURRENTLY
========================= */


.currently {

    background: #fff5fa;

    padding: 10px;

    border-left: 4px solid #e4abc4;

}


.currently p {

    margin: 7px 0;

}


/* =========================
   DIARY
========================= */


.diary {

    background: #fffafb;

}


.date {

    color: #bb7294;

    font-size: 12px !important;

}


.diary h2 {

    font-size: 23px;

}


.signature {

    text-align: right;

    font-family: Georgia, serif;

    font-style: italic;

    color: #a8567b;

}


/* =========================
   STICKER
========================= */


.sticker {

    padding: 20px;

    text-align: center;

    background: #f8d7e6;

    border: 2px dashed #d98eae;

    color: #a84f77;

    font-family: Georgia, serif;

    font-style: italic;

    transform: rotate(-2deg);

}


/* =========================
   NOTE
========================= */


.note {

    margin-top: 15px;

    padding: 18px;

    text-align: center;

    background: #fff1f7;

    border: 2px dashed #dfa2bd;

    color: #a85a7d;

    font-family: Georgia, serif;

    font-style: italic;

    line-height: 1.8;

}


/* =========================
   CENTER TEXT
========================= */


.center {

    text-align: center;

    color: #b45880;

    font-family: Georgia, serif;

    font-style: italic;

}


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


footer {

    padding: 20px;

    text-align: center;

    background: #f7d3e2;

    border-top: 2px solid #dfa2bd;

    color: #8e5b70;

    font-size: 12px;

}


footer p {

    margin: 6px;

}


.footer-decoration {

    font-size: 18px;

    color: #b75f87;

}


/* =========================
   MOBILE
========================= */


@media (max-width: 700px) {

    .content {

        grid-template-columns: 1fr;

    }

    .sidebar {

        order: 2;

    }

    .main-column {

        order: 1;

    }

    .header h1 {

        font-size: 38px;

    }

}