/* ============================================================
   CUTE 00s HOMEPAGE
   Inspired by the supplied Sanrio-era layout
   ============================================================ */


/* ============================================================
   RESET
   ============================================================ */

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
}

html {
    min-height: 100%;
}

body {
    min-height: 100vh;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 12px;

    color: #d84d91;

    background: #f4a3c7;

    overflow-x: auto;
}


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

.header {
    width: 100%;
    height: 86px;

    background: #ffffff;

    border-bottom: 1px solid #efc2d7;
}


/* ------------------------------------------------------------
   TOP HEADER
   ------------------------------------------------------------ */

.header-top {
    position: relative;

    width: 780px;
    height: 54px;

    margin: 0 auto;
}


/* ============================================================
   LOGO
   ============================================================ */

.logo {
    position: absolute;

    left: 8px;
    top: 3px;

    display: block;

    color: #ed62a9;

    text-decoration: none;

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

    font-size: 43px;

    line-height: 48px;

    font-weight: 900;

    font-style: italic;

    letter-spacing: -4px;

    text-shadow:
        1px 1px 0 #ffffff,
        -1px -1px 0 #ffffff,
        0 2px 1px rgba(190, 50, 120, 0.12);
}

.logo span {
    position: relative;

    top: -17px;
    left: 2px;

    font-size: 9px;

    font-weight: bold;

    letter-spacing: 0;
}


/* ============================================================
   TOP RIGHT LINKS
   ============================================================ */

.top-links {
    position: absolute;

    right: 0;
    top: 19px;

    height: 27px;

    display: flex;

    align-items: center;

    white-space: nowrap;
}

.top-links a {
    color: #3974bd;

    text-decoration: none;

    font-size: 10px;
}

.top-links a:hover {
    text-decoration: underline;
}

.separator {
    margin: 0 9px;

    color: #e5a9c3;

    font-size: 10px;
}


/* ============================================================
   SEARCH
   ============================================================ */

.search-box {
    display: flex;

    align-items: center;

    margin-left: 8px;
}

.search-box input {
    width: 112px;
    height: 22px;

    padding: 2px 9px;

    border: 1px solid #d7d7d7;

    border-radius: 13px;

    outline: none;

    background: #ffffff;

    color: #777777;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 10px;

    box-shadow:
        inset 0 1px 2px rgba(0, 0, 0, 0.05);
}

.search-box input::placeholder {
    color: #c79bb0;
}

.search-box button {
    width: 27px;
    height: 27px;

    margin-left: 5px;

    padding: 0;

    border: 0;

    border-radius: 50%;

    background: #ee4a9d;

    color: #ffffff;

    font-size: 10px;

    font-weight: bold;

    cursor: pointer;

    box-shadow:
        inset 0 1px 1px rgba(255,255,255,0.65);
}


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

.navigation {
    width: 780px;
    height: 32px;

    margin: 0 auto;

    display: flex;

    justify-content: center;

    align-items: center;
}

.navigation a {
    display: block;

    padding: 0 16px;

    color: #d55496;

    text-decoration: none;

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

    font-size: 13px;

    line-height: 14px;
}

.navigation a:hover {
    color: #bc3278;
}

.navigation span {
    color: #e8bfd1;

    font-size: 11px;
}


/* ============================================================
   MAIN PINK BACKGROUND
   ============================================================ */

.pink-background {
    position: relative;

    min-height: 614px;

    background-color: #f4a4c8;

    /*
       Repeated subtle pattern.
       This gives the same general visual effect
       as the floral / heart texture in the reference.
    */

    background-image:

        radial-gradient(
            circle at 10px 10px,
            rgba(255,255,255,0.14) 0,
            rgba(255,255,255,0.14) 3px,
            transparent 4px
        ),

        radial-gradient(
            circle at 29px 26px,
            rgba(255,255,255,0.10) 0,
            rgba(255,255,255,0.10) 5px,
            transparent 6px
        ),

        radial-gradient(
            circle at 45px 13px,
            rgba(210,55,130,0.06) 0,
            rgba(210,55,130,0.06) 3px,
            transparent 4px
        );

    background-size:
        52px 46px,
        69px 57px,
        63px 51px;

    border-top: 1px solid rgba(255,255,255,0.35);
}


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

.wrapper {
    width: 780px;

    margin: 0 auto;

    padding-top: 16px;
}


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

.hero {
    position: relative;

    width: 780px;
    height: 226px;
}


/* ============================================================
   HERO LEFT
   ============================================================ */

.hero-left {
    position: absolute;

    left: 0;
    top: 0;

    width: 250px;
    height: 225px;
}


/* ============================================================
   PRODUCT ITEMS
   ============================================================ */

.product {
    position: absolute;

    display: block;

    color: #ffffff;

    text-align: center;

    text-decoration: none;

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

    font-size: 15px;

    font-weight: 900;

    text-shadow:
        0 1px 2px rgba(130, 30, 80, 0.35);
}

