/* Purple Color: #B4BEFE | Rose: #F5E0DC | Soft Black: #1C1C1C
   Soft Beige: #F5E8D8   | White Chocolate: #ECE6DB
*/

.corner-logo {
    display: block; 
    position: relative; 
    text-align: left;
    top: 20px;          
    left: 20px;
    padding: 20px 0 0 20px;
    margin: 0;          
    z-index: 1001;      
}

.logo-spacer {
    height: 120px; /* Adjust this number until the spacing looks perfect */
    width: 100%;
    display: block;
}

body {
    background-color: #4b0082; 
    background-size: 1500px 1000px;
    background-attachment: fixed;
    color: #ccff00;
    font-family: "monospace", cursive;
    
    /* CRITICAL FIX: This acts as the anchor for the secret dog */
    position: relative; 
    min-height: 100vh;
    margin: 0;
}


#chatcontainer {
    background-image: url('https://images.stockcake.com/public/c/2/4/c2405ffa-f2fc-4061-9f7f-ab4aebe0a8f0_large/cozy-book-nook-stockcake.jpg'); 
    background-size: cover; /* Ensures the book nook fills the box */
    border: 6px ridge #9933ff; 
    box-shadow: 4px 4px 0px #4b0082;
    width: 65%;
    margin: 40px auto; /* Increased margin to give the logo room */
    padding: 20px;
    text-align: center;
    margin-top: 150px !important;
}

/* Links */
a:link { color: #FF6F61; }
a:visited { color: #F5E0DC; }

/* Headers */
h1 {
    text-shadow: 3px 3px #ff00ff, -3px -3px #00ffff;
    letter-spacing: 5px;
    font-size: 3em;
    text-align: center;
}

/* Guestbook Form Styling */
form {
    background-color: #1C1C1C;
    border: 3px double #B4BEFE;
    padding: 20px;
    max-width: 450px;
    margin: 0 auto; /* Centers the form inside the book nook */
    color: #ECE6DB;
    font-family: 'Courier New', Courier, monospace;
}

input[type="text"], input[type="email"], select {
    background-color: #252525;
    border: 1px solid #B4BEFE;
    color: #ECE6DB;
    padding: 8px;
    width: 100%;
    margin-bottom: 15px;
    box-sizing: border-box;
}

input[type="submit"] {
    background-color: #EBA0AC;
    color: #1C1C1C;
    border: none;
    padding: 10px 25px;
    font-weight: bold;
    cursor: pointer;
    text-transform: uppercase;
}

input[type="submit"]:hover {
    background-color: #FAB387;
    box-shadow: 0 0 10px #FAB387;
}

/* --- THE SECRET DOG HOME BUTTON --- */

.home-button { /* Changed class to match your HTML from the previous message */
    position: absolute; 
    bottom: 50px;    
    right: 20px;     
    z-index: 9999;   
    text-align: center;
}

.home-button img {
    width: 80px;      
    height: 80px;
    border: 3px double #ff00ff; 
    border-radius: 10px;
    background: white;
    transition: all 0.3s ease; /* Makes the reveal smooth */
}

.dog-caption {
    font-size: 10px;
    background: yellow;
    color: black;
    font-weight: bold;
    display: none; 
    padding: 2px;
}

/* The Reveal Effect */
.home-button:hover img {
    transform: translateY(-15px) scale(1.1) rotate(5deg);
    filter: hue-rotate(90deg); 
    cursor: help;
}

.home-button:hover .dog-caption {
    display: block;
}