/* =========================================
   MI HIGUERA
   personal web magazine / diary
========================================= */


* {
    box-sizing: border-box;
}


body {

    margin: 0;

    background: #b9dce5;

    color: #38343a;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 14px;

    background-image:
        radial-gradient(
            rgba(255,255,255,.9) 1px,
            transparent 1px
        );

    background-size: 75px 75px;

}


/* =========================================
   BARRA SUPERIOR
========================================= */

.ticker {

    height: 32px;

    overflow: hidden;

    background: #e8a9bd;

    border-bottom:
        1px solid #8e6976;

    white-space: nowrap;

}


.ticker-content {

    display: inline-block;

    padding-top: 7px;

    color: white;

    font-family:
        "Courier New",
        monospace;

    font-size: 11px;

    letter-spacing: 2px;

    animation:
        moveTicker 25s linear infinite;

}


@keyframes moveTicker {

    from {

        transform: translateX(0);

    }

    to {

        transform: translateX(-50%);

    }

}


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

header {

    width: 92%;

    max-width: 1050px;

    margin: auto;

    padding:
        45px
        20px
        35px;

    text-align: center;

}


.tiny-line {

    color: #a64d69;

    font-size: 14px;

}


header h1 {

    margin:
        3px
        0
        0;

    color: #a94d68;

    font-family:
        "Brush Script MT",
        "Segoe Script",
        "Lucida Handwriting",
        cursive;

    font-size: 75px;

    font-weight: normal;

    letter-spacing: 2px;

    text-shadow:
        2px 2px #f7e8e8;

}


.subtitle {

    margin-top: -10px;

    color: #765d66;

    font-size: 14px;

    font-style: italic;

}


.header-description {

    margin-top: 15px;

    color: #6d5960;

    font-family:
        "Courier New",
        monospace;

    font-size: 10px;

    letter-spacing: 2px;

    text-transform: uppercase;

}


/* =========================================
   PAGE GRID
========================================= */

.page {

    width: 92%;

    max-width: 1120px;

    margin: auto;

    display: grid;

    grid-template-columns:
        155px
        minmax(450px, 1fr)
        170px;

    gap: 30px;

    align-items: start;

}


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

.sidebar {

    padding-top: 10px;

}


.mini-title {

    margin-bottom: 10px;

    color: #a34c67;

    font-family:
        "Courier New",
        monospace;

    font-size: 10px;

    font-weight: bold;

    letter-spacing: 2px;

}


nav a {

    display: block;

    padding:
        7px
        0;

    color: #51444a;

    text-decoration: none;

    border-bottom:
        1px solid
        rgba(
            100,
            80,
            90,
            .25
        );

    font-size: 12px;

}


nav a:hover {

    color: #b84f73;

    padding-left: 7px;

}


.side-divider {

    margin:
        25px
        0;

    color: #b14e6c;

    text-align: center;

}


.currently {

    font-size: 11px;

    line-height: 1.5;

}


.currently p {

    margin:
        0
        0
        15px;

}


.currently span {

    color: #a54c68;

    font-family:
        "Courier New",
        monospace;

    font-size: 9px;

    text-transform: uppercase;

}


.side-note {

    margin-top: 35px;

    padding: 12px;

    color: #795e67;

    font-family:
        "Courier New",
        monospace;

    font-size: 9px;

    line-height: 1.5;

    border:
        1px solid
        rgba(
            100,
            80,
            90,
            .3
        );

    transform: rotate(-2deg);

}


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

.main-content {

    min-width: 0;

}


/* =========================================
   HERO COLLAGE
========================================= */

.hero-collage {

    position: relative;

    min-height: 320px;

    margin-bottom: 45px;

    padding: 45px;

    background: #f8f1e8;

    border:
        1px solid #c5aeb0;

    box-shadow:
        4px 5px 0
        rgba(
            100,
            80,
            90,
            .2
        );

    transform: rotate(-.5deg);

}


.hero-text {

    width: 65%;

}


.small-label {

    color: #a84c67;

    font-family:
        "Courier New",
        monospace;

    font-size: 10px;

    letter-spacing: 3px;

}


.hero-text h2 {

    margin:
        15px
        0;

    color: #40363b;

    font-size: 38px;

    font-weight: normal;

    line-height: 1.05;

}


.hero-text p {

    width: 80%;

    color: #6c5b60;

    font-size: 15px;

    line-height: 1.6;

}


.handwritten {

    display: block;

    margin-top: 25px;

    color: #a84e69;

    font-family:
        "Brush Script MT",
        "Segoe Script",
        cursive;

    font-size: 25px;

    transform: rotate(-3deg);

}


/* NOTA */

.paper-note {

    position: absolute;

    right: 35px;

    top: 35px;

    width: 145px;

    min-height: 190px;

    padding: 18px;

    background: #e8b4c2;

    color: #513f45;

    font-family:
        "Courier New",
        monospace;

    font-size: 10px;

    line-height: 1.7;

    box-shadow:
        3px 4px 0
        rgba(
            80,
            60,
            70,
            .2
        );

    transform:
        rotate(4deg);

}


