header {
    position: relative;
    z-index: 100;
    cursor: url(../CSS/cursor.png), auto;


}

body {

    font-family: 'Compaq';
    padding: 0;
    margin: 0;
        
        /*background-color: rgb(244, 191, 255);
        background-repeat: no-repeat;
        background-size: cover;
        color:red;*/
        cursor: url('../CSS/cursor.png'), auto;  z-index: 0;

  }

  div.background-image {
    position: fixed;
    z-index: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-image: url('../background.png');
    background-size: 100%;
    cursor: url(../CSS/cursor.png), auto;

 }

 @font-face {
    font-family: 'Compaq';
  src: url(../Compaq_Port3.woff);
  cursor: url(../CSS/cursor.png), auto;
}


  div.background-image {
    position: fixed;
    z-index: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-image: url('../background.png');
    background-size: 100%;
    cursor: url(../CSS/cursor.png), auto;

 }

 @font-face {
    font-family: 'Compaq';
  src: url(../Compaq_Port3.woff);
  cursor: url(../CSS/cursor.png), auto;
}

#desktop {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: start; /* aligns flex lines at the start of the container */
    height: calc(100vh - 30px); /* assumes taskbar is 30px high */
    padding: 10px;
    cursor: url(../CSS/cursor.png), auto;
}

.icon, .iconlink {
    position: relative;
    z-index: 2;
    display: flex;
    text-align: center; /* center the text */
    flex-direction: column;
    align-items: center; /* remove justify-content: center; */
    width: 70px;
    height: 50px;
    margin: 0 10px;
    cursor: url(../CSS/cursor.png), auto;
    display: inline-block;
    margin: 20px;
}

.icon p, .iconlink p {
    color: white;
    font-family: 'Compaq';
    width: auto;
    margin-top: 5px;
    font-size: 15px;
    text-align: center;
    cursor: url(../CSS/cursor.png), auto;
}

@media screen and (max-width: 600px) {
    #desktop {
        flex-direction: row; /* changes layout to rows for smaller screens */
        flex-wrap: wrap; /* allows icons to wrap onto the next row */
    }

    .icon, .iconlink {
        flex-basis: calc(33.33% - 40px); /* each item takes one-third width on small screens */
    }
}



#marqueeContainer {
    z-index: 1;
    position: fixed;
    font-family: 'Compaq';
    font-size: 20px; 
    width: 20px;
    height: 60vh; /* Reduced height */
    top: 20vh; /* Push down from top */
    right: 20%;
    overflow: hidden;
    background-color: rgb(255, 105, 180);
    writing-mode: vertical-lr;
    z-index: 1;
}

#marqueeContent {
    width: 20px;
    animation: marquee 30s linear infinite;
    color: white;
}

@keyframes marquee {
    0% { transform: translateY(100%); }
    100% { transform: translateY(-100%); }
}

@media screen and (max-width: 600px) {
    #marqueeContent {
        font-size: 15px; /* reduced size for mobile */
    }
    #marqueeContainer {
        bottom: 60px; /* or whatever value that works for your layout */
    }
}


.window {
    position: fixed;
    z-index: 3;
    top: 45%;
    left: 50%;
    width: 800px;
    height: 800px;
    background: rgb(255, 218, 250);
    border: 1px solid black;
    display: none; /* changed from "center" to "none" to hide windows initially */
    border-style: solid;
    border-width: 2px 2px 2px 2px;
    border-color: #ffffff #000000 #000000 #ffffff; /* top, right, bottom, left */
    padding: 0px 2px;
    transform: translate(-50%, -50%);
    cursor: url(../CSS/cursor.png), auto;
}

@media screen and (max-width: 800px) {
    .window {
        width: 90%; /* set the width to 90% of the viewport */
        height: 90%; /* set the height to 90% of the viewport */
    }
}

/* Individual window styles (if necessary) 
#bio-window {

}

#work-window {

}

#contact-window {

}*/