.product span {
    display: block;

    margin-top: 2px;
}

.product:hover span {
    text-decoration: underline;
}


/* ============================================================
   JEWELRY
   ============================================================ */

.jewelry {
    left: 38px;
    top: 2px;
}

.jewelry-image {
    position: relative;

    width: 96px;
    height: 61px;

    display: flex;

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

    transform: rotate(-8deg);

    border-radius: 19px;

    background:
        radial-gradient(
            circle,
            #f6a7cc 0 19%,
            #29252b 20% 39%,
            #ffffff 40% 44%,
            #c8c3c6 45% 48%,
            #29252b 49% 64%,
            #f4a7ca 65%
        );

    box-shadow:
        0 4px 6px rgba(100, 30, 70, 0.22);
}

.jewelry-image::before {
    content: "";

    position: absolute;

    width: 58px;
    height: 15px;

    top: -6px;
    left: 19px;

    border: 4px solid #29252b;

    border-bottom: 0;

    border-radius: 50% 50% 0 0;
}

.jewelry-center {
    width: 28px;
    height: 28px;

    display: flex;

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

    border-radius: 50%;

    background: #f5b2d2;

    border: 3px solid #ffffff;

    color: #ee4c9d;

    font-size: 15px;
}


/* ============================================================
   PURSES
   ============================================================ */

.purses {
    left: 112px;
    top: 83px;
}

.purse-image {
    position: relative;

    width: 82px;
    height: 68px;

    border-radius:
        17px
        17px
        24px
        24px;

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f7d9e8 20%,
            #eda1c7 52%,
            #f8c8df 100%
        );

    box-shadow:
        0 4px 6px rgba(100, 30, 70, 0.22);
}

.purse-image::before {
    content: "";

    position: absolute;

    left: 19px;
    top: -17px;

    width: 40px;
    height: 28px;

    border:
        4px solid #efb0ce;

    border-bottom: 0;

    border-radius: 50% 50% 0 0;
}

.purse-face {
    position: absolute;

    left: 0;
    right: 0;

    top: 25px;

    text-align: center;

    color: #ffffff;

    font-size: 15px;

    text-shadow:
        0 1px 2px #c95c8f;
}


/* ============================================================
   STATIONERY
   ============================================================ */

.stationery {
    left: 14px;
    top: 128px;
}

.stationery-image {
    position: relative;

    width: 96px;
    height: 55px;

    border-radius: 5px;

    background:
        linear-gradient(
            15deg,
            #ffffff 0 21%,
            #f4b2d1 22% 44%,
            #ffffff 45% 67%,
            #ef8bb9 68% 100%
        );

    box-shadow:
        0 4px 6px rgba(100, 30, 70, 0.22);

    transform: rotate(-2deg);
}

.stationery-card {
    position: absolute;

    left: 33px;
    top: 12px;

    width: 29px;
    height: 29px;

    display: flex;

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

    border-radius: 5px;

    background: #ffffff;

    color: #e65a9f;

    font-size: 16px;

    box-shadow:
        0 1px 2px rgba(80,20,60,.15);
}


/* ============================================================
   HERO CENTER
   ============================================================ */

.hero-center {
    position: absolute;

    left: 255px;
    top: 34px;

    width: 230px;

    text-align: center;
}


/* ============================================================
   HERO TITLE
   ============================================================ */

.hero-center h1 {
    margin: 0;

    color: #ffffff;

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

    font-size: 28px;

    line-height: 25px;

    font-weight: 900;

    font-style: italic;

    text-shadow:
        1px 1px 0 #d2478d,
        -1px -1px 0 #d2478d,
        0 2px 2px rgba(100,20,70,.12);
}

.hero-center h1 strong {
    font-size: 31px;
}


/* ============================================================
   HERO DESCRIPTION
   ============================================================ */

.hero-center p {
    margin: 12px 0 13px;

    color: #e63889;

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

    font-size: 13px;

    line-height: 15px;

    font-weight: bold;
}


/* ============================================================
   SHOP BUTTON
   ============================================================ */

.shop-button {
    display: inline-flex;

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

    gap: 5px;

    min-width: 126px;
    height: 25px;

    padding: 0 13px;

    border-radius: 15px;

    border: 1px solid #e2b6cb;

    background:
        linear-gradient(
            #ffffff,
            #f9e5ef
        );

    color: #dd679d;

    text-decoration: none;

    font-size: 10px;

    font-weight: 900;

    box-shadow:
        0 1px 3px rgba(100,20,70,.18);
}

.shop-button span {
    color: #ec61a5;

    font-size: 8px;
}

.shop-button:hover {
    background:
        linear-gradient(
            #ffffff,
            #f6d7e6
        );
}


/* ============================================================
   HERO RIGHT
   ============================================================ */

.hero-right {
    position: absolute;

    right: 0;
    top: 0;

    width: 285px;
    height: 226px;
}


/* ============================================================
   MASCOT
   ============================================================ */

