body {
    margin: 0;
    font-family: Arial, sans-serif;
    background-color: #f8f6f2;
    background-image: url("data:image/svg+xml,%3Csvg fill='%23e8d0b0' width='100' height='100' viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M370.727,322.972c-5.599-10.813-22.19-18.331-36.358-23.026c-3.124,7.543-8.421,17.785-17.333,33.359c-12.547,21.927-28.26,47.243-39.233,64.619c-14.333,22.697-29.114,45.385-41.621,63.888c-11.445,16.93-18.231,26.282-22.441,31.694c9.252,3.551,18.659,6.634,27.62,9.029c44.236,11.798,107.684,14.791,113.829-4.066C361.355,479.63,377.946,336.901,370.727,322.972z'/%3E%3Cpath d='M405.694,331.109c0.338,6.399,0.277,14.152-0.119,23.869c-0.785,19.273-2.813,41.774-4.375,57.255c-0.227,2.249-4.163,40.972-8.754,69.896c50.176-18.839,118.047-53.366,119.525-98.03C513.499,337.635,456.395,328.186,405.694,331.109z'/%3E%3Cpath d='M189.029,141.274c-13.93-7.219-156.659,9.372-175.497,15.537c-18.857,6.145-15.864,69.593-4.066,113.829c2.395,8.961,5.478,18.369,9.029,27.62c5.412-4.211,14.763-10.996,31.694-22.441c18.502-12.507,41.19-27.288,63.888-41.621c17.376-10.972,42.692-26.685,64.619-39.233c15.574-8.912,25.816-14.209,33.359-17.333C207.36,163.464,199.842,146.873,189.029,141.274z'/%3E%3Cpath d='M127.902,0.03c-44.664,1.478-79.191,69.349-98.03,119.525c28.924-4.591,67.646-8.527,69.896-8.754c15.481-1.563,37.982-3.591,57.255-4.375c9.717-0.396,17.47-0.457,23.869-0.119C183.815,55.607,174.366-1.498,127.902,0.03z'/%3E%3Cpath d='M277.511,234.49c-10.833-10.833-30.66-28.329-46.765-27.786c-16.128,0.522-182.034,107.504-196.248,121.719c-14.222,14.224,18.794,66.571,50.651,98.429c31.854,31.854,84.205,64.874,98.429,50.651c14.215-14.215,121.195-180.123,121.717-196.251C305.836,265.147,288.342,245.321,277.511,234.49z'/%3E%3C/svg%3E");
    background-size: 100px 100px;
    min-height: 100vh;
    color: #333;
}

header {
    background: #e2b07a;
    color: #fff;
    padding: 1rem 0;
    text-align: center;
    font-size: 2rem;
    letter-spacing: 2px;
    font-weight: bold;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.container {
    max-width: 800px;
    margin: 2rem auto;
    padding: 0 1rem 4rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.card {
    position: relative;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    flex-wrap: wrap;
    cursor: pointer;
}

.card-link {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: 10px;
}

.card img, .img-placeholder {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: 8px;
    background: #eee;
    flex-shrink: 0;
}

.img-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
}

.card-content {
    flex: 1;
    min-width: 0;
}

.place {
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 0.3rem;
    color: #555;
}

.stars {
    color: #e2b07a;
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
}

.notes {
    font-size: 1rem;
    color: #555;
}

.date {
    font-size: 0.85rem;
    color: #aaa;
    margin-top: 0.4rem;
}

.user {
    font-size: 1rem;
    color: #e2b07a;
    font-style: italic;
    border: 1px #e2b07a solid;
    border-radius: 15px;
    width: fit-content;
    padding-top: 2px;
    padding-bottom: 2px;
    padding-left: 8px;
    padding-right: 8px;
}

footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    padding: 1rem 0;
    background: #e2b07a;
    color: #fff;
    font-size: 0.95rem;
}

@media (max-width: 600px) {
    .card {
        flex-direction: column;
        align-items: stretch;
    }

    .card img {
        width: 100%;
        height: 180px;
    }
}