.pop-up {
    position: fixed;
    z-index: 4;
    top: 50%;
    right: 10px; 
    width: 350px;
    background: rgb(255, 218, 250);
    border: 1px solid black;
    display: block;
    border-style: solid;
    border-width: 2px 2px 2px 2px;
    border-color: #ffffff #000000 #000000 #ffffff;
    padding: 0px 2px;
    transform: translateY(-50%);
    cursor: url(../CSS/cursor.png), auto;
}

.pop-up-title-bar {
    background: rgb(240, 113, 197);
    color: white;
    padding: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'Compaq';
    font-weight: bold;
    cursor: url(../CSS/cursor.png), auto;
}

.pop-up-title-bar p {
    margin: 0;
}

.pop-up .title-bar button {
    width: 24px;
    height: 24px;
    background: #c0c0c0; /* Light gray background */
    color: #808080; /* Gray text color */
    font-weight: bold;
    text-align: center;
    border-style: solid;
    border-width: 2px 2px 2px 2px;
    margin: 2px;
    border-color: #ffffff #808080 #808080 #ffffff; /* top, right, bottom, left */
}

.pop-up .title-bar button:active {
    border-color: #808080 #ffffff #ffffff #808080; /* top, right, bottom, left */
}

.pop-up-content {
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height: 100%;
    overflow: auto;
}

.pop-up-content .twitter-tweet {
    margin: 0 auto !important;
}

@media screen and (max-width: 600px) {
    .pop-up {
        display: none;
    }
}

    

#artwork-frame {
    width: 100%;
    height: 100%;
    border: none;
}

.title-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background:  rgb(240, 113, 197);
    color: #ffffff;
    font-family: 'Compaq';
    font-weight: bold;
    padding: 2px;
    height: 20px;  /* Adjust this value as needed */
    font-size: 14px;  /* Adjust this value as needed */

}

.close {
    float: right;
    font-size: 12px; /* Adjust this value to control the size of the close button. */
    position: absolute;
    font-family: 'Compaq';
    font-weight: bold;
    top: 0;
    right: 0;
    height:25px;
    border-color: #ffffff #000000 #000000 #ffffff; /* top, right, bottom*/
    cursor: url(../CSS/cursor.png), auto;
}

#taskbar {
    z-index: 5;
    justify-content: flex-start;
    position: fixed;
    bottom: 0;
    width: 99.4%;
    background: rgb(240, 113, 197);
    color: #0a0000;
    display: flex;
    align-items: center;
    border-style: solid;
    border-width: 2px 2px 2px;
    border-color: #ffffff #000000 #000000; /* top, right, bottom*/
    padding: 1px 4px;
    height: 30px;
    cursor: url('../CSS/cursor.png'), auto;
}

@media screen and (max-device-width: 600px) {
    .icon, .iconlink {
      width: 90px;
      height: 90px;
      cursor: auto; /* Remove cursor change on touchscreen devices */
    }
    #taskbar {
      height: 60px;  /* Increased height for smaller screens. Adjust as needed. */
    }
  }

  #masterclass-icon-link {
    order: 10; 
    display: inline-block;
    width: 20px;  /* adjust as needed */
    height: 20px; /* adjust as needed */
    position: relative;
    margin-left: 10px; /* adjust this as needed to create space between the start button and the masterclass icon */
}

#masterclass-icon {
    width: 100%;
    height: 100%;
}

#masterclass-icon-link:hover {
    opacity: 0.7;
}

#masterclass-icon-link::after {
    font-size: 12px;
    content: attr(title);
    position: absolute;
    top: -20px; /* adjust as needed */
    left: 0;
    white-space: nowrap;
    display: none;
    padding: 2px 5px;
    background: #ff008c;
    color: #fff;
    font-size: 20px; /* adjust as needed */
    z-index: 1;
}

#masterclass-icon-link:hover::after {
    display: block;
}


#clock {
    order: 90; 
    font-family: 'Compaq';
    border-style: solid;
    border-width: 1px 1px 1px 1px;
    border-color: #000000 #ffffff #ffffff #000000; /* top, right, bottom, left */
    padding: 2px 5px;
    background: rgb(240, 113, 197);
    margin-left: auto;
}

#gif-container {
    position: fixed;
    z-index: 1;
    bottom: 35px; /* Adjust based on height of taskbar + desired gap between taskbar and GIF */
    left: 50%;
    transform: translateX(-50%);
}

