@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');

body {
    background: #008080; /* Classic Windows 95 teal background */
    color: black;
    font-family: 'MS Sans Serif', sans-serif;
    text-align: center;
    margin: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
body {
    min-height: 100vh; /* Expands only when needed */
    overflow: hidden; /* Prevents unwanted scrolling */
}

/* Container for the fake Windows 95 window */
.window {
    position: relative;
    width: 80%;
    max-width: 600px;
    max-height: 85vh; /* Limits window height to 85% of the screen */
    overflow: hidden; /* Prevents unnecessary scrolling */
    background: #c0c0c0;
    border: 3px solid black;
    box-shadow: 5px 5px 0px black;
    text-align: left;
    padding: 10px;
    cursor: default; /* Classic Windows 95 pointer */
}

/* Title Bar */
.window-title {
    background: navy;
    color: white;
    padding: 5px;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 4px;
    cursor: grab; /* Draggable Windows 95 style */
}

/* Window Buttons */
.window-buttons span {
    padding: 2px 6px;
    border: 2px solid black;
    background: silver;
    margin-left: 3px;
    cursor: pointer;
}

.window-buttons span:hover {
    background: gray;
}

/* Window Content */
.window-content {
    max-height: calc(85vh - 50px); /* Ensures content respects window height */
    overflow-y: auto; /* Enables scrolling only when content exceeds max height */
    background: #c0c0c0;
    padding: 15px;
    border: 2px inset black;
    font-size: 14px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    cursor: default;
}

/* Navigation Links */
.nav-links {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.nav-links {
    display: flex;
    flex-direction: column; /* Keeps buttons stacked vertically */
    align-items: center; /* Centers buttons horizontally */
    justify-content: center; /* Centers content vertically */
    height: 100%; /* Ensures it fills the parent container */
    /* gap: 10px; Adds space between buttons */
}

.nav-links a, .nav-links div {
    text-decoration: none;
    color: black;
    font-size: 14px;
    border: 2px outset black;
    padding: 5px 10px;
    background: silver;
    margin: 5px 0;
    cursor: pointer;
    display: inline-block; /* Ensures div behaves like a button */
    text-align: center;
}

.nav-links a:hover, .nav-links div:hover {
    background: gray;
    border-style: inset;
}

/* Flashing text effect */
@keyframes blink {
    50% { opacity: 0; }
}

.blink {
    animation: blink 1s infinite;
}

/* Windows 95 Taskbar */
.taskbar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #c0c0c0;
    padding: 5px;
    display: flex;
    align-items: center;
    border-top: 3px solid black;
    z-index: 100000;
}

/* Start Button */
.start-button {
    background: silver;
    padding: 5px 10px;
    border: 2px outset black;
    cursor: pointer;
}

.start-button:hover {
    border: 2px inset black;
}

/* Start Menu */
.start-menu {
    position: absolute;
    bottom: 40px;
    left: 5px;
    background: #c0c0c0;
    border: 2px outset black;
    padding: 5px;
    width: 160px;
    font-size: 14px;
    display: none;
    z-index: 1000;
}

.start-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.start-menu ul li {
    padding: 5px;
    cursor: pointer;
    background: silver;
    border: 1px solid black;
    text-align: left;
}

.start-menu ul li:hover {
    background: gray;
}

/* Clock */
.clock {
    margin-left: auto;
    margin-right: 10px;
    padding: 5px 10px;
    background: #0A435A;
    border: 2px inset black;
    font-size: 14px;
}

/* Hide Elements by Default */
.hidden {
    display: none;
}

#main-content {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* General Window Styling */
.window {
    max-height: 80vh; /* Limits window height to 85% of the screen */
    position: absolute;
    width: 300px;
    background: #c0c0c0;
    border: 3px solid black;
    box-shadow: 5px 5px 0px black;
    text-align: left;
    padding: 10px;
    cursor: default; /* Classic Windows 95 pointer */
}

/* Window Title Bar */
.window-title {
    background: navy;
    color: white;
    padding: 5px;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    cursor: grab; /* Draggable Windows 95 style */
}

/* Window Buttons */
.window-buttons span {
    padding: 2px 4px;
    width: 16px;
    height: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid black;
    background: silver;
    cursor: pointer;
}

.window-buttons span:hover {
    background: gray;
}

/* Window Content */
.window-content {
    max-height: calc(85vh - 50px); /* Ensures content respects window height */
    overflow-y: auto; /* Enables scrolling only when content exceeds max height */
    background: #c0c0c0;
    padding: 10px;
    border: 2px inset black;
    font-size: 14px;
    overflow-y: auto;  /* Enable scrolling when content overflows */
}

/* Positioning Windows */
#work-window { top: 10%; left: 10%; }
#education-window { top: 50px; right: 20%; }
#skills-window { bottom: 50%; left: 30%; }
#contact-window { bottom: 10px; right: 25%; }
#additional-window {top: 10%; right: 5%;}
#guess-window{top: 5%; left:15%;}
#website-window{top: 5%;}
#consulting-window{top: 5%; right:15%;}

/* Draggable Windows */
.draggable {
    cursor: default;
}

#skills-window, #contact-window {
    bottom: auto; /* Prevents forcing it to the bottom */
    top: 60%; /* Move them up slightly */
}

#contact-window .window-content {
    max-height: 1500px;
    overflow-y: auto;
}

.window-buttons {
    display: flex;
    flex-direction: row; /* Ensures horizontal layout */
    justify-content: center; /* Center align buttons */
}