.mascot {
    position: absolute;

    left: 19px;
    top: 0;

    width: 245px;
    height: 205px;

    object-fit: contain;

    display: block;
}


/* ============================================================
   CHARMS
   ============================================================ */

.charms {
    position: absolute;

    left: 8px;
    bottom: -2px;

    width: 270px;
    height: 31px;

    display: flex;

    align-items: center;

    justify-content: space-around;
}


/* necklace/string */

.charms::before {
    content: "";

    position: absolute;

    left: 0;
    right: 0;

    top: 10px;

    height: 1px;

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

    box-shadow:
        0 1px 0 rgba(170,55,110,.25);
}


/* individual charms */

.charm {
    position: relative;

    z-index: 2;

    width: 25px;
    height: 25px;

    display: flex;

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

    border-radius: 50%;

    color: #29252b;

    background: #f2a4c9;

    border: 2px solid rgba(255,255,255,.75);

    font-size: 14px;

    text-shadow:
        0 1px 0 #ffffff;

    box-shadow:
        0 1px 2px rgba(100,20,70,.2);
}

.charm-1 {
    background: #d28b46;
}

.charm-2 {
    background: #24232a;

    color: #ffffff;
}

.charm-3 {
    background: #ffffff;
}

.charm-4 {
    background: #222222;

    color: #ffffff;
}

.charm-5 {
    background: #f0f0f0;
}

.charm-6 {
    background: #e64b72;
}


/* ============================================================
   NEWS BAR
   ============================================================ */

.news-bar {
    width: 485px;
    height: 28px;

    display: flex;

    align-items: center;

    padding:
        0
        12px;

    border-radius:
        15px
        15px
        0
        0;

    background:
        linear-gradient(
            #ee70b1,
            #e6539f
        );

    color: #ffffff;

    box-shadow:
        0 1px 2px rgba(100,20,70,.18);

    font-size: 10px;

    font-weight: bold;
}


/* ============================================================
   NEWS LABEL
   ============================================================ */

.news-label {
    margin-right: 8px;

    font-size: 9px;

    white-space: nowrap;
}


/* ============================================================
   NEWS LINK
   ============================================================ */

.news-link {
    color: #ffffff;

    text-decoration: none;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
}

.news-link:hover {
    text-decoration: underline;
}


/* ============================================================
   NEWS MORE
   ============================================================ */

.news-more {
    margin-left: auto;

    color: #ffffff;

    text-decoration: none;

    white-space: nowrap;
}

.news-more span {
    margin-left: 2px;

    font-size: 13px;
}


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

.news-cards {
    width: 485px;

    display: flex;

    gap: 8px;
}


/* ============================================================
   CARD
   ============================================================ */

.card {
    width: 155px;
    height: 186px;

    overflow: hidden;

    background: #ffffff;

    border-radius:
        0
        0
        9px
        9px;

    box-shadow:
        0 2px 5px rgba(100,30,70,.17);
}


/* ============================================================
   CARD IMAGE
   ============================================================ */

.card-image {
    display: block;

    width: 155px;
    height: 103px;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #f4b5d1,
            #e886b5
        );
}

.card-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform .25s ease;
}

.card-image:hover img {
    transform: scale(1.03);
}


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

.card-content {
    padding-top: 7px;
}


/* ============================================================
   CARD TITLE
   ============================================================ */

.card h2 {
    margin:
        0
        11px
        5px;

    color: #d95795;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 13px;

    line-height: 16px;

    font-weight: normal;
}


/* ============================================================
   CARD LINK
   ============================================================ */

.card-link {
    margin-left: 11px;

    color: #2d81ce;

    text-decoration: none;

    font-size: 11px;

    font-weight: bold;
}

.card-link:hover {
    text-decoration: underline;
}


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

.footer {
    width: 780px;

    margin-top: 27px;

    display: flex;

    align-items: center;

    color: #bc3c78;

    font-size: 9px;
}


/* ============================================================
   COPYRIGHT
   ============================================================ */

.copyright {
    white-space: nowrap;
}


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

.footer-links {
    margin-left: auto;

    white-space: nowrap;
}

.footer-links a {
    color: #bc3c78;

    text-decoration: none;

    padding: 0 3px;
}

.footer-links a:hover {
    text-decoration: underline;
}

.footer-links a + a::before {
    content: "|";

    margin-right: 7px;

    color: #d16a99;
}


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

/*
   NÃO transformamos o layout em uma versão mobile moderna.
   A referência original é um site de largura fixa dos anos 2000.

   Em telas pequenas, deixamos o site com a mesma largura e
   permitimos scroll horizontal.
*/

@media (max-width: 780px) {

    .header {
        min-width: 804px;
    }

    .pink-background {
        min-width: 804px;
    }

    .header-top,
    .navigation,
    .wrapper,
    .footer {
        margin-left: 12px;
        margin-right: 0;
    }

    .header-top,
    .navigation,
    .wrapper,
    .footer {
        width: 780px;
    }

}