#gif-image {
    z-index: 1;
    width: 454px; /* Adjust based on the desired width of your GIF */
    height: 93px; /* Adjust based on the desired height of your GIF */
}

@media screen and (max-width: 600px) {
  #gif-image {
    width: 300px; /* Adjust as needed for mobile devices */
    height: auto; /* You can set this to a specific value if you want, but "auto" maintains aspect ratio */
  }

  #gif-container {
    bottom: 60px; /* Adjust as needed for mobile devices */
  }
}


#start-button {
    order: 1;
    display: flex;
    align-items: center;
    color: #000000;
    font-family: 'Compaq';
    font-weight: bold;
    padding: 0px 2px;
    height: 30px;
    border-style: solid;
    border-width: 2px 2px 2px 2px;
    border-color: #ffffff #000000 #000000 #ffffff; /* top, right, bottom, left */
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3); /* add 3D effect */
    background-color: rgb(240, 113, 197);
    outline: none;
    cursor: url(../CSS/cursor.png), auto;
}


#start-logo {
    width: 20px;
    height: 20px;
    margin-right: 5px;
    cursor: url(../CSS/cursor.png), auto;
}

/*
.start-text {
    color: #000000;
    font-family: 'Compaq';
    font-weight: bold;
}*/

#start-menu {
    width: 100%;
    list-style: none; /* add this line */
    color: #0a0000;
    display: none;
    position: fixed;
    z-index: 5;
    bottom: 30px; /* height of taskbar */
    left: 0;
    width: 220px;
    background-color: rgb(240, 113, 197);
    border: 1px solid black;
    list-style-type: none;
    padding: 5px;
    cursor: url('../CSS/cursor.png'), auto;
    border-style: solid;
    border-width: 2px 2px 2px 2px;
    border-color: #ffffff #000000 #000000 #ffffff; /* top, right, bottom, left */
    
}

.start-menu-item {
    margin: 10px;
    width: 100%;
    list-style: none; /* add this line */
    color: #0a0000;
    cursor: pointer;
    padding: 5px;
    position: relative;
    cursor: url(../CSS/cursor.png), auto;
}

.start-menu-item:hover {
    width: 100%;
    background-color: rgb(255, 255, 255);
    color: rgb(240, 113, 197);
    cursor: url(../CSS/cursor.png), auto;
}

.start-menu-item > ul {
    position: absolute;
    top: 0;
    left: 100%;
    z-index: 6;
    width: 100%; /* Change from 150% to 100% */
    list-style: none; /* add this line */
    color: #0a0000;
    margin-top: 0;
    padding-top: 5px;
    padding-bottom: 5px;
    background-color: rgb(240, 113, 197);
    display: none;
    border-style: solid;
    border-width: 2px 2px 2px 2px;
    cursor: url(../CSS/cursor.png), auto;
    border-color: #ffffff #000000 #000000 #ffffff; /* top, right, bottom, left */
}
@media only screen and (max-width: 600px) {
    .start-menu-item > ul {
        width: 100%;  
        list-style: none; 
        color: #0a0000;
        margin-top: 0;
        padding-top: 5px;
        padding-bottom: 5px;
        background-color: rgb(240, 113, 197);
        display: none;
        position: absolute;
        left: 0;
        top: 100%;
        border-style: solid;
        border-width: 2px 2px 2px 2px;
        border-color: #ffffff #000000 #000000 #ffffff; 
    }
}


/* Apply hover color to the submenu items */
.start-menu-item > ul > li:hover {

    background-color: rgb(255, 255, 255);
    color: rgb(240, 113, 197);
    cursor: url(../CSS/cursor.png), auto;
    
}

.start-menu-item:hover > ul {
    display: block;
    cursor: url(../CSS/cursor.png), auto;
}

#start-menu a {
    text-decoration: none; /* Removes the underline */
    color: inherit; /* Makes the color the same as the parent element */
    cursor: url(../CSS/cursor.png), auto;
}

#start-menu a:visited {
    cursor: url(../CSS/cursor.png), auto;
    color: inherit; /* Ensures the color remains the same even after the link is clicked */
}