.paper-note span {

    color: #8e465d;

    font-size: 9px;

}


.paper-note strong {

    font-family: Georgia, serif;

    font-size: 14px;

    font-weight: normal;

}


/* CINTA */

.tape {

    position: absolute;

    width: 85px;

    height: 22px;

    background:
        rgba(
            220,
            190,
            184,
            .75
        );

}


.tape-one {

    top: 23px;

    right: 67px;

    transform: rotate(4deg);

}


/* ESTRELLA */

.star-decoration {

    position: absolute;

    bottom: 15px;

    left: 25px;

    color: #b45570;

    font-size: 35px;

    transform: rotate(-10deg);

}


/* =========================================
   EDITORIAL POST
========================================= */

.editorial-post {

    display: grid;

    grid-template-columns:
        45%
        55%;

    gap: 25px;

    margin-bottom: 55px;

}


.fake-photo {

    min-height: 300px;

    background:
        linear-gradient(
            145deg,
            #d7c7c1,
            #8caeb5
        );

    border:
        8px solid #fffaf5;

    box-shadow:
        3px 4px 0
        rgba(
            80,
            60,
            70,
            .25
        );

    display: flex;

    justify-content: center;

    align-items: center;

    transform: rotate(-2deg);

}


.fake-photo div {

    color: white;

    text-align: center;

    font-family:
        Georgia,
        serif;

    font-size: 38px;

}


.fake-photo span {

    font-size: 13px;

    letter-spacing: 4px;

}


.post-text {

    padding:
        15px
        5px;

}


.category {

    color: #a64d68;

    font-family:
        "Courier New",
        monospace;

    font-size: 9px;

    letter-spacing: 2px;

}


.post-text h2 {

    margin:
        15px
        0
        5px;

    color: #44383d;

    font-size: 30px;

    font-weight: normal;

    line-height: 1.1;

}


.date {

    color: #887278;

    font-family:
        "Courier New",
        monospace;

    font-size: 9px;

}


.post-text p {

    color: #62545a;

    line-height: 1.7;

}


.read-more {

    color: #a44a67;

    font-family:
        "Courier New",
        monospace;

    font-size: 10px;

    text-decoration: none;

}


.read-more:hover {

    text-decoration: underline;

}


/* =========================================
   SECTION HEADING
========================================= */

.section-heading {

    margin-bottom: 18px;

    padding-bottom: 8px;

    color: #4b3e43;

    font-family:
        Georgia,
        serif;

    font-size: 25px;

    font-style: italic;

    border-bottom:
        1px solid #90787f;

}


.section-heading span {

    margin-right: 10px;

    color: #a44b67;

    font-family:
        "Courier New",
        monospace;

    font-size: 10px;

    font-style: normal;

}


/* =========================================
   CARDS
========================================= */

.cards {

    display: grid;

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

    gap: 15px;

    margin-bottom: 50px;

}


.collage-card {

    position: relative;

    min-height: 190px;

    padding: 22px;

    box-shadow:
        3px 4px 0
        rgba(
            80,
            60,
            70,
            .2
        );

}


.card-pink {

    background: #e8b4c2;

    transform:
        rotate(-2deg);

}


.card-blue {

    background: #c6dfe3;

    transform:
        rotate(1.5deg);

}


.card-cream {

    background: #f3eadc;

    transform:
        rotate(-1deg);

}


.card-number {

    color: #85626b;

    font-family:
        "Courier New",
        monospace;

    font-size: 9px;

}


.collage-card h3 {

    margin-top: 30px;

    color: #514047;

    font-size: 20px;

    font-weight: normal;

    letter-spacing: 2px;

}


.collage-card p {

    color: #63545a;

    font-size: 12px;

    line-height: 1.5;

}


.card-decoration {

    position: absolute;

    right: 15px;

    bottom: 12px;

    font-size: 25px;

}


/* =========================================
   NOTA DEL DIARIO
========================================= */

.diary-note {

    position: relative;

    margin:
        20px
        15px
        60px;

    padding:
        35px
        30px;

    background: #f6e8c9;

    box-shadow:
        3px 5px 0
        rgba(
            80,
            60,
            70,
            .2
        );

    transform: rotate(1.5deg);

}


.note-tape {

    position: absolute;

    top: -11px;

    left: 35%;

    width: 100px;

    height: 22px;

    background:
        rgba(
            218,
            192,
            181,
            .7
        );

    transform: rotate(-2deg);

}


.note-date {

    color: #9d5968;

    font-family:
        "Courier New",
        monospace;

    font-size: 9px;

    letter-spacing: 2px;

}


.diary-note p {

    color: #4f4448;

    font-size: 19px;

    line-height: 1.5;

}


.diary-note span {

    color: #866b71;

    font-size: 10px;

    font-style: italic;

}


/* =========================================
   GUESTBOOK
========================================= */

.guestbook {

    margin-bottom: 50px;

}


.guestbook p {

    color: #6a5a60;

    font-style: italic;

}


