/* =========================================
   Izziekitty's Saloon - About Me Styles
   ========================================= */

body, html {
    overflow: hidden; 
    background-color: #9b59b6; 
}

#bg-container {
    width: 100vw; height: 100vh;
    background-image: url('images/izziesroom.webp');
    background-size: cover; background-position: center; 
    position: relative;
}

.info-panel {
    position: absolute; top: 0; left: 0; width: 30%; min-width: 320px; height: 100%;
    background: rgba(255, 255, 255, 0.85); box-shadow: 5px 0 15px rgba(0,0,0,0.2);
    padding: 80px 30px 30px 30px; box-sizing: border-box; 
    display: flex; flex-direction: column; overflow-y: auto; 
}

h1.header-title {
    text-align: center; font-size: 3rem; margin-top: 0; margin-bottom: 10px;
    background: linear-gradient(to right, #ff4b4b, #ff9e4b, #f1c40f, #2ecc71, #3498db, #9b59b6);
    -webkit-background-clip: text; color: transparent; text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
}

.social-links { 
    display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; 
    margin-bottom: 30px; padding-bottom: 20px; border-bottom: 3px dashed #ff9a9e; 
}

.social-badge { 
    text-decoration: none; color: #333; background-color: #f1f2f6; 
    padding: 8px 15px; border-radius: 15px; font-size: 0.95rem; 
    font-weight: bold; border: 2px solid #dfe4ea; transition: all 0.2s; 
    display: inline-flex; align-items: center; gap: 8px;
}

.social-badge.discord:hover { border-color: #7289da; background-color: #e8ebf7; color: #7289da; cursor: default; }
.social-badge.telegram:hover { border-color: #0088cc; background-color: #e0f4ff; color: #0088cc; }
.social-badge.bluesky:hover { border-color: #0085ff; background-color: #e0f0ff; color: #0085ff; }

.about-me-container { font-size: 1.1rem; line-height: 1.6; color: #2f3542; }
.about-me-container h1 { color: #9b59b6; font-size: 1.8rem; margin-top: 0; border-bottom: 3px dashed #f1c40f; padding-bottom: 10px; }
.about-me-container h2 { color: #3498db; font-size: 1.4rem; margin-top: 25px; margin-bottom: 10px; }
.about-me-container p { text-align: justify; margin-bottom: 15px; }
.about-me-container ul { padding-left: 25px; list-style-type: none; }
.about-me-container li { margin-bottom: 10px; position: relative; }

.about-me-container li::before { 
    content: ""; position: absolute; left: -25px; top: 4px; 
    width: 16px; height: 16px; background-color: #f1c40f;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* --- Custom SVG Icons --- */
.about-icon { display: inline-block; width: 18px; height: 18px; background-color: currentColor; }

.icon-discord {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M19.27 5.33C17.94 4.71 16.5 4.26 15 4a.09.09 0 0 0-.07.03c-.18.33-.39.76-.53 1.09a16.09 16.09 0 0 0-4.8 0c-.14-.33-.35-.76-.53-1.09a.09.09 0 0 0-.07-.03c-1.5.26-2.93.71-4.27 1.33-.01 0-.02.01-.03.02-2.72 4.07-3.47 8.03-3.1 11.95 0 .02.01.04.03.05 1.8 1.32 3.53 2.12 5.24 2.65.03.01.06 0 .07-.02.4-.55.76-1.13 1.07-1.74.02-.04 0-.08-.04-.09-.57-.22-1.11-.48-1.64-.78-.04-.02-.04-.08-.01-.11.11-.08.22-.17.33-.25.02-.02.05-.02.07-.01 3.44 1.57 7.15 1.57 10.55 0 .02-.01.05-.01.07.01.11.09.22.17.33.26.04.03.04.09-.01.11-.52.31-1.07.56-1.64.78-.04.01-.05.06-.04.09.32.61.68 1.19 1.07 1.74.03.03.06.04.09.02 1.72-.53 3.45-1.33 5.25-2.65.02-.01.03-.03.03-.05.44-4.53-.73-8.46-3.1-11.95-.01-.01-.02-.02-.04-.02zM8.52 14.91c-1.03 0-1.89-.95-1.89-2.12s.84-2.12 1.89-2.12c1.06 0 1.9.96 1.89 2.12 0 1.17-.84 2.12-1.89 2.12zm6.97 0c-1.03 0-1.89-.95-1.89-2.12s.84-2.12 1.89-2.12c1.06 0 1.9.96 1.89 2.12 0 1.17-.83 2.12-1.89 2.12z'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M19.27 5.33C17.94 4.71 16.5 4.26 15 4a.09.09 0 0 0-.07.03c-.18.33-.39.76-.53 1.09a16.09 16.09 0 0 0-4.8 0c-.14-.33-.35-.76-.53-1.09a.09.09 0 0 0-.07-.03c-1.5.26-2.93.71-4.27 1.33-.01 0-.02.01-.03.02-2.72 4.07-3.47 8.03-3.1 11.95 0 .02.01.04.03.05 1.8 1.32 3.53 2.12 5.24 2.65.03.01.06 0 .07-.02.4-.55.76-1.13 1.07-1.74.02-.04 0-.08-.04-.09-.57-.22-1.11-.48-1.64-.78-.04-.02-.04-.08-.01-.11.11-.08.22-.17.33-.25.02-.02.05-.02.07-.01 3.44 1.57 7.15 1.57 10.55 0 .02-.01.05-.01.07.01.11.09.22.17.33.26.04.03.04.09-.01.11-.52.31-1.07.56-1.64.78-.04.01-.05.06-.04.09.32.61.68 1.19 1.07 1.74.03.03.06.04.09.02 1.72-.53 3.45-1.33 5.25-2.65.02-.01.03-.03.03-.05.44-4.53-.73-8.46-3.1-11.95-.01-.01-.02-.02-.04-.02zM8.52 14.91c-1.03 0-1.89-.95-1.89-2.12s.84-2.12 1.89-2.12c1.06 0 1.9.96 1.89 2.12 0 1.17-.84 2.12-1.89 2.12zm6.97 0c-1.03 0-1.89-.95-1.89-2.12s.84-2.12 1.89-2.12c1.06 0 1.9.96 1.89 2.12 0 1.17-.83 2.12-1.89 2.12z'/%3E%3C/svg%3E") no-repeat center / contain;
}

.icon-telegram {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m22 2-7 20-4-9-9-4Z'/%3E%3Cpath d='M22 2 11 13'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m22 2-7 20-4-9-9-4Z'/%3E%3Cpath d='M22 2 11 13'/%3E%3C/svg%3E") no-repeat center / contain;
}

.icon-bluesky {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M12 10.8c-1.087-2.114-4.046-6.053-6.798-7.995C2.566.944 1.561 1.266.902 1.565.139 1.908 0 3.08 0 3.768c0 .69.378 5.65.624 6.479.815 2.736 3.713 3.66 6.383 3.364.136-.02.275-.039.415-.056-.938.826-1.884 1.636-2.584 2.226-2.015 1.696-2.221 2.879-2.164 3.49.071.761.642 1.258 1.485 1.258.98 0 2.25-.494 4.544-1.503l.314-.138C10.518 18.199 11.83 17.5 12 17.5c.17 0 1.482.699 2.981 1.353l.314.138c2.293 1.01 3.563 1.503 4.544 1.503.843 0 1.414-.497 1.485-1.258.057-.611-.149-1.794-2.164-3.49-.7-.59-1.646-1.4-2.584-2.226.14.017.279.036.415.056 2.67.297 5.568-.628 6.383-3.364.246-.828.624-5.789.624-6.479 0-.689-.139-1.86-.902-2.203-.659-.3-1.664-.62-4.3 1.24C16.046 4.748 13.087 8.687 12 10.8z'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M12 10.8c-1.087-2.114-4.046-6.053-6.798-7.995C2.566.944 1.561 1.266.902 1.565.139 1.908 0 3.08 0 3.768c0 .69.378 5.65.624 6.479.815 2.736 3.713 3.66 6.383 3.364.136-.02.275-.039.415-.056-.938.826-1.884 1.636-2.584 2.226-2.015 1.696-2.221 2.879-2.164 3.49.071.761.642 1.258 1.485 1.258.98 0 2.25-.494 4.544-1.503l.314-.138C10.518 18.199 11.83 17.5 12 17.5c.17 0 1.482.699 2.981 1.353l.314.138c2.293 1.01 3.563 1.503 4.544 1.503.843 0 1.414-.497 1.485-1.258.057-.611-.149-1.794-2.164-3.49-.7-.59-1.646-1.4-2.584-2.226.14.017.279.036.415.056 2.67.297 5.568-.628 6.383-3.364.246-.828.624-5.789.624-6.479 0-.689-.139-1.86-.902-2.203-.659-.3-1.664-.62-4.3 1.24C16.046 4.748 13.087 8.687 12 10.8z'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* --- MOBILE LAYOUT: ABOUT PAGE --- */
@media (max-width: 768px) {
    .info-panel {
        width: 100%;
        padding: 60px 20px 20px 20px; 
    }
    
    h1.header-title {
        font-size: 2.2rem; 
    }
}