/* Ensure links inside window buttons do not turn purple */
.window-buttons a {
    text-decoration: none; /* Remove underline */
    color: white; /* Default black color */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

/* Remove visited (purple) link styling */
.window-buttons a:visited {
    color: white; /* Ensures it stays black */
}

/* Ensure hover effect matches the other buttons */
.window-buttons a:hover {
    background: gray;
    color: red;
}

/* Desktop Icons */
.desktop-icons {
    position: absolute;
    top: 20px;
    left: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    
}


.desktop-icon {
    width: 60px;
    text-align: center; /* Center the text horizontally */
    cursor: pointer;
    font-family: 'VT323', monospace;
    display: flex;
    flex-direction: column; /* Stack image and text vertically */
    justify-content: center; /* Align text and image vertically */
    align-items: center; /* Center them horizontally */
}



.desktop-icon img {
    width: 48px;
    height: 48px;
}

.desktop-icon p {
    font-size: 15px;
    color: white;
    text-align: center;
}

.edu-box {
    border: 2px inset black;
    background: #c0c0c0;
    padding: 10px;
    margin-bottom: 10px;
}

.desktop-icons {
    position: absolute;
    width: 100%;
    height: 100%;
}

/* Generic Icon Group Styling */
.icon-group {
    display: flex;
    flex-direction: column;
    gap: 15px; /* Space between icons in a group */
}

/* Positioning Groups Around the Desktop */
.group-top-left {
    position: absolute;
    top: 2%;
    left: 2%;
}

.group-bottom-left {
    position: absolute;
    bottom: 20%;
    left: 20%;
}

.group-top-right {
    position: absolute;
    top: 2%;
    right: 5%;
}

.group-bottom-right {
    position: absolute;
    bottom: 30%;
    right: 25%;
}




.hidden {
    display: none !important;
}

.window-title {
    cursor: grab;
}

.window-title:active {
    cursor: grabbing;
}





/* Console Window */
#console-window {
    position: absolute;
    width: 500px;
    background: #0A435A !important;
    border: 3px solid black;
    box-shadow: 5px 5px 0px black;
    text-align: left;
    color: #FFFFFF; /* Green text */
    
}



/* Window Buttons */
#console-window .window-buttons span {
    padding: 2px 6px;
    border: 2px solid black;
    background: silver;
    margin-left: 3px;
    cursor: pointer;
}

#console-window .window-buttons span:hover {
    background: gray;
}

/* Console Output */
#console-window .console-output {
    height: 250px;
    overflow-y: auto;
    padding: 10px;
    background: #0A435A;
    font-family: 'VT323', monospace;
}

/* Console Input */
#console-window .console-input {
    display: flex;
    align-items: center;
    padding: 5px;
    background: #0A435A;
    color: #FFFFFF;
    font-family: 'VT323', monospace;
}

#console-window .console-input input {
    background: #0A435A ;
    color: #FFFFFF;
    font-family: 'VT323', monospace;
    font-size: 20px;
    border: none;
    outline: none;
    width: 100%;
    
}

#console-window {
    font-size: 20px;
}



#console-window .window-content {
    background: #0A435A;
}

#start-menu {
    display: none; /* Start hidden, but JavaScript can toggle it */
    position: absolute;
    bottom: 40px;
    left: 0;
    width: 200px;
    background: #c0c0c0;
    border: 2px solid black;
    /* padding: 10px; */
    box-shadow: 3px 3px 0px black;
    z-index: 1000; /* Ensures it appears on top */
}

/* This hides all scrollbars on the page */
::-webkit-scrollbar {
    display: none;
}



.window {
    max-height: 85vh;  /* Could be limiting the total window size */
    overflow: hidden;  /* Prevents overflow */
}


.window-content a {
    color: black;
}

.window-content a:visited {
    color: #1a1a1a;
}

.clock {
    color: white;
}




.screenshots {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.screenshot {
    width: 30%;
    height: auto;
    border-radius: 10px;
}

.video-container iframe {
    border-radius: 10px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
}



.inline-image {
    width: 20px; /* Adjust size as needed */
    height: auto;
    margin: 0 5px; /* Adds spacing between the image and text */
    vertical-align: middle; /* Aligns the image with the middle of the text */
}


/* Change font size of the window title only */
.window-title-text {
    font-size: 12px; /* Adjust as needed */
}

/* Ensure the window buttons stay at their default font size */
.window-buttons span {
    font-size: 16px; /* Adjust this for your buttons */
}


/* Styling for the container that holds the images */
.screenshots {
    display: flex;
    flex-wrap: wrap; /* Allows the images to wrap if needed */
    gap: 10px; /* Adds spacing between images */
    justify-content: center; /* Centers the images horizontally */
}

/* Styling for the individual images */
.screenshot {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Styling for the horizontal screenshot (screenshot 4) */
.horizontalscreenshot {
    display: flex;
    justify-content: center; /* Centers the image */
    width: 100%; /* Ensures it takes full width of the container */
    margin-top: 20px; /* Adds some space between the portrait images and the horizontal one */
}

.horizontalscreenshot img {
    max-width: 100%; /* Ensures the image takes up full width but doesn't overflow */
    width: 80%; /* Adjusts the width to fit the container */
    height: auto;
    display: block;
    margin: 0 auto; /* Centers the image */
}

span {
    white-space: nowrap;
}

.start-image {
    vertical-align: middle;
    height: 20px;
    width: auto;
    /* padding-right: 5px; Adds spacing between image and text */
}