/* =====================================================
   GENERAL
===================================================== */

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: "Comic Sans MS", "Trebuchet MS", cursive;
    color: #5e3150;

    background-color: #ffe1ef;

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

    background-size: 18px 18px;
    background-position: 0 0, 9px 9px;
}


/* =====================================================
   ENLACES
===================================================== */

a {
    color: #d33f91;
    font-weight: bold;
    text-decoration: none;
}

a:hover {
    color: #ff65b2;
    text-decoration: underline;
}


/* =====================================================
   CONTENEDOR PRINCIPAL
===================================================== */

.page {
    width: 1050px;
    max-width: 95%;
    margin: 25px auto;

    background: #fff7fc;

    border: 4px double #e47bb4;

    box-shadow:
        0 0 0 4px #ffc2df,
        0 0 20px rgba(160, 60, 120, 0.3);
}


/* =====================================================
   CABECERA
===================================================== */

header {
    position: relative;

    min-height: 190px;
    padding: 25px;

    text-align: center;

    background:
        linear-gradient(
            rgba(255, 194, 224, 0.82),
            rgba(255, 224, 240, 0.82)
        );

    border-bottom: 4px dashed #e27bb2;

    overflow: hidden;
}


/* Decoración */

.header-deco {
    position: absolute;
    font-size: 35px;
}

.heart1 {
    top: 15px;
    left: 35px;
}

.heart2 {
    top: 30px;
    right: 45px;
}

.star1 {
    bottom: 20px;
    left: 100px;
}

.star2 {
    bottom: 30px;
    right: 110px;
}


/* Título */

.site-title {
    margin: 10px 0 0;

    font-size: 42px;

    color: #d94791;

    text-shadow:
        2px 2px white,
        4px 4px #f2a6ce;
}


/* Subtítulo */

.subtitle {
    margin-top: 5px;

    font-size: 15px;

    color: #9b557d;
}


/* Texto animado */

.blink {
    color: #ef4b9d;
    font-weight: bold;
}


/* =====================================================
   MENÚ
===================================================== */

nav {
    margin-top: 18px;
}

select {
    padding: 8px 18px;

    font-family: "Comic Sans MS", cursive;
    font-size: 14px;

    color: #8c3869;

    background: #fff;

    border: 3px outset #f19bc8;

    cursor: pointer;
}

select:hover {
    background: #fff0f8;
}


/* =====================================================
   MARQUEE
===================================================== */

.marquee {
    height: 27px;
    line-height: 27px;

    overflow: hidden;

    background: #ef9fc7;

    color: white;

    border-bottom: 2px solid #d66d9f;

    font-size: 13px;
}


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

.content {
    display: grid;

    grid-template-columns: 190px 1fr 190px;

    gap: 15px;

    padding: 15px;
}

.column {
    min-width: 0;
}


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

.box {
    margin-bottom: 15px;

    background: #fff;

    border: 2px solid #e58abb;

    box-shadow: 3px 3px 0 #f4b7d7;
}

.box-title {
    padding: 6px 8px;

    color: white;

    font-size: 14px;

    text-align: center;

    background:
        linear-gradient(
            to right,
            #db68a5,
            #f49bc6,
            #db68a5
        );

    border-bottom: 2px solid #d15896;
}

.box-content {
    padding: 10px;

    font-size: 13px;
}


/* =====================================================
   PERFIL
===================================================== */

.profile-photo {
    width: 100%;
    height: 130px;

    display: flex;

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

    background:
        repeating-linear-gradient(
            45deg,
            #ffd5e8,
            #ffd5e8 8px,
            #fff0f7 8px,
            #fff0f7 16px
        );

    border: 2px dashed #df76ad;

    color: #c35c91;

    text-align: center;

    overflow: hidden;
}

.profile-photo span {
    font-size: 12px;
}

.profile-photo img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;
}


/* =====================================================
   MENÚ LATERAL
===================================================== */

.menu-links {
    list-style: none;

    padding: 0;
    margin: 0;
}

.menu-links li {
    margin-bottom: 7px;
}

.menu-links a {
    display: block;

    padding: 5px 7px;

    background: #ffe5f1;

    border: 1px dashed #dc7bac;
}

.menu-links a:hover {
    background: #ffd1e7;

    text-decoration: none;
}


/* =====================================================
   IMÁGENES
===================================================== */

.photo-placeholder {
    height: 90px;

    margin: 6px 0;

    display: flex;

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

    background:
        linear-gradient(
            135deg,
            #ffe4f0 25%,
            #fff 25%,
            #fff 50%,
            #ffe4f0 50%,
            #ffe4f0 75%,
            #fff 75%
        );

    background-size: 18px 18px;

    border: 2px dashed #dc7bac;

    color: #bd6392;

    font-size: 11px;

    text-align: center;

    overflow: hidden;
}

