@font-face {
          font-family: "cherish";
          src: url("https://heartily.neocities.org/yuzuha/Cherish.ttf");
          }
        
        @font-face {
          font-family: "yurumoji";
          src: url("https://heartily.neocities.org/yuzuha/yurumoji.ttf");
          }
        
        *{
            cursor: url(https://beelzebabe.wtf/Img/icons/Cursor/pointer.png), auto;
        }
          
        html {
          cursor: url(https://beelzebabe.wtf/Img/icons/Cursor/auto.png), auto; 
        }
        body{
       
        background-color: black ;
        background-image: url("yuzuha/desktop.png");
        
        }
        html {
        cursor:url(https://beelzebabe.wtf/Img/icons/Cursor/auto.png), auto;
        
        }
        #codeWindow1{
        height: 400px;
        width: 400px;
        top:100px;
        right: 100px;
        background: #FFE6EA;
        background-image: url("yuzuha/ka06-bg-slantstripe.gif");
        }
        
        
        #codeWindow2{
        left:200px;
        top:100px;
        width:450px;
        height:400px;
        background: #ffe6ea;
        background-image: url("yuzuha/ra02-bg-slantstripe.gif"); 
       }
       
       #cherish-font{
          font-family: "cherish";
          font-size: 2rem;
       }
        
        #codeWindow3{
        width:900px;
        height:500px;
        left:400px;
        top:200px;
        
        }
        #codeWindow4{
        left:400px;
        top:250px;
        background-image: url("yuzuha/d09-bg-asteroid.gif");
        color: lawngreen;
        align-items: center;
        height: 250px;
          
        }
        
        #codeWindow5{
        left:400px;
        top:250px;
        height: 250px;
        background: #DDDDDD;
          
        }
        #codeWindow6{
        bottom:70px;
        left:500px;
        width:410px;
        height: 500px;
        background-image: url("yuzuha/ja06-bg-slantstripe.gif");
        padding: 2px;
        }
        
          #codeWindow7{
        bottom:70px;
        left:500px;
        width:400px;
        height: 350px;
        background-image: url("yuzuha/congrats.png");
        padding: 2px;
        }
        
         #codeWindow3, #codeWindow4, #codeWindow5, #codeWindow7{
            display: none; /* Hide codeWindow3 by default */
          }
        
        .draggable {
          position: fixed;
          width: 300px;
          height: 200px;
          background-color: transparent;
           box-shadow: inset -1px -1px #00138c, inset 1px 1px #0831d9, inset -2px -2px #001ea0, inset 2px 2px #166aee,
        inset -3px -3px #003bda, inset 3px 3px #0855dd;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    padding: 0 0 3px 0;
          color: black;
        overflow:scroll;
        
        }
        .draggable img {
          max-width: 90%;
          max-height: 90%;
        }
        
        .header {
           background: linear-gradient(
        180deg,
        rgba(9, 151, 255, 1) 0%,
        rgba(0, 83, 238, 1) 8%,
        rgba(0, 80, 238, 1) 40%,
        rgba(0, 102, 255, 1) 88%,
        rgba(0, 102, 255, 1) 93%,
        rgba(0, 91, 255, 1) 95%,
        rgba(0, 61, 215, 1) 96%,
        rgba(0, 61, 215, 1) 100%
    );
          cursor: url(https://beelzebabe.wtf/Img/icons/Cursor/grab.png),grab;
          padding: 3px 5px 3px 3px;
          border-top: 1px solid #0831d9;
          border-left: 1px solid #0831d9;
          border-right: 1px solid #001ea0;
          border-top-left-radius: 8px;
          border-top-right-radius: 7px;
          font-size: 15px;
          text-shadow: 1px 1px #0f1089;
          height: 28px;
            width: 98%;
         
        }
        
        .title {
          font-weight: bold;
          color: lightblue;
          cursor: url(https://beelzebabe.wtf/Img/icons/Cursor/pointer.png), auto;
        }
        
        .buttons {
          float: right;
             cursor: url(https://beelzebabe.wtf/Img/icons/Cursor/pointer.png), auto; 
           
        }
        
        button {
             cursor: url(https://beelzebabe.wtf/Img/icons/Cursor/pointer.png), auto; 
           border: 0px;
          background: #0050EE;
          border: solid white 1px;
          font-size: 20px;
          padding: 0 8px;
          color: white;
          border-radius: 3px;
          cursor: url(https://beelzebabe.wtf/Img/icons/Cursor/pointer.png), auto;
        }
        
        .reopenBtn{
        position:relative;
        left: 280px;
        background-color:darkblue;
        border:#005CF7 outset 3px;
        height:40px;
        padding:6px;
        margin-right:3px;
        }
         .startbtn:hover , .reopenBtn:hover{
          background-color: darkblue; 
            cursor: url(https://beelzebabe.wtf/Img/icons/Cursor/pointer.png), auto;
          color: white; /* Change text color on hover */
        }
        
        #bottomBar {
          position:fixed;
         bottom:0;
         left: 0;
          width: 100%;
    background: linear-gradient(
        180deg,
        rgba(9, 151, 255, 1) 0%,
        rgba(0, 83, 238, 1) 8%,
        rgba(0, 80, 238, 1) 40%,
        rgba(0, 102, 255, 1) 88%,
        rgba(0, 102, 255, 1) 93%,
        rgba(0, 91, 255, 1) 95%,
        rgba(0, 61, 215, 1) 96%,
        rgba(0, 61, 215, 1) 100%
    );
          padding: 3px;
          height: 20px;
          border-top: solid #0831d9;
          padding-bottom: 28px;
            display: flex;
          
        }
        html {
          font-family: monospace;
        
        }
        #menu {
          position: fixed;
          bottom: 50px;
          left: 0px;
          padding: px;
          background-color: #DDDDDD;
          border: 1px outset #DDDDDD;  
          display: none;
        cursor: url(https://beelzebabe.wtf/Img/icons/Cursor/pointer.png), auto;
        }
        #menuContent {
          color: transparent;
          font-size: 15px;
          margin-bottom: 1px; 
        border: outset 1px white ;
        border-radius: 0 5px 5px 0;
        background-color:#DDDDDD ;
          cursor: url(https://beelzebabe.wtf/Img/icons/Cursor/pointer.png), auto;    
         
        }
        *::-webkit-scrollbar {
              width: 10px; /* Width of the scrollbar */
          }
        
          *::-webkit-scrollbar-track {
              background: transparent; /* Color of the track */
          }
        
          *::-webkit-scrollbar-thumb {
              background: transparent; /* Color of the handle */
          }
        
          *::-webkit-scrollbar-thumb:hover {
              background: transparent; /* Color of the handle on hover */
          }
        
          *::-webkit-scrollbar-corner {
              background: transparent; /* Color of the corner */
          }
          
          /* Optional: Hide scrollbar when not scrolling */
          *::-webkit-scrollbar-thumb:vertical {
              min-height: 30px; /* Set a minimum height for the scrollbar handle */
          
        }
        
        .taskbutton{
        background-color: transparent;
        border: 0px;
        color:darkgray;
        padding: 10px;
        margin-right: 30px;
        font-family: monospace;
        
        }
        .taskbutton:hover {
        background-color:darkblue;
        }
        .startbtn {
          background-color: rgba(0, 102, 255, 1);
          border: white solid 1px;
          padding: 0px;
          color: white;
        font-size: 16px;
          width: 65px;
            height: 40px;
          margin: 3px;
        }
        .a{cursor: url('https://beelzebabe.wtf/Img/icons/Cursor/auto.png'), pointer;
        color:white;}
        
         
        ::-webkit-scrollbar {
          width: 3px;
          height: 2px;
          
        }
        
        ::-webkit-scrollbar-thumb {
          background-color: transparent;
        }
        
        ::-webkit-scrollbar-track {
          background-color: transparent;
        }
        
        /* For Firefox */
        .body , .a , .content {
          scrollbar-width: thin;
          scrollbar-color: deepPink pink;
        }
        
        /* For Internet Explorer */
        .body , .a  , .content {
          scrollbar-face-color: deepPink;
        scrollbar-track-color: deeppink;}
        
        ul {
              list-style-type: none;
        }
        .cursor{
           cursor: url(https://beelzebabe.wtf/Img/icons/Cursor/pointer.png),auto;
        
        }
        .search-container {
        margin: 3px;
        max-width:10px;
        height:40px;
        display: flex;
        }
        
        #searchInput {
        flex: 1;
        padding: 10px;
        font-size: 16px;
        }
        
        #searchButton {
        padding: 10px;
        background-color: black;
        color: deeppink;
        border: solid deeppink 1px;
        cursor: pointer;
        font-size:13px;
        }
        
        #searchButton:hover {
        background-color: black;
        color:white;
        }
        
        #searchResults {
        margin: 0px;
        position:relative;
        color:deeppink;
        bottom: 90px;
        left:0;
        border:deeppink px solid;
        height:80px;
        padding; 10px;
         
        
        }
        .reopenBtn {
        display:flex;
        right:20px;
        }
        .icon-box{
          display: flex;
        }
        icon1 , icon2 {
        flex:1 ,1;
        }
        .icon1 , .icon2{
        margin:15px;
        }
        @media only screen and (max-width: 600px) {
          /* Adjustments for smaller screens */
        
          body {
            background-size: cover; /* Ensure background image covers the screen */
          }
        
          #codeWindow1,
          #codeWindow2,
          #codeWindow3,
          #codeWindow4,
          #codeWindow5,
          #codeWindow6,
          #codeWindow7 {
            width: 90%; /* Adjust width to fit smaller screens */
            height: auto; /* Allow height to adjust based on content */
            top: auto; /* Reset positioning */
            right: auto; /* Reset positioning */
            left: auto; /* Reset positioning */
            bottom: auto; /* Reset positioning */
            margin: 10px auto; /* Center horizontally with some margin */
          }
        
          .draggable {
            width: 90%; /* Adjust width to fit smaller screens */
            height: auto; /* Allow height to adjust based on content */
          }
        
          .header {
            width: 100%; /* Ensure header spans the full width */
            border-top-left-radius: 0; /* Remove border radius on top left */
            border-top-right-radius: 0; /* Remove border radius on top right */
          }
        
          .buttons {
            float: none; /* Reset floating */
            text-align: center; /* Center align buttons */
            margin-top: 10px; /* Add some space between buttons */
          }
        
          #bottomBar {
            display: none; /* Hide bottom bar on smaller screens */
          }
        
          #menu {
            display: block; /* Show menu on smaller screens */
          }
        
          .search-container {
            max-width: none; /* Allow search container to expand */
            justify-content: center; /* Center align search container */
            margin: 10px auto; /* Center horizontally with some margin */
          }
        
          #searchInput {
            width: 70%; /* Adjust input width */
            margin-right: 5px; /* Add some space between input and button */
          }
        
          #searchButton {
            width: 25%; /* Adjust button width */
          }
        
          #searchResults {
            width: 90%; /* Adjust width to fit smaller screens */
            margin: 10px auto; /* Center horizontally with some margin */
            bottom: auto; /* Reset positioning */
            left: auto; /* Reset positioning */
          }
        
          .reopenBtn {
            display: block; /* Show reopen button on smaller screens */
            position: relative; /* Reset positioning */
            right: auto; /* Reset positioning */
            left: auto; /* Reset positioning */
            margin: 10px auto; /* Center horizontally with some margin */
          }
        
          .icon-box {
            justify-content: center; /* Center align icon box */
          }
        
          .icon1,
          .icon2 {
            margin: 5px; /* Adjust margin */
          }
         
         .column {
           float: left;
           width: 50%;
          }

          /* Clear floats after the columns */
          .row:after {
            content: "";
           display: table;
           clear: both;
          }
          
        }
        
        .row {
         display: flex;
         justify-content: center;      
          align-items: center;
        }

        .column {
          flex: 50%;
          justify-content: center;      
          align-items: center;
          padding: 10px;
        }
        
        .s_box14 { 
          background: #FF9999 ; 
          border: 3px double #FFE6EA; 
          border-radius : 3px ; 
          box-shadow : 0 0 0 5px #FF9999,5px 5px 8px #000; 
          box-sizing : border-box ; 
          color: #FF9999 ; 
          margin : 15px 0 25px ; /* Change 0 to auto for centering */ 
          padding : .5em ; 
          width : 100% /* Width */ }   


.s_box14 { 
background : #FFE6EA ; 
border : 3px double #FF9999; 
border-radius : 3px ; 
box-shadow : 0 0 0 5px #FFE6EA,5px 5px 8px #000; 
box-sizing : border-box ; 
color :#FF9999 ; 
margin : 15px 0 25px ; /* Change 0 to auto for centering */ 
padding :.5em ; 
width : 100% /* Width */ }