/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
    background-color: #fce8f4;
    margin: 0;
    padding: 0;
    font-family: monospace;
    min-height: 100vh;
    /* Use Flexbox to center the main content vertically and horizontally */
    display: flex; 
    justify-content: center;
    align-items: center;
}

/* New: Centering and Scaling Container */
.centering-wrapper {
    /* Scale up the entire design by 15% and shift 50px LEFT */
    transform: scale(1.15) translateX(-50px); 
    /* The origin of the scaling should be the center */
    transform-origin: center center;
}

/* Container for all windows to use relative positioning */
.desktop {
    width: 1000px; /* Define a fixed width for the desktop canvas */
    height: 800px; /* Define a fixed height for the desktop canvas */
    position: relative;
}

/* --- General Window Styles --- */
.window {
    border: 2px solid black;
    background-color: white;
    position: absolute; /* Essential for exact positioning */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.title-bar {
    border-bottom: 2px solid black;
    padding: 2px 5px;
    font-size: 0.9em;
    background-color: #f0f0f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.close-btn {
    font-weight: bold;
    cursor: default;
}

.content {
    flex-grow: 1;
    padding: 5px;
    overflow: auto;
    position: relative; /* Make content area the reference for absolute positioning */
}

/* --- Social Media Clustered Layout --- */

.social-media .content {
    /* Remove default padding and use the inner cluster for control */
    padding: 0; 
}

/* This container holds all social media items and is positioned near the top of the window */
.social-media-cluster {
    position: absolute;
    top: 10px; /* Distance from top edge of window */
    left: 10px; /* Distance from left edge of window */
    width: 180px; /* Give it a fixed width inside the 200px window */
    display: flex;
    flex-direction: column; /* Stack groups vertically */
    gap: 15px; /* Space between each group (Discord, Steam, etc.) */
}

/* A row to hold the logo and the text */
.social-item-row {
    display: flex;
    align-items: center;
    gap: 10px; /* Space between logo and text */
}

.social-media-logo {
    width: 50px;
    height: 50px;
    box-sizing: border-box;
    /* Properties to easily add a logo as a background image */
    background-size: cover; 
    background-position: center;
    background-repeat: no-repeat;
}

.social-media-text {
    font-family: monospace;
    font-size: 0.9em;
    font-weight: bold;
    line-height: 1.1; /* Tighter line height */
}

/* --- PLACEHOLDERS FOR YOUR LOGO IMAGES (Replace content below with your Base64 or URL) --- */
.discord-logo-placeholder {
    background-image: url("https://i.imgur.com/iXb26SA.png");
}

.steam-logo-placeholder {
    background-image: url("https://upload.wikimedia.org/wikipedia/commons/8/83/Steam_icon_logo.svg");
}

.lastfm-logo-placeholder {
    background-image: url("https://www.last.fm/static/images/lastfm_avatar_twitter.52a5d69a85ac.png");
}

.roblox-logo-placeholder {
    background-image: url("https://upload.wikimedia.org/wikipedia/commons/7/7e/Roblox_Logo_2022.jpg");
}

/* ------------------------------------ */

/* --- Specific Window Positioning and Sizing (Adjusted) --- */

/* Left Window: Social Media (Moved up to 100px) */
.social-media {
    width: 200px;
    height: 300px;
    top: 100px; 
    left: 100px;
}

/* Center Window: kirei.exe (Main Content) */
.kirei-exe {
    width: 450px;
    height: 650px;
    top: 50px;
    left: 320px; 
}

/* Right Window: My Work (Closer to kirei.exe) */
.my-work {
    width: 200px;
    height: 450px;
    top: 170px; 
    left: 780px; 
}

/* --- kirei.exe Content Styling --- */

.main-content {
    padding: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.top-section {
    display: flex;
    padding: 10px;
    border-bottom: 2px solid black;
}

.profile-pic-box {
    width: 120px;
    height: 80px;
    border: 2px solid black;
    margin-right: 10px;
}

.profile-info {
    font-size: 0.9em;
}

.username {
    font-weight: bold;
    margin-top: 0;
    margin-bottom: 5px;
}

.divider {
    text-align: center;
    padding: 5px 0;
    border-bottom: 2px solid black;
    font-size: 0.8em;
}

.middle-section {
    display: flex;
    flex-grow: 1;
    padding: 10px;
}

.big-text-area {
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}

.big-letter {
    font-size: 8em;
    line-height: 0.8;
    font-weight: bold;
}

.side-boxes {
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-left: 10px;
}

.side-box {
    width: 100%;
    height: 48%;
    border: 2px solid black;
    box-sizing: border-box;
}

.music-player {
    text-align: center;
    padding: 5px;
    border-top: 2px solid black;
    font-size: 0.9em;
}

.now-playing {
    margin: 0;
}

.bottom-bar {
    text-align: center;
    padding: 5px 0;
    border-top: 2px solid black;
    font-size: 0.8em;
    line-height: 1.2;
}

.bottom-bar p {
    margin: 0;
}

/* other */
.right-end {
  display: flex;
  justify-content: flex-end;
}