/* =========================
   Theo's Puppy Café 🐾☕
   Cozy Latte Puppy Theme
========================= */


body {

    margin: 0;
    padding: 0;

    min-height: 100vh;

    background:

    radial-gradient(circle at top, #f7d8c1, transparent 45%),

    linear-gradient(
        135deg,
        #fff5e9,
        #ead5c3,
        #d8b79d
    );


    color:#4b3328;

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

}




/* floating decorations */


.floating {

    text-align:center;

    padding:25px;

    font-size:24px;

    letter-spacing:8px;

    color:#a87552;

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

}



@keyframes float {

    50% {

        transform:translateY(-8px);

    }

}






.container {

    width:85%;

    max-width:900px;

    margin:auto;

    padding-bottom:40px;

}







/* HEADER */


header {


    background:

    rgba(255,248,238,.9);


    border:

    3px solid #c69b7b;


    border-radius:35px;


    padding:35px;


    text-align:center;


    box-shadow:

    0 12px 30px rgba(80,50,30,.2);

}





h1 {


    font-family:"Playfair Display", serif;


    color:#684333;


    font-size:55px;


    text-shadow:

    2px 2px #e8c7ae;

}





.subtitle {

    color:#90654c;

    font-size:22px;

}





.quote {

    font-family:"Caveat", cursive;


    font-size:30px;


    color:#a36d4e;

}







/* NAV */


nav {

    text-align:center;

    margin:25px;

}




nav a {


    display:inline-block;


    padding:12px 25px;


    margin:7px;



    background:#cfa17d;


    color:#fff8ef;


    text-decoration:none;


    border-radius:30px;


    transition:.3s;


}





nav a:hover {


    background:#936044;


    transform:translateY(-5px) rotate(-2deg);

}







/* CARDS */


.card {


    background:

    rgba(255,249,241,.9);



    margin:25px 0;


    padding:30px;


    border-radius:30px;


    border:

    2px solid #d5ae91;



    box-shadow:

    0 8px 20px rgba(80,50,30,.15);


    transition:.3s;

}





.card:hover {

    transform:translateY(-4px);

}






h2 {


    font-family:"Playfair Display", serif;


    color:#754b36;


    font-size:32px;

}







/* INFO BOX */


.info,
.status {


    background:#f5dfcb;


    padding:20px;


    border-radius:20px;


    border-left:

    5px solid #b77b56;

}







/* TAGS */


.tags {


    display:flex;


    flex-wrap:wrap;


    gap:12px;

}




.tags span {


    background:#e6c2a5;


    color:#5c3928;


    padding:10px 16px;


    border-radius:25px;


    transition:.3s;

}




.tags span:hover {


    background:#bd8865;


    color:white;


    transform:scale(1.1);

}







/* ART BOX */


.placeholder {


    height:160px;


    display:flex;


    align-items:center;


    justify-content:center;


    background:


    repeating-linear-gradient(

    45deg,

    #f9e8d8,

    #f9e8d8 10px,

    #edd0b8 10px,

    #edd0b8 20px

    );



    border-radius:30px;



    font-family:"Caveat", cursive;


    font-size:34px;


    color:#946248;

}







/* BUTTONS */


.button {


    display:inline-block;


    margin:8px;


    padding:12px 25px;



    background:#a96f4d;



    color:white;


    text-decoration:none;


    border-radius:30px;


    transition:.3s;

}




.button:hover {


    background:#684333;


    transform:scale(1.08);

}







/* FOOTER */


footer {


    text-align:center;


    margin-top:40px;


    font-family:"Caveat", cursive;


    color:#80543d;


    font-size:27px;

}



.small {

    font-size:14px;

    opacity:.7;

}







/* MOBILE */


@media(max-width:600px){


.container {

width:92%;

}



h1 {

font-size:40px;

}


}