.photo-placeholder img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;
}


/* =====================================================
   GIFS
===================================================== */

.gif {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    border: none;
    background: none;
    padding: 0;
}

.gif img {
    max-width: 100%;
    height: auto;

    display: block;

    border: none;
}


/* =====================================================
   BLOG CENTRAL
===================================================== */

.welcome {
    text-align: center;

    padding: 12px;

    background: #fff0f7;

    border: 2px dotted #dd70aa;

    margin-bottom: 15px;
}

.welcome h2 {
    margin: 0 0 7px;

    color: #d94d96;

    font-size: 23px;
}


/* Posts */

.post {
    margin-bottom: 20px;

    border: 2px solid #e58abb;

    background: white;
}

.post-header {
    padding: 7px 10px;

    background: #ffe1ef;

    border-bottom: 1px dashed #dc7bac;

    color: #c34288;

    font-weight: bold;
}

.post-body {
    padding: 12px;

    font-size: 14px;

    line-height: 1.5;
}

.post-footer {
    padding: 5px 10px;

    background: #fff4fa;

    border-top: 1px dotted #dc7bac;

    font-size: 11px;

    color: #a76a8b;
}


/* =====================================================
   FOTOS DE LOS POSTS
===================================================== */

.post-photo-eclipse {
    height: 180px;
}

.post-photo-ducks {
    height: 400px;
}


/* =====================================================
   FOTOS DEL ACUARIO
===================================================== */

.acuario-fotos {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 7px;
}

.acuario-fotos .photo-placeholder {
    height: 250px;
}

.acuario-fotos .photo-placeholder img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;
}


/* =====================================================
   MÁS POSTS
===================================================== */

.more-posts {
    text-align: center;

    padding: 12px;

    background: #ffe6f2;

    border: 2px dotted #dd76ad;
}


/* =====================================================
   MÚSICA
===================================================== */

.cassette {
    text-align: center;
}

.cassette-img {
    height: 85px;

    margin-bottom: 8px;

    display: flex;

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

    background: #f7a3ca;

    border: 3px solid #b94f84;

    box-shadow:
        inset 0 0 0 4px #ffc9e2;

    color: #87335f;

    font-size: 12px;

    overflow: hidden;
}

.cassette-photo {
    height: 80px;
}

.song {
    padding: 7px;

    background: #fff0f7;

    border: 1px dashed #d46d9f;
}


/* =====================================================
   CALENDARIO
===================================================== */

.calendar {
    width: 100%;

    border-collapse: collapse;

    font-size: 10px;

    text-align: center;
}

.calendar th {
    color: #d54891;

    padding: 3px;
}

.calendar td {
    padding: 4px 2px;

    border: 1px solid #f2c1d9;
}

.today {
    background: #f6a5ca;

    color: white;

    font-weight: bold;
}


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

.guest {
    padding: 7px;

    margin-bottom: 7px;

    background: #fff1f7;

    border: 1px dashed #db7caf;

    font-size: 11px;
}

.guest-name {
    color: #d14991;

    font-weight: bold;
}

.guestbook-button {
    display: block;

    padding: 7px;

    text-align: center;

    background: #ee8cbb;

    color: white;

    border: 3px outset #f7b0d3;
}

.guestbook-button:hover {
    background: #e575ad;

    color: white;

    text-decoration: none;
}


/* =====================================================
   STICKERS
===================================================== */

.sticker-area {
    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap: 4px;

    padding: 5px;
}

.sticker {
    width: 45px;
    height: 45px;

    display: flex;

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

    background: #ffd4e8;

    border: 1px solid #df7cad;

    font-size: 20px;
}


/* =====================================================
   PHOTO WALL
===================================================== */

.photo-wall .photo-placeholder {
    height: 110px;

    overflow: hidden;
}


/* =====================================================
   REDES SOCIALES
===================================================== */

.social-buttons {
    text-align: center;
}

.social-button {
    width: 88px;
    height: 31px;

    margin: 5px auto;

    display: flex;

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

    font-size: 9px;

    border: 2px outset #ffd8e9;
}

.instagram-button {
    background: #ffb7d8;
}

.twitter-button {
    background: #ffc9e2;
}


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

footer {
    padding: 18px;

    text-align: center;

    background: #ffd8e9;

    border-top: 3px dashed #dd77ad;

    font-size: 11px;
}

.counter {
    display: inline-block;

    margin-top: 8px;

    padding: 3px 9px;

    background: #292929;

    color: #ff9ccc;

    font-family: monospace;

    border: 2px inset #888;
}


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

@media (max-width: 800px) {

    .content {
        grid-template-columns: 1fr;
    }

    .site-title {
        font-size: 30px;
    }

    .page {
        width: 95%;
    }

}