/* Prevent scrolling on the entire page */
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden; /* Prevent scrolling */
    background-color: #FADADD; /* Ensure background color covers entire viewport */
    font-family: 'Courier New', Courier, monospace;
}

/* Ensure all window content fits within the screen */
.window {
    max-width: 100%;
    max-height: 100%;
    overflow: hidden; /* Prevent internal scrolling */
    box-sizing: border-box;
    position: absolute;
}

/* If you have any other window-specific styles, ensure they respect the max-width and max-height properties */


/* Reset some default browser styles */
body, h1, p, ul {
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Courier New', Courier, monospace;
    background-color: #ffffff;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    height: 100vh;
    padding: 20px;
}

.window {
    width: 400px;
    height: auto;
    background-color: #FFE4E1;
    border: 2px solid black;
    box-shadow: 8px 8px 0 #000;
    margin: 10px;
    position: relative;
}

.title-bar {
    background-color: #6E5BAA;
    color: white;
    padding: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.2em;
    font-weight: bold;
}

.title-bar-controls button {
    background-color: #B8A0E3;
    border: 1px solid white;
    width: 20px;
    height: 20px;
    margin-left: 5px;
}

.window-body {
    padding: 20px;
    background-color: #FFECEF;
    position: relative;
}

.cestino-message-container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 150px;
}

.cestino-message-text {
    background-color: #FFE4C4;
    border: 2px solid #000;
    padding: 10px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 1.2em;
    box-shadow: 4px 4px 0px #000;
    border-radius: 5px;
    line-height: 1.4;
}

.cestino-message-text img {
    margin-right: 10px;
}

.action-button-container {
    margin-top: 20px;
    text-align: center;
}

.window-body {
    padding: 20px;
    color: #000;
}

.window-body h1 {
    font-size: 1.8em;
    color: #4a91e2c9;
    margin-bottom: 10px;
}

.window-body p {
    margin-bottom: 10px;
    line-height: 1.4;
}

.window-body ul {
    list-style-type: none;
}

.window-body ul li {
    margin: 5px 0;
}

.window-body ul li a {
    color: #33a8da;
    text-decoration: none;
    font-weight: bold;
}

.window-body ul li a:hover {
    text-decoration: underline;
}

.title-bar-text {
    font-size: 1.1em;
}

.title-bar-controls {
    display: flex;
    justify-content: flex-end;
}

/* General style for title bar buttons */
.title-bar-controls button {
    background-color: #B8A0E3; /* Default button color */
    border: 1px solid white;
    width: 20px;
    height: 20px;
    margin-left: 5px;
    cursor: pointer;
}

/* Specific hover styles for each button */
.title-bar-controls button[aria-label="Close"]:hover {
    background-color: #FF5F56; /* Red for close button */
}

.title-bar-controls button[aria-label="Maximize"]:hover {
    background-color: #FFBD2E; /* Yellow for maximize button */
}

.title-bar-controls button[aria-label="Minimize"]:hover {
    background-color: #27C93F; /* Green for minimize button */
}


.taskbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #4a91e2c9;
    height: 40px;
    padding: 0 10px;
    border-top: 2px solid black;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    box-shadow: 0 -2px 0 #000;
}

.start-button {
    background-color: #B8E8FF;
    padding: 5px 10px;
    border: 2px solid black;
    display: flex;
    align-items: center;
    font-family: 'Courier New', Courier, monospace;
    font-size: 1.2em;
    font-weight: bold;
    color: #000080;
    cursor: pointer;
    box-shadow: 2px 2px 0 #000;
}

.taskbar-tabs {
    display: flex;
    flex-grow: 1;
    margin: 0 10px;
}

.tab {
    background-color: #B8E8FF;
    padding: 5px 10px;
    margin-right: 5px;
    border: 2px solid black;
    display: flex;
    align-items: center;
    font-family: 'Courier New', Courier, monospace;
    font-size: 1em;
    color: #000080;
    cursor: pointer;
    box-shadow: 2px 2px 0 #000;
    white-space: nowrap;
}