.guestbook input,
.guestbook textarea {

    width: 100%;

    margin:
        5px
        0;

    padding: 10px;

    background:
        rgba(
            255,
            255,
            255,
            .65
        );

    border:
        1px solid #aa8990;

    font-family:
        Georgia,
        serif;

    outline: none;

}


.guestbook textarea {

    min-height: 90px;

    resize: vertical;

}


.guestbook button {

    margin-top: 5px;

    padding:
        8px
        14px;

    background: #e4b0bf;

    border:
        1px solid #9d6878;

    color: #563f47;

    font-family:
        "Courier New",
        monospace;

    cursor: pointer;

}


/* =========================================
   RIGHT COLUMN
========================================= */

.right-column {

    padding-top: 15px;

}


/* RANDOM */

.random-card {

    margin-bottom: 30px;

    padding: 15px;

    background:
        rgba(
            255,
            250,
            245,
            .8
        );

    border:
        1px solid #9e858b;

    transform: rotate(1deg);

}


.random-card ul {

    margin: 0;

    padding-left: 15px;

}


.random-card li {

    margin-bottom: 8px;

    color: #66565c;

    font-size: 11px;

}


/* POLAROID */

.polaroid {

    width: 145px;

    margin:
        0
        auto
        35px;

    padding:
        10px
        10px
        20px;

    background: white;

    box-shadow:
        3px 4px 0
        rgba(
            80,
            60,
            70,
            .2
        );

    transform: rotate(-4deg);

}


.polaroid-image {

    height: 120px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #a9cbd0;

    color: white;

    font-size: 35px;

}


.polaroid p {

    margin-bottom: 0;

    color: #65565b;

    font-family:
        "Brush Script MT",
        cursive;

    font-size: 17px;

}


/* =========================================
   HIGUITA
========================================= */

.higuita-wrapper {

    margin-bottom: 30px;

    padding: 7px;

    background: #f1d0da;

    border:
        1px solid #9c6878;

    box-shadow:
        3px 4px 0
        rgba(
            80,
            60,
            70,
            .2
        );

    transform: rotate(1deg);

}


.higuita-title {

    padding: 7px;

    background: #d88da7;

    color: white;

    font-family:
        "Courier New",
        monospace;

    font-size: 9px;

}


.higuita-title span {

    float: right;

}


.higuita-screen {

    position: relative;

    height: 190px;

    overflow: hidden;

    background: #c4e3e7;

    border:
        2px solid #765d66;

}


#higuita {

    position: absolute;

    top: 5px;

    left: 50%;

    width: 125px;

    height: 125px;

    object-fit: contain;

    image-rendering: pixelated;

    transform:
        translateX(-50%);

    cursor: pointer;

}


#pet-message {

    position: absolute;

    bottom: 7px;

    left: 50%;

    width: 88%;

    padding: 5px;

    transform:
        translateX(-50%);

    background:
        rgba(
            255,
            255,
            255,
            .85
        );

    border:
        1px solid #ad7887;

    color: #714e5b;

    font-family:
        "Courier New",
        monospace;

    font-size: 8px;

    text-align: center;

}


.pet-buttons {

    display: flex;

    gap: 3px;

    margin-top: 6px;

}


.pet-buttons button {

    flex: 1;

    padding: 6px 2px;

    background: #f4e0e7;

    border:
        1px solid #a36a7b;

    color: #654750;

    font-size: 8px;

    cursor: pointer;

}


.pet-status {

    padding-top: 6px;

    color: #795a63;

    font-family:
        "Courier New",
        monospace;

    font-size: 8px;

    text-align: center;

}


/* =========================================
   VISITOR
========================================= */

.visitor {

    padding: 15px;

    background: #f4e9dc;

    border:
        1px solid #a88b8d;

    transform: rotate(-1deg);

}


.visitor-number {

    margin:
        10px
        0;

    color: #9f4c66;

    font-family:
        "Courier New",
        monospace;

    font-size: 23px;

    letter-spacing: 3px;

}


.visitor p {

    color: #746169;

    font-size: 9px;

}


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

footer {

    width: 90%;

    max-width: 900px;

    margin:
        70px
        auto
        30px;

    padding:
        20px;

    color: #715961;

    text-align: center;

    font-family:
        "Courier New",
        monospace;

    font-size: 9px;

}


footer div {

    color: #a34c67;

    font-size: 15px;

}


/* =========================================
   MOVIL
========================================= */

@media (max-width: 850px) {

    .page {

        grid-template-columns: 1fr;

    }


    .sidebar,
    .right-column {

        width: 100%;

    }


    .editorial-post {

        grid-template-columns: 1fr;

    }


    .cards {

        grid-template-columns: 1fr;

    }


    header h1 {

        font-size: 55px;

    }

}


@media (max-width: 500px) {

    .hero-collage {

        padding: 30px 20px;

    }


    .hero-text {

        width: 100%;

    }


    .hero-text h2 {

        font-size: 29px;

    }


    .paper-note {

        position: relative;

        right: auto;

        top: auto;

        margin:
            30px
            auto
            0;

    }


    .hero-collage {

        min-height: auto;

    }

}