/* ---------------------------- */
/* oh, claria mia!              */
/* style.css                    */
/* ---------------------------- */


* {

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

}


/* ---------------------------- */
/* Body                         */
/* ---------------------------- */


body {

    background-color:#f7f3ef;

    background-image:url("paper.jpg");

    background-repeat:repeat;

    background-size:450px;

    font-family:"Nunito", sans-serif;

    color:#5c4636;

}


/* ---------------------------- */
/* Container                    */
/* ---------------------------- */


.container {

    width:90%;

    max-width:760px;

    margin:60px auto;

}


/* ---------------------------- */
/* Cards                        */
/* ---------------------------- */


.nav-box,
.logo,
.currently-box,
.post {

    transition:.25s ease;

}


.nav-box:hover,
.logo:hover,
.currently-box:hover,
.post:hover {

    transform:translateY(-3px);

}


/* ---------------------------- */
/* Header                       */
/* ---------------------------- */


header {

    margin-bottom:40px;

}


.logo {

    text-align:center;

    background:white;

    border-radius:28px;

    padding:35px;

    box-shadow:0 8px 25px rgba(92,70,54,.06);

}


.bow {

    font-size:32px;

    margin-bottom:15px;

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

}


@keyframes float {

    0%,100% {

        transform:translateY(0);

    }

    50% {

        transform:translateY(-4px);

    }

}


.logo h1 {

    font-family:"Delius", cursive;

    font-size:2.8rem;

    font-weight:400;

    color:#6c4d42;

    margin-bottom:12px;

}


.tagline {

    font-family:"Quicksand", sans-serif;

    color:#987d70;

    font-size:1rem;

    letter-spacing:.5px;

}


/* ---------------------------- */
/* Navigation                   */
/* ---------------------------- */


nav {

    margin-bottom:25px;

}


.nav-box {

    background:white;

    border-radius:28px;

    padding:20px 36px;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:35px;

    flex-wrap:wrap;

    box-shadow:0 8px 25px rgba(92,70,54,.06);

}


.nav-title {

    width:100%;

    text-align:center;

    color:#bf8ea4;

    font-family:"Quicksand", sans-serif;

    font-size:.85rem;

    letter-spacing:1px;

    margin-bottom:0px;

}

.nav-links {

    display:flex;

    align-items:center;

    justify-content:center;

    gap:35px;

}

.column {

    display:flex;

    flex-direction:column;

    gap:18px;

}


.divider {

    width:1px;

    height:90px;

    background:#e5d8cf;

}


.column a {

    text-decoration:none;

    color:#6c4d42;

    font-size:1rem;

    font-weight:600;

    transition:.25s ease;

    position:relative;

}


.column a::after {

    content:"";

    position:absolute;

    bottom:-5px;

    left:0;

    width:0;

    height:1px;

    background:#bf8ea4;

    transition:.25s ease;

}


.column a:hover::after {

    width:100%;

}


.column a:hover {

    color:#bf8ea4;

    transform:translateX(5px);

}


/* ---------------------------- */
/* Decorative                   */
/* ---------------------------- */


.flower-divider {

    display:flex;

    align-items:center;

    justify-content:center;

    margin:28px 0;

    color:#c59ab0;

    font-size:18px;

}


.flower-divider::before,
.flower-divider::after {

    content:"";

    width:120px;

    height:1px;

    background:#dfd2ca;

}


.flower-divider::before {

    margin-right:15px;

}


.flower-divider::after {

    margin-left:15px;

}


.mini-divider {

    margin-top:18px;

    color:#bf8ea4;

    font-size:18px;

}


/* ---------------------------- */
/* Currently                    */
/* ---------------------------- */


.currently {

    margin-bottom:25px;

}


.currently-box {

    background:white;

    border-radius:28px;

    padding:25px 35px;

    box-shadow:0 8px 25px rgba(92,70,54,.06);

}

.currently-title {

    text-align:center;

    font-family:"Delius", cursive;

    font-size:1.5rem;

    color:#6c4d42;

    margin-bottom:15px;

}

.currently-item {

    display:flex;

    align-items:center;

    gap:15px;

}


.currently-item:first-child {

    margin-bottom:18px;

}


.icon {

    font-size:24px;

}


.label {

    color:#987d70;

    font-size:.9rem;

}


/* ---------------------------- */
/* Latest Post                  */
/* ---------------------------- */


.post {

    background:white;

    border-radius:28px;

    padding:40px;

    box-shadow:0 8px 25px rgba(92,70,54,.06);

}


.post-date {

    color:#bf8ea4;

    font-size:.85rem;

    margin-bottom:15px;

    font-family:"Quicksand", sans-serif;

}


.post h2 {

    font-family:"Delius", cursive;

    font-size:2rem;

    margin-bottom:18px;

    color:#6c4d42;

}

.post p {

    line-height:1.8;

}


.read-more {

    display:inline-block;

    margin-top:25px;

    text-decoration:none;

    color:#bf8ea4;

    font-weight:bold;

    transition:.25s ease;

}


.read-more:hover {

    transform:translateX(5px);

    opacity:.7;

}

/* ---------------------------- */
/* Footer                       */
/* ---------------------------- */


footer {

    text-align:center;

    margin:40px 0;

    color:#987d70;

    font-size:.9rem;

}


footer p {

    font-family:"Quicksand", sans-serif;

}