.tab:last-child {
    margin-right: 0;
}

.clock {
    background-color: #B8E8FF;
    padding: 5px 15px;
    border: 2px solid black;
    font-family: 'Courier New', Courier, monospace;
    font-size: 1.2em;
    color: #000080;
    box-shadow: 2px 2px 0 #000;
}

/* App Icons Container Styling */
.app-icons-container {
    display: flex;
    flex-direction: column;
    position: absolute;
    left: 20px; /* Positioning the icons on the left */
    top: 20px; /* Add some space from the top */
    gap: 20px;
}

.icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
}

.icon img {
    width: 64px;
    height: 64px;
    margin-bottom: 5px;
}

.icon span {
    font-family: 'Courier New', Courier, monospace;
    font-size: 1em;
    color: #000;
}

.window-body {
    padding: 10px;
    background-color: #FFECEF;
    position: relative;
    text-align: center; /* Center the video within the window body */
    overflow: hidden; /* Ensure the content doesn't overflow outside the window */
}

.window-body video {
    max-width: 100%; /* Make sure the video fits within the width of the window */
    max-height: 100%; /* Make sure the video fits within the height of the window */
    width: auto;
    height: auto;
    display: block;
    margin: 0 auto; /* Center the video horizontally */
}

.welcome-window {
    position: absolute;
    top: 20%;
    left: 30%;
    transform: translate(-50%, -50%); /* Center the window */
    width: 500px; /* Increase the width */
}

.batman-window {
    position: absolute;
    top: 5%;
    left: 70%;; /* Slightly off-screen to the right */
}

.turtle-window {
    position: absolute;
    bottom: 0px; /* Slightly off-screen at the bottom */
    left: 70%;
    transform: translateX(-50%); /* Center horizontally */
}

.tiny-guy-window {
    position: absolute;
    bottom: 10%;
    left: 30%;
}

/* About Me Window */
.about-window {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 800px; /* Large width */
    height: 600px; /* Large height */
    background-color: #FFE4E1;
    border: 2px solid black;
    box-shadow: 8px 8px 0 #000;
    display: none; /* Initially hidden */
}

.about-window .window-body {
    padding: 30px; /* Add padding for content */
    font-size: 1.2em; /* Adjust font size for readability */
    line-height: 1.6;
    background-color: #FFECEF; /* Background color */
}

.about-window h1 {
    font-size: 2em; /* Larger font size for the heading */
    margin-bottom: 20px;
}

.about-window p {
    margin-bottom: 15px;
}


/* Taskbar styling */
.taskbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #4db8e7;
    height: 40px;
    padding: 0 10px;
    border-top: 2px solid black;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    box-shadow: 0 -2px 0 #000;
}

.start-button {
    background-color: #B8E8FF;
    padding: 5px 10px;
    border: 2px solid black;
    display: flex;
    align-items: center;
    font-family: 'Courier New', Courier, monospace;
    font-size: 1.2em;
    font-weight: bold;
    color: #000080;
    cursor: pointer;
    box-shadow: 2px 2px 0 #000;
}

.taskbar-tabs {
    display: flex;
    flex-grow: 1;
    margin: 0 10px;
}

.tab {
    background-color: #B8E8FF;
    padding: 5px 10px;
    margin-right: 5px;
    border: 2px solid black;
    display: flex;
    align-items: center;
    font-family: 'Courier New', Courier, monospace;
    font-size: 1em;
    color: #000080;
    cursor: pointer;
    box-shadow: 2px 2px 0 #000;
    white-space: nowrap;
}

.tab:last-child {
    margin-right: 0;
}

.clock {
    background-color: #B8E8FF;
    padding: 5px 15px;
    border: 2px solid black;
    font-family: 'Courier New', Courier, monospace;
    font-size: 1.2em;
    color: #000080;
    box-shadow: 2px 2px 0 #000;
}