body {
    margin: 0;
    padding: 0;
    background-image: url('DB0B3B0A-1888-41AB-B044-AB24A90229CE..jpeg');
    background-size: cover;
    background-repeat: no-repeat;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 90vh; 
    background-position: center;
    box-sizing: border-box;
}

.hidden {
    display: none !important;
}

.wrapper {
    position: relative;
    top: 50px;
}

.box-container {
    display: flex;
    flex-direction: column;
    align-items: center; 
    justify-content: center; 
    position: relative;
}

.box {
    border-radius: 0px 0px 2vw 2vw; /* Using vw for consistent scaling */
    width: 61vw; /* 47% of the viewport width */
    height: 57vh; /* 53% of the viewport height */
    border: 2vw solid rgb(0, 0, 0); /* Using vw for the border to scale with the width */
    background-color: black;
    overflow-y: scroll;
    color: #73f073;
    font-family: 'Source Code Pro', monospace;
    position: fixed;
    top: 5vw; /* Adjusted using vw to align with the viewport width */
    left: 50%;
    transform: translateX(-50%);
    font-size: 1vw;
}

.loading-box {
    display: none;
    position: fixed;
    top: 50vh;
    left: 50vw;
    transform: translate(-50%, -50%);
    background-color: rgb(1, 1, 49); 
    color: #fff;
    padding: 20px;
    border-radius: 10px;
    font-size: 1.5em;
    height: 40vh;
    width: 40vw;
    text-align: center; /* Center-aligns the content */
}

.loading-image {
    position: fixed;
    height: 65vh;
    width: 30vw;
    top: -13vh;
    left: 6vw;
}


.loading-bar {
    width: 70%;
    background-color: #333;
    border-radius: 10px;
    height: 10px;
    position: relative;
    overflow: hidden;
    top: 35vh;
    left: 6vw;
}

.loading-progress {
    width: 0; /* Set to 0 initially, will be updated dynamically */
    height: 100%;
    background-color: #4caf50; /* Green color for the progress */
    position: absolute;
    top: 0;
    left: 0;
    transition: width 0.5s ease; /* Smooth transition for width changes */
}



.box2 {
    display: flex;
    border-radius: 0.3vw ; /* Using vw for consistent scaling */
    width: 65vw; /* 50% of the viewport width */
    height: 6vh; /* 6% of the viewport height */
    text-align: center;
    justify-content: center;
    align-items: center;
    background-color: white;
    box-sizing: border-box;
    position: fixed;
    top: 3vw; /* Adjusted using vw to align with the viewport width */
    left: 50%;
    transform: translateX(-50%);
    font-size: 1.1vw;
}

.box3 {
    border-radius: 20px;
    width: 48vw;
    left: 25vw;
    height: 9vh;
    border: 2px solid rgba(255, 255, 255, 0.09); /* Faint white border */
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    background: transparent;
    backdrop-filter: blur(40px);
    box-sizing: border-box;
    position: fixed; /* Ensure positioning context */
    top: 84.5vh; /* Move the box up by 20px */
}


.box3::before {
    content: "";
    display: block;
    width: 1.5px; /* Adjust the width of the line */
    height: 80%; /* Full height of the box3 */
    background-color: gray; /* Adjust color of the line */
    position: absolute; /* Position the line absolutely within the box */
    left: 62.2%; /* Center the line horizontally */
    transform: translateX(-50%); /* Center the line perfectly */
}

.box3::after {
    content: "";
    display: block;
    width: 1.5px;
    height: 80%;
    background-color: gray;
    position: absolute;
    left: 22.2%; /* Change this to wherever you want the second line */
    transform: translateX(-50%);
}


::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 7px;
}
::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: white;
    box-shadow: 0 0 1px rgba(255, 255, 255, .5);
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.516)
}

#inputArea::-webkit-scrollbar {
    display: none; 
}

.custom-link{
    color:white;
    text-decoration: none
}

.custom-link:hover{
    text-decoration: underline;
}

.cus-link{
    color: #73f073;
    text-decoration: none
}

.cus-link:hover{
    text-decoration: underline;
}

.c-link{
    color:#73f073;
    text-decoration: none

}

.c-link:hover{
    text-decoration: underline;
}

.cust-link{
    color: #73f073;
    text-decoration: none

}

.cust-link:hover{
    text-decoration: underline;
}

.snake{
    font-weight: bold;
    font-size: 20px;
}

.nearme{
    font-weight: bold;
    font-size: 20px;
}

.rezplan{
    font-weight: bold;
    font-size: 20px;
}

.campr{
    font-weight: bold;
    font-size: 20px;
}

.tli{
    font-weight: bold;
    font-size: 20px;
}

.folder{
    width: 25px;  
    height: 25px;  
    margin-right: 10px;  
    vertical-align: middle;
    
}

#demo {
    font-size: 1vw;
    margin: 0;
    padding: 0;
    color: #73f073;
    vertical-align: top;
    font-family: 'Source Code Pro', monospace;
    border: none;
    caret-color: white;
    outline: none;
}

.help-item {
    display: flex;
    margin-bottom: 5px; 
}

.command {
    width: 100px; 
    font-weight: bold;
}

.description {
    flex: 1; 
    margin-left: 25px;
}


.inputArea {
    color: #73f073;
    font-family: 'Source Code Pro', monospace;
    font-size: 1vw;
    outline: none;
    border: none;
    background: transparent;
    caret-color: white;
    display: inline-block;
    width: 100%; 
    height: auto; 
    overflow: auto; 
}

.inputArea:focus {
    outline: none;
}

#inputContainer {
    display: flex;
    align-items: center;
}

.box.minimized {
    transition: all 0.3s ease-in 0.3s;
    height: 0;
    width: 0;
    border-width: 0;
    padding: 0;
    overflow: hidden;
    background: transparent;
}

.box.maximized {
    transition: all 0.3s ease-in 0.3s;
    width: 910px;
    height: 400px;
    border: 20px solid rgb(0, 0, 0);
    padding: 0px;
    background-color: black;
    position: relative; /* Ensure the box is positioned relative to its normal flow */
    top: -30px; /* Move the box up by 70px */
    left: 45.3%; /* Center horizontally */
    transform: translateX(-50%); /* Adjust horizontal positioning */    
}



.closebutton {
    height: 15px;
    width: 15px;
    position: absolute;
    left: 1vw;
    top: 1.5vh;
    background-color: #f23e3e;
    border-radius: 50%;
    margin-left: auto;
}

.minzbutton {
    height: 15px;
    width: 15px;
    position: absolute;
    left: 3vw;
    top: 1.5vh;
    background-color: #f5f53e;
    border-radius: 50%;
    margin-left: auto;
}

.maxizbutton {
    display: none;
    height: 15px;
    width: 15px;
    position: absolute;
    left: 5vw;
    top: 1.5vh;
    background-color: #73f073;
    border-radius: 50%;
    margin-left: auto;
}

.box2 span.with-image {
    display: inline-block; 
    vertical-align: middle; 
    overflow: hidden;
    white-space: nowrap; 
    text-overflow: ellipsis; 
}

.box2.minimized {
    transition: all 0.3s ease-in 0.3s;
    height: 0;
    width: 0;
    border-width: 0;
    padding: 0;
    overflow: hidden;
    background: transparent;
}


.box2.maximized{
    transition: all 0.3s ease-in 0.3s;
    width: 950px;
    height: 30px;
    border: 20px solid white;
    padding: 0px;
    background-color: white;
    overflow: auto
}



.closebutton:hover {
    display: block;
}


.spacing {
    display: inline-block;
    width: 150px;
}

.closebutton:hover {
    background-image: url('manii.png');
    background-size: cover;
    opacity: 0.8;
}

.minzbutton:hover {
    background-image: url('close.png');
    background-size: cover;
    opacity: 0.8;
}

.maxizbutton:hover {
    background-image: url('max.png');
    background-size: cover;
    opacity: 0.8;
}

.source-code-pro-custom {
    font-family: "Source Code Pro", monospace;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

body {
    margin: 0;
    padding: 0;
    background-color: black;
    overflow-x: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh; /* Full viewport height to center content vertically */
    box-sizing: border-box;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}



.box21{
    width: 3.5vw;
    height: 8vh;
    background-image: url('instagram.png');
    position: fixed;
    top: 86vh; 
    left: 55.5vw; 
    background-size: contain;
    background-repeat: no-repeat;
    justify-content: center;
    align-items: center;
    transition: transform 0.3s ease; /* Smooth transition for the transform */
}


.box21::before {
    content: "Instagram";
    position: absolute;
    bottom: 100%; /* Position above the element */
    left: 50%;
    transform: translateX(-50%); /* Center the text */
    opacity: 0; /* Initially hidden */
    transition: opacity 0.3s ease; /* Smooth transition for opacity */
    background: #333; /* Background color for visibility */
    color: #fff; /* Text color */
    padding: 5px;
    border-radius: 3px; /* Rounded corners for the text box */
    white-space: nowrap; /* Prevent text wrapping */
}

.box21:hover {
    opacity: 0.9;
    transform: translateY(-10px) rotateY(10deg); /* Lifts and tilts the icon */
    cursor: pointer;
}

.box21:hover::before {
    opacity: 1; /* Show text on hover */
}

.box22{
    width: 3.5vw;
    height: 8vh;
    background-image: url('linkedin.png');
    position: fixed;
    top: 86vh; 
    left: 60.1vw; 
    background-size: contain;
    background-repeat: no-repeat;
    justify-content: center;
    align-items: center;
    transition: transform 0.3s ease; /* Smooth transition for the transform */
}


.box22::before {
    content: "Linkedin";
    position: absolute;
    bottom: 100%; /* Position above the element */
    left: 50%;
    transform: translateX(-50%); /* Center the text */
    opacity: 0; /* Initially hidden */
    transition: opacity 0.3s ease; /* Smooth transition for opacity */
    background: #333; /* Background color for visibility */
    color: #fff; /* Text color */
    padding: 5px;
    border-radius: 3px; /* Rounded corners for the text box */
    white-space: nowrap; /* Prevent text wrapping */
}

.box22:hover {
    opacity: 0.9;
    transform: translateY(-10px) rotateY(10deg); /* Lifts and tilts the icon */
    cursor: pointer;
}

.box22:hover::before {
    opacity: 1; /* Show text on hover */
}



.box23{
    width: 3.5vw;
    height: 8vh;
    background-image: url('381376_github_logo_icon.png');
    position: fixed;
    top: 86vh; 
    left: 64.5vw; 
    background-size: contain;
    background-repeat: no-repeat;
    justify-content: center;
    align-items: center;
    transition: transform 0.3s ease; /* Smooth transition for the transform */
}


.box23::before {
    content: "Github";
    position: absolute;
    bottom: 100%; /* Position above the element */
    left: 50%;
    transform: translateX(-50%); /* Center the text */
    opacity: 0; /* Initially hidden */
    transition: opacity 0.3s ease; /* Smooth transition for opacity */
    background: #333; /* Background color for visibility */
    color: #fff; /* Text color */
    padding: 5px;
    border-radius: 3px; /* Rounded corners for the text box */
    white-space: nowrap; /* Prevent text wrapping */
}

.box23:hover {
    opacity: 0.9;
    transform: translateY(-10px) rotateY(10deg); /* Lifts and tilts the icon */
    cursor: pointer;
}

.box23:hover::before {
    opacity: 1; /* Show text on hover */
}

.box4 {
    width: 5.5vw;
    height: 7.8vh;
    background-image: url('photos.png');
    position: fixed;
    top: 85.5vh; 
    left: 36vw; 
    background-size: contain;
    background-repeat: no-repeat;
    display: flex;
    z-index: 2;
    justify-content: center;
    align-items: center;
    transition: transform 0.3s ease; /* Smooth transition for the transform */
}

.box4::before {
    content: "Photos";
    position: absolute;
    bottom: 100%; /* Position above the element */
    left: 50%;
    transform: translateX(-50%); /* Center the text */
    opacity: 0; /* Initially hidden */
    transition: opacity 0.3s ease; /* Smooth transition for opacity */
    background: #333; /* Background color for visibility */
    color: #fff; /* Text color */
    padding: 5px;
    border-radius: 3px; /* Rounded corners for the text box */
    white-space: nowrap; /* Prevent text wrapping */
}

.box4:hover {
    opacity: 0.9;
    transform: translateY(-10px) rotateY(10deg); /* Lifts and tilts the icon */
    cursor: pointer;
}

.box4:hover::before {
    opacity: 1; /* Show text on hover */
}



.box24 {
    width: 3.3vw;
    height: 6.9vh;
    background-image: url('Gemini_Generated_Image_62vtvm62vtvm62vt.jpg');
    position: fixed;
    top: 86vh; 
    left: 41.5vw; 
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 12px;
    transition: transform 0.3s ease; /* Smooth transition for the transform */
}

.box24::before {
    content: "Terminal";
    position: absolute;
    bottom: 100%; /* Position above the element */
    left: 50%;
    transform: translateX(-50%); /* Center the text */
    opacity: 0; /* Initially hidden */
    transition: opacity 0.3s ease; /* Smooth transition for opacity */
    background: #333; /* Background color for visibility */
    color: #fff; /* Text color */
    padding: 5px;
    border-radius: 3px; /* Rounded corners for the text box */
    white-space: nowrap; /* Prevent text wrapping */
}

.box24:hover {
    opacity: 0.9;
    transform: translateY(-10px) rotateY(10deg); /* Lifts and tilts the icon */
    cursor: pointer;
}

.box24:hover::before {
    opacity: 1; /* Show text on hover */
}



.box25 {
    width: 6.5vw;
    height: 7.5vh;
    background-image: url('document.png');
    position: fixed;
    top: 86vh; 
    left: 67vw; 
    background-size: contain;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.3s ease; /* Smooth transition for the transform */
}

.box25::before {
    content: "Resume";
    position: absolute;
    bottom: 100%; /* Position above the element */
    left: 50%;
    transform: translateX(-50%); /* Center the text */
    opacity: 0; /* Initially hidden */
    transition: opacity 0.3s ease; /* Smooth transition for opacity */
    background: #333; /* Background color for visibility */
    color: #fff; /* Text color */
    padding: 5px;
    border-radius: 3px; /* Rounded corners for the text box */
    white-space: nowrap; /* Prevent text wrapping */
}

.box25:hover {
    opacity: 0.9;
    transform: translateY(-10px) rotateY(10deg); /* Lifts and tilts the icon */
    cursor: pointer;
}

.box25:hover::before {
    opacity: 1; /* Show text on hover */
}

    
.box26 {
    width: 3.85vw;
    height: 7.2vh;
    background-image: url('image-removebg-preview (36).png');
    position: fixed;
    top: 85.6vh; 
    left: 50.2vw; 
    background-size: contain;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.3s ease; /* Smooth transition for the transform */
}

.box26::before {
    content: "Calculator";
    position: absolute;
    bottom: 100%; /* Position above the element */
    left: 50%;
    transform: translateX(-50%); /* Center the text */
    opacity: 0; /* Initially hidden */
    transition: opacity 0.3s ease; /* Smooth transition for opacity */
    background: #333; /* Background color for visibility */
    color: #fff; /* Text color */
    padding: 5px;
    border-radius: 3px; /* Rounded corners for the text box */
    white-space: nowrap; /* Prevent text wrapping */
}

.box26:hover {
    opacity: 0.9;
    transform: translateY(-10px) rotateY(10deg); /* Lifts and tilts the icon */
    cursor: pointer;
}

.box26:hover::before {
    opacity: 1; /* Show text on hover */
}


    
.box27 {
    width: 4.4vw;
    height: 8.7vh;
    background-image: url('image-removebg-preview (37).png');
    position: fixed;
    top: 85vh; 
    left: 41vw; 
    background-size: contain;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    z-index: 2;
    align-items: center;
    transition: transform 0.3s ease; /* Smooth transition for the transform */
}

.box27::before {
    content: "Sticky Notes";
    position: absolute;
    bottom: 100%; /* Position above the element */
    left: 50%;
    transform: translateX(-50%); /* Center the text */
    opacity: 0; /* Initially hidden */
    transition: opacity 0.3s ease; /* Smooth transition for opacity */
    background: #333; /* Background color for visibility */
    color: #fff; /* Text color */
    padding: 5px;
    border-radius: 3px; /* Rounded corners for the text box */
    white-space: nowrap; /* Prevent text wrapping */
}

.box27:hover {
    opacity: 0.9;
    transform: translateY(-10px) rotateY(10deg); /* Lifts and tilts the icon */
    cursor: pointer;
}

.box27:hover::before {
    opacity: 1; /* Show text on hover */
}



#box5, #box6, #box7{
    display: none;
}

.box5 {
    background-color: white;
    width: 32vw; 
    height: 62vh;
    display: flex;
    flex-direction: column; 
    justify-content: flex-start; 
    align-items: flex-start; 
    border-radius: 10px;
    position: fixed; /* Absolute positioning for fixed layout */
    left: 70vw; /* Center horizontally */
    top: 50vh; /* Center vertically */
    transform: translate(-50%, -50%); /* Adjust to exact center */
    color: black;
    padding: 15px; 
    transition: all 0.3s ease-in-out;
    z-index: 100;
}

.box5.maximized {
    position: fixed; /* or absolute */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    transition: all 0.3s ease-in-out; /* Smooth transition */
    z-index: 100;
}


/* Hide the text by default */
.box5-text {
    display: none; /* Hide the text initially */
    position: absolute;
    bottom: 11%; /* Position text at the bottom */
    left: 41%; /* Center text horizontally */
    transform: translateX(-50%); /* Adjust for true centering */
    color: black; /* Text color */
    font-size: 1.6vw; /* Font size */
    justify-content: center; /* Centers content vertically */
  align-items: center;      /* Centers content horizontally */
}


.box5-text-bottom {
    display: none; /* Hide the text initially */
    position: absolute;
    bottom: 8%; /* Position text at the bottom */
    left: 41%; /* Center text horizontally */
    transform: translateX(-50%); /* Adjust for true centering */
    color: grey; /* Text color */
    font-size: 0.9vw; /* Font size */
}



.box5.maximized .box5-text,
.box5.maximized .box5-text-bottom {
    display: block; /* Show both texts when maximized */
}

h1 {
    font-size: 2.2vw;
    margin-top: 1vw; 
    margin-bottom: 0vw;
}


p {
    font-size: 1.2vw;
    margin: 0.1vw; 
}



.line {
    width: 100%; /* Full width of the container */
    border-top: 1px solid lightgray; /* Thin, light gray line */
    margin-top: 10px; /* Space above the line */
}

.box6 {
    background-image: url('IMG_2130.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    width: 13vw; 
    height: 40vh;
    display: flex;
    border-radius: 5px;
    position: fixed; /* Absolute positioning for fixed layout */
    left: 61vw; /* Center horizontally */
    top: 56vh; /* Adjust vertical position */
    transform: translate(-50%, -50%); /* Adjust to exact center */
    color: black;
    transition: all 0.3s ease-in-out;
    z-index: 101;
}

.box6 span{
    border-radius: 5px;
    position: absolute;
    left: 26%;
    top: 102%;
    color: black;
    font-size: 1.1vw;
}

.box6.maximized span{
    color: black;
    top: 102%;
    left: 33%;
    font-size: 1.2vw;
}

.box6:hover {
    opacity: 0.9;
    cursor: pointer;
}

.box7 {
    background-image: url('DSCF0256.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    width: 13vw; 
    height: 40vh;
    display: flex;
    border-radius: 5px;
    position: fixed; /* Absolute positioning for fixed layout */
    left: 79vw; /* Center horizontally */
    top: 56vh; /* Adjust vertical position */
    transform: translate(-50%, -50%); /* Adjust to exact center */
    color: black;
    transition: all 0.3s ease-in-out;
    z-index: 100;
}

.box7 span{
    border-radius: 5px;
    position: absolute;
    left: 39%;
    top: 102%;
    color: black;
    font-size: 1.1vw;
}

.box7.maximized span{
    color: black;
    top: 102%;
    left: 42%;
    font-size: 1.2vw;
}

.box8 span{
    border-radius: 5px;
    position: absolute;
    left: 46%;
    top: 102%;
    color: black;
    font-size: 1.1vw;
}


.neymarbutton {
    height: 15px;
    width: 15px;
    position: absolute;
    left: 3%; /* Base position */
    top: 2vh;
    background-color: #f23e3e;
    border-radius: 50%;
}

.messibutton {
    height: 15px;
    width: 15px;
    position: absolute;
    left: calc(3% + 25px); /* Adjust spacing, 25px accounts for width + margin */
    top: 2vh;
    background-color: #f5f53e;
    border-radius: 50%;
}

.ronaldobutton {
    height: 15px;
    width: 15px;
    position: absolute;
    left: calc(3% + 47px); /* Adjust accordingly */
    top: 2vh;
    background-color: #73f073;
    border-radius: 50%;
}


.neymarbutton:hover {
    opacity: 0.8;
}

.messibutton:hover {
    opacity: 0.8;
}

.ronaldobutton:hover {
    opacity: 0.8;
}


/* Maximized state for all boxes */
.maximized {
    width: 100%;              /* Full viewport width */
    height: 98vh;             /* Full viewport height */
    left: 0;                   /* Align to the left of the viewport */
    top: 0;                    /* Align to the top of the viewport */
    transform: none;           /* Remove any centering transform */
    border-radius: 0;          /* Remove border radius for full coverage */
    display: flex;
    justify-content: flex-start;   /* Center content inside */
    align-items: flex-start;       /* Center content vertically */
    padding: 15px;
    transition: all 0.3s ease-in-out; /* Smooth transition */
}

/* Optional: Adjust content inside the maximized boxes */
.box5.maximized h1 {
    font-size: 2.5vw; /* Scale heading size */
    margin-top: 5vh;
    margin-left: 2vw;
    display: flex;
}

.box5.maximized p {
    font-size: 1.1vw; /* Scale paragraph size */
    margin-top: 1vh;
    margin-left: 2vw;
    display: flex;
}

.box6.maximized, .box7.maximized {
    position: absolute;
    display: flex;
    width: 22%; 
    height: 39%;
    z-index: 101;
}

.box7.maximized { /*box to the right*/
    position: fixed;
    left: 35vw;               /* Adjust position relative to the screen */
    top: 25vh;
    z-index: 101;
}

.box6.maximized { /*box to the left*/
    position: fixed;
    left: 4vw;               /* Adjust position relative to the screen */
    top: 25vh;
    z-index: 101;
}

.blank-box {
    display: none; /* Hide by default, show as needed */
    position: fixed; /* Stays fixed relative to the viewport */
    width: 100%; /* Full viewport width */
    height: 100vh; /* Full viewport height */
    background-color: white; /* Background color */
    left: 0; /* Align to the left edge */
    top: 0; /* Align to the top edge */
    padding: 20px; /* Padding inside the box */
    box-sizing: border-box; /* Ensure padding is included in width/height */
    overflow: auto; /* Allows scrolling within the element */
    z-index: 1000; /* On top of other elements */
    color: transparent; /* Make text color transparent */
}


.blank-box h1, .blank-box p {
    color: black; /* Ensure text color is visible */
    margin: 10px; /* Adjust margins as needed */
}

.blank-box .line2 {
    width: 100%;
    border-top: 1px solid lightgray;
    margin-top: 10px;
    margin-bottom: 15px;
}

.new-box-container {
    display: flex;          /* Apply flexbox to align items horizontally */
    flex-wrap: wrap;        /* Wrap to the next line if there's not enough space */
    gap: 10px;              /* Add spacing between the boxes */
    justify-content: left; /* Center the boxes horizontally */
}

/* New box styles */
.new-box1 {
    width: 250px;
    height: 250px;
    background-image: url('IMG_1751.jpg'); /* Set the first background image */
    background-size: cover; /* Ensure the image covers the box */
    background-repeat: no-repeat;
    border-radius: 10px; /* Rounded corners */
    margin: 5px; /* Space around the box */
}

.new-box1:hover {
    cursor: pointer;
    opacity: 0.8;
}


.new-box2 {
    width: 250px;
    height: 250px;
    background-image: url('IMG_2130.jpg'); /* Set the second background image */
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 10px;
    margin: 5px;
}

.new-box2:hover {
    cursor: pointer;
    opacity: 0.8;
}

.new-box3 {
    width: 250px;
    height: 250px;
    background-image: url('IMG_2424.jpg'); /* Set the second background image */
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 10px;
    margin: 5px;
}

.new-box3:hover {
    cursor: pointer;
    opacity: 0.8;
}

.new-box4 {
    width: 250px;
    height: 250px;
    background-image: url('IMG_2428.jpg'); /* Set the second background image */
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 10px;
    margin: 5px;
}

.new-box4:hover {
    cursor: pointer;
    opacity: 0.8;
}

.new-box5 {
    width: 250px;
    height: 250px;
    background-image: url('IMG_3495.jpg'); /* Set the second background image */
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 10px;
    margin: 5px;
}

.new-box5:hover {
    cursor: pointer;
    opacity: 0.8;
}

.new-box6 {
    width: 250px;
    height: 250px;
    background-image: url('IMG_4209.jpg'); /* Set the second background image */
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 10px;
    margin: 5px;
}

.new-box6:hover {
    cursor: pointer;
    opacity: 0.8;
}

.new-box7 {
    width: 250px;
    height: 250px;
    background-image: url('DSCF0295.JPEG'); /* Set the second background image */
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 10px;
    margin: 5px;
}


.new-box7:hover {
    cursor: pointer;
    opacity: 0.8;
}

/* Modal styles */
.modal {
    display: none; /* Hide the modal by default */
    position: fixed; /* Stay in place */
    z-index: 1000; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow-y: scroll; /* Enable scroll if needed */
    background-color: rgba(0, 0, 0, 0.8); /* Black with opacity */
}

/* Modal image styles */
#modal-image {
    opacity: 0.9; /* Slightly transparent */
    height: 100%;
    width: 100%;
    display: flex; /* Use flexbox for centering */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    padding: 5% 0; /* Add padding to prevent touching top/bottom */
    object-fit: contain;
}

/* Arrow buttons */
#prev, #next {
    color: white; /* White text */
    padding: 10px;
    cursor: pointer;
}

.modal-content-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

.prev, .next {
    position: absolute;
    top: 50%;
    color: white;
    font-size: 30px;
    font-weight: bold;
    transition: 0.3s;
    user-select: none;
}

.prev:hover,
.next:hover {
    color: #bbb;
    cursor: pointer;
}

.prev {
    left: 30px;
    transform: translateY(-50%);
}

.next {
    right: 30px;
    transform: translateY(-50%);
}

.modal img {
    max-width: 100%;
    max-height: 100%;
    margin: auto;
    display: block;
    object-fit: contain; /* Ensure it scales properly */
}

body.modal-open {
    overflow: hidden;
}


.image-button {
    background-color: transparent; /* Green background */
    border: none; /* Remove borders */
    padding: 5px; /* Add some padding */
    display: inline-flex; /* Align the image inside the button */
    align-items: left; /* Center the image vertically */
    justify-content: center; /* Center the image horizontally */
}

.image-button:hover {
    cursor: pointer; /* Add a pointer on hover */
}

.button-image, .button-image2{
    width: 15px;
    height: 15px;
}

.image-button2 {
    background-color: transparent; /* Green background */
    border: none; /* Remove borders */
    padding: 5px; /* Add some padding */
    display: inline-flex; /* Align the image inside the button */
    align-items: left; /* Center the image vertically */
    justify-content: center; /* Center the image horizontally */
}

.image-button2:hover {
    cursor: pointer; /* Add a pointer on hover */
}


.box7:hover {
    cursor: pointer;
    opacity: 0.8;
}

.blank-box2 {
    display: none; /* Hide initially */
    position: fixed;
    width: 100%; 
    height: 110vh; /* Full viewport height */
    background-color: white; /* Blank box with a white background */
    left: 0; /* Start from the left edge */
    top: 0;  /* Start from the top edge */
    border-radius: 0; /* No border-radius for full screen */
    padding: 20px; /* Remove padding to fully cover the screen */
    transition: all 0.3s ease-in-out;
    z-index: 1000; /* Ensure it's on top of other elements */
    overflow: auto;
}

.blank-box2 h1, .blank-box2 p {
    color: black; /* Ensure text color is visible */
    margin: 10px; /* Adjust margins as needed */
}

.blank-box2 .line3 {
    width: 100%;
    border-top: 1px solid lightgray;
    margin-top: 10px;
    margin-bottom: 15px;
}

.parent-container { /* Ensure this is the container holding the boxes */
    display: flex;
    flex-wrap: wrap; /* Allow boxes to wrap to the next line if necessary */
    gap: 10px;              /* Add spacing between the boxes */
    justify-content: left; /* Center the boxes horizontally */
}

/* New box styles */
.new-boxx22, .new-boxx23, .new-boxx24, .new-boxx25 {
    width: 250px;
    height: 250px;
    background-size: cover; /* Ensure the image covers the box */
    background-repeat: no-repeat;
    border-radius: 10px; /* Rounded corners */
    margin: 5px; /* Space around the box */
}

.new-boxx22 {
    background-image: url('IMG_9636.jpg'); /* Set the first background image */
}

.new-boxx23 {
    background-image: url('arduino\ thing.png'); /* Set the second background image */
}

.new-boxx24 {
    background-image: url('IMG_8712.PNG'); /* Set the third background image */
}

.new-boxx25 {
    background-image: url('DSCF0256.jpg'); /* Set the fourth background image */
}

.new-boxx22:hover,
.new-boxx23:hover,
.new-boxx24:hover,
.new-boxx25:hover {
    cursor: pointer;
    opacity: 0.8;
}

.image-button2 {
    background-color: transparent; /* Green background */
    border: none; /* Remove borders */
    padding: 5px; /* Add some padding */
    display: inline-flex; /* Align the image inside the button */
    align-items: left; /* Center the image vertically */
    justify-content: center; /* Center the image horizontally */
}

.image-button2:hover {
    cursor: pointer; /* Add a pointer on hover */
}

.button-image2{
    width: 15px;
    height: 15px;
}

/* Styles for the box7 modal */
.box7-modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.8);
    transition: opacity 0.3s ease;
}

.box7-modal .modal-content {
    margin: auto;
    display: block;
    max-width: 80%;
    max-height: 80%;
}

.box7-modal .prev, .box7-modal .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    margin-top: -50px;
    color: #f1f1f1;
    font-weight: bold;
    font-size: 24px;
    border-radius: 0 3px 3px 0;
    user-select: none;
}

.no-scroll {
    overflow: hidden;
}

.box7-modal .next {
    right: 0;
    border-radius: 3px 0 0 3px;
}


.arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 24px;
    cursor: pointer;
}

#box7-prev-arrow {
    left: 10px;
}

#box7-next-arrow {
    right: 10px;
}


/* Base styles for box8 */
#box8 {
    display: none;
    position: fixed;
    background-image: url('dude4.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    width: 23vw; 
    height: 44.5vh;
    left: 78vw; 
    top: 47vh;
    transform: translate(-50%, -50%);
    color: black;
    transition: all 0.3s ease-in-out;
    z-index: 101;
}

.box8:hover{
    cursor: pointer;
    opacity: 0.8;
}

/* Hide box8 initially */
.box8.hidden {
    display: none;
}

.blank-box3 {
    display: none; /* Hide by default, show as needed */
    position: fixed; /* Stays fixed relative to the viewport */
    width: 100%; /* Full viewport width */
    height: 100vh; /* Full viewport height */
    background-color: white; /* Background color */
    left: 0; /* Align to the left edge */
    top: 0; /* Align to the top edge */
    padding: 20px; /* Padding inside the box */
    box-sizing: border-box; /* Ensure padding is included in width/height */
    overflow: auto; /* Allows scrolling within the element */
    z-index: 1000; /* On top of other elements */
    color: transparent; /* Make text color transparent */
}


.blank-box3 h1, .blank-box3 p {
    color: black; /* Ensure text color is visible */
    margin: 10px; /* Adjust margins as needed */
}

.blank-box3 .line4 {
    width: 100%;
    border-top: 1px solid lightgray;
    margin-top: 10px;
    margin-bottom: 15px;
}

/* Show box8 when maximized */
.maximized #box8 {
    display: block; 
}

/* Style for zoom boxes */
.zoom-boxes-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px; /* Adjust gap as needed */
    justify-content: left;
}

.zoom-box {
    width: 250px;
    height: 250px;
    background-size: cover; /* Ensure the image covers the box */
    background-repeat: no-repeat;
    border-radius: 10px; /* Rounded corners */
    margin: 5px; /* Space around the box */
}

/* Assign different backgrounds to each zoom box */
.zoom-box1 {
    background-image: url('dude.jpg');
}
.zoom-box2 {
    background-image: url('dude2.jpg');
}
.zoom-box3 {
    background-image: url('dude3.jpg');
}
.zoom-box4 {
    background-image: url('dude4.jpg');
}
.zoom-box5 {
    background-image: url('dude5.jpg');
}
.zoom-box6 {
    background-image: url('dude6.jpg');
}
.zoom-box7 {
    background-image: url('dude7.jpg');
}




.zoom-box1:hover,
.zoom-box2:hover,
.zoom-box3:hover,
.zoom-box4:hover,
.zoom-box5:hover,
.zoom-box6:hover,
.zoom-box7:hover {    
    cursor: pointer;
    opacity: 0.8;
}

.image-button3 {
    background-color: transparent; /* Green background */
    border: none; /* Remove borders */
    padding: 5px; /* Add some padding */
    display: inline-flex; /* Align the image inside the button */
    align-items: left; /* Center the image vertically */
    justify-content: center; /* Center the image horizontally */
}

.image-button3:hover {
    cursor: pointer; /* Add a pointer on hover */
}


.button-image3{
    width: 15px;
    height: 15px;
}


.modal {
    display: none; 
    position: fixed; 
    z-index: 1001; 
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%; 
    overflow: hidden; 
    background-color: rgba(0,0,0,0.9);
}

.modal-content {
    position: relative;
    margin: auto;
    top: 51%;
    transform: translateY(-50%);
    max-width: 50%;
    max-height: 70%;
    text-align: center;
    overflow: hidden;
}

.close {
    position: absolute;
    top: 20px;
    right: 40px;
    color: #fff;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
}

.prev, .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    margin-top: -50px;
    color: white;
    font-weight: bold;
    font-size: 20px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
}

.prev {
    left: 25;
    border-radius: 3px 0 0 3px;
}

.next {
    right: 25;
    border-radius: 0 3px 3px 0;
}


.modal img {
    max-width: 81%;
    max-height: 92%;
    margin: auto;
    display: block;
    object-fit: contain; /* Ensure it scales properly */
}

/* Lebron Modal Styles */
.lebron-modal {
    display: none; /* Hidden by default */
    position: fixed;
    z-index: 1001; /* High z-index to ensure it's on top */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.9); /* Black background with opacity */
}

.lebron-content {
    position: relative;
    margin: auto;
    top: 51%;
    transform: translateY(-50%);
    max-width: 90%;
    max-height: 100%;
    text-align: center;
    overflow: hidden;
}

.lebron-content img {
    width: 35%;
    height: auto;
}


.lebron-close {
    position: absolute;
    top: -10px;
    right: -3px;
    color: #fff;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
}

.lebron-prev, .lebron-next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    margin-top: -50px;
    color: white;
    font-weight: bold;
    font-size: 20px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
}

.lebron-prev{
    left: 0;
    border-radius: 3px 0 0 3px;
}

.lebron-next{
    right: 0;
    border-radius: 0 3px 3px 0;
}


#calculator{
    display:none;
}

.calculator {
    position: fixed;
    width: 25vw;
    height: calc(83vh + 1.5vh); /* Increase height slightly to account for scrollbar */
    background-color: #333;
    border-radius: 1.5vw;
    box-shadow: 0px 0px 1.5vh rgba(0, 0, 0, 0.2);
    overflow: hidden;
    border: 0.2vh solid #aaa; /* Thin greyish border around the entire app */
    display: flex;
    flex-direction: column;
    margin-left: -70vw;
    z-index: 9999;
    top: 5vh;
}

.display {
    background-color: rgba(0, 0, 0, 0.8);
    color: #fff;
    font-size: 3.5vw;
    text-align: right;
    padding: 3vh 2vw;
    box-sizing: border-box;
    border-bottom: 0.3vh solid #444;
    min-height: 12vh;
    height: 18vh;
    white-space: nowrap;
    overflow-x: auto; /* Enable horizontal scrolling */
    overflow-y: hidden;
    display: flex;
    justify-content: flex-end; /* Keep text aligned to the right */
    align-items: center;
    scrollbar-width: thin;
}

/* Optional: Style the scrollbar for WebKit browsers (e.g., Chrome, Safari) */
.display::-webkit-scrollbar {
    height: 0.5vh; /* Adjust scrollbar height */
}

.display::-webkit-scrollbar-thumb {
    background-color: #888; /* Scrollbar thumb color */
    border-radius: 10px;
}

.display::-webkit-scrollbar-thumb:hover {
    background-color: #555;
}

.buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 equal-width columns */
    grid-template-rows: repeat(5, 1fr);    /* 5 equal-height rows */
    gap: 0; /* No gap between the buttons */
}

.btn {
    background-color: #444;
    color: white;
    border: 0.2vh solid #aaa;
    box-sizing: border-box;
    padding: 3vh 1.5vw;
    font-size: 2.5vw;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.btn:hover {
    background-color: #555;
}

.operator {
    background-color: #ff9500;
    color: white;
    grid-column: 4; /* Align all operators to the rightmost column */
}

.operator:hover {
    background-color: #ffb347;
}

/* Position each operator in the correct row */
.btn:nth-child(4) { grid-row: 1; } /* Division operator in the first row */
.btn:nth-child(8) { grid-row: 2; } /* Multiplication operator in the second row */
.btn:nth-child(12) { grid-row: 3; } /* Subtraction operator in the third row */
.btn:nth-child(16) { grid-row: 4; } /* Addition operator in the fourth row */

/* Custom styles for the equal button */
.equal {
    background-color: #ff9500;
    grid-column: 4; /* Align "=" to the rightmost column */
    grid-row: 5;    /* Place "=" in the bottom row */
}

.equal:hover {
    background-color: #ffb347;
}

/* Custom styles for the "0" button */
.zero {
    grid-column: span 2; /* Make "0" span two columns */
    grid-row: 5;         /* Place "0" in the bottom row */
}


.btn:nth-child(4) {
    grid-row: 1;
}

.btn:nth-child(8) {
    grid-row: 2;
}

.btn:nth-child(12) {
    grid-row: 3;
}

.btn:nth-child(16) {
    grid-row: 4;
}

.equal {
    grid-row: 5;
}

.balebutton {
    height: 15px;
    width: 15px;
    position: absolute;
    left: 4%; /* Base position */
    top: 2vh;
    background-color: #f23e3e;
    border-radius: 50%;
}

.balebutton:hover {
    opacity: 0.8;
}


ul {
    font-family: "Reenie Beanie", cursive;
    font-weight: 400;
    font-style: normal;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    list-style: none;
    position: relative;
    padding: 0;
    /* overflow: hidden; */
}

ul li a {
    text-decoration: none;
    color: #000;
    background: #ffc;
    display: block;
    height: 28vh;
    width: 13vw;
    padding: 1em;
    box-shadow: 5px 5px 7px rgba(33, 33, 33, .7);
    transform: rotate(-6deg);
    transition: transform .15s linear;
    border-radius: 5px;
    position: absolute;
    left: -47.5vw;
    top: -50vh;
    overflow: hidden;
    font-size: 1.5vw; /* Adjust the size as needed */
}

ul li:nth-child(even) a {
    transform: rotate(4deg);
    position: relative;
    top: 5px;
    background: #cfc;
}

ul li:nth-child(3n) a {
    transform: rotate(-3deg);
    position: relative;
    top: -5px;
    background: #ccf;
}

ul li:nth-child(5n) a {
    transform: rotate(5deg);
    position: relative;
    top: -10px;
}

ul li a:hover,
ul li a:focus {
    box-shadow: 10px 10px 7px rgba(0, 0, 0, .7);
    transform: scale(1.25);
    position: relative;
    z-index: 5;
}

ul li {
    margin: 1em;
}

.fixed-note a {
    background: #ffe0b2;
    cursor: default;
    pointer-events: none;
}

.fixed-note h2,
.fixed-note p {
    margin: 0;
}


/* Initial .box styles */
.box {
    border-radius: 0px 0px 2vw 2vw;
    width: 61vw;
    height: 57vh;
    border: 2vw solid rgb(0, 0, 0);
    background-color: black;
    overflow-y: scroll;
    color: #73f073;
    font-family: 'Source Code Pro', monospace;
    position: fixed;
    top: 5vw;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1vw;
    transition: all 0.5s ease, opacity 0.3s ease; /* Added opacity transition */
}

/* Minimized state */
.box.minimized {
    height: 3.3vw;
    width: 3.3vw;
    border-width: 0;
    padding: 0;
    overflow: hidden;
    background: transparent;
    transform: translate(-50%, 81vh) scale(0.5);
    opacity: 0; /* Fade out */
    transition: all 0.5s ease-in-out, opacity 0.3s ease-in-out 0.3s; /* Fade out after the size transition */
}

/* Maximized state */
.box.maximized {
    width: 910px;
    height: 400px;
    border: 20px solid rgb(0, 0, 0);
    padding: 0px;
    background-color: black;
    position: relative;
    top: -30px;
    left: 45.3%;
    transform: translateX(-50%);
    opacity: 1;
    transition: all 0.5s ease;
}

/* .box24 styles remain the same */
.box24 {
    width: 4.5vw;
    height: 6.9vh;
    background-image: url('terminal.jpg');
    position: fixed;
    top: 85.5vh; 
    left: 45.5vw; 
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 12px;
    transition: transform 0.3s ease;
}

.box24::before {
    content: "Terminal";
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.3s ease;
    background: #333;
    color: #fff;
    padding: 5px;
    border-radius: 3px;
    white-space: nowrap;
}

.box24:hover {
    opacity: 0.9;
    transform: translateY(-10px) rotateY(10deg);
    cursor: pointer;
}

.box24:hover::before {
    opacity: 1;
}


/* Initial .box2 styles */
.box2 {
    display: flex;
    border-radius: 0.3vw;
    width: 65vw;
    height: 6vh;
    text-align: center;
    justify-content: center;
    align-items: center;
    background-color: white;
    box-sizing: border-box;
    position: fixed;
    top: 3vw;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1.1vw;
    transition: all 0.5s ease, opacity 0.3s ease; /* Add transition for smooth animation */
}

/* Minimized state */
.box2.minimized {
    height: 3.3vw; /* Adjust this based on the size of the target icon */
    width: 3.3vw;
    border-width: 0;
    padding: 0;
    overflow: hidden;
    background: transparent;
    transform: translate(-50%, 81vh) scale(0.5); /* Move and shrink towards the icon */
    opacity: 0; /* Fade out */
    transition: all 0.5s ease-in-out, opacity 0.3s ease-in-out 0.3s; /* Fade out after the size transition */
}

/* Maximized state */
.box2.maximized {
    width: 950px;
    height: 30px;
    border: 20px solid white;
    padding: 0px;
    background-color: white;
    overflow: auto;
    opacity: 1;
    transition: all 0.5s ease;
}

/* Assuming .box2 has its own icon, similar to .box24 */
/* Replace `.box2-icon` with the appropriate icon selector */
.box2-icon {
    width: 3.3vw;
    height: 6.9vh;
    background-image: url('path_to_icon_image.jpg'); /* Replace with actual image */
    position: fixed;
    top: 86vh; 
    left: 41.5vw; 
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 12px;
    transition: transform 0.3s ease;
}

.box2-icon:hover {
    opacity: 0.9;
    transform: translateY(-10px) rotateY(10deg);
    cursor: pointer;

}


/* Closing animation for .box */
.box.closing {
    width: 3.3vw;
    height: 6.9vh;
    border-width: 0;
    padding: 0;
    background: transparent;
    transform: translate(-50%, 81vh) scale(0.5); /* Adjust these to match the position and size of .box24 */
    opacity: 0;
    transition: all 0.5s ease-in-out, opacity 0.3s ease-in-out 0.3s;
}

/* Closing animation for .box2 */
.box2.closing {
    width: 3.3vw;
    height: 6.9vh;
    border-width: 0;
    padding: 0;
    background: transparent;
    transform: translate(-50%, 81vh) scale(0.5); /* Adjust these to match the position and size of .box24 */
    opacity: 0;
    transition: all 0.5s ease-in-out, opacity 0.3s ease-in-out 0.3s;
}



@keyframes openCalculator {
    0% {
        transform: translateX(-70vw);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes closeCalculator {
    0% {
        transform: translateX(0);
        opacity: 1;
    }
    100% {
        transform: translateX(-70vw);
        opacity: 0;
    }
}

.calculator.opening {
    animation: openCalculator 0.5s forwards; /* Play the opening animation */
}

.calculator.closing {
    animation: closeCalculator 0.5s forwards; /* Play the closing animation */
}

.calculator {
    position: fixed;
    width: 25vw;
    height: calc(83vh + 1.5vh); /* Increase height slightly to account for scrollbar */
    background-color: #333;
    border-radius: 1.5vw;
    box-shadow: 0px 0px 1.5vh rgba(0, 0, 0, 0.2);
    overflow: hidden;
    border: 0.2vh solid #aaa; /* Thin greyish border around the entire app */
    display: flex;
    flex-direction: column;
    margin-left: -70vw;
    z-index: 9999;
    top: 5vh;
    opacity: 0; /* Initially hidden */
    transform: translateX(-70vw); /* Initially off-screen */
    transition: opacity 0.5s, transform 0.5s;
}



@keyframes openBox {
    0% {
        opacity: 0;
        transform: scale(0.7) translate(-50%, -50%);
    }
    100% {
        opacity: 1;
        transform: scale(1) translate(-50%, -50%);
    }
}

@keyframes closeBox {
    0% {
        opacity: 1;
        transform: scale(1) translate(-50%, -50%);
    }
    100% {
        opacity: 0;
        transform: scale(0.7) translate(-50%, -50%);
    }
}



.box5 {
    background-color: white;
    width: 32vw; 
    height: 62vh;
    display: flex;
    flex-direction: column; 
    justify-content: flex-start; 
    align-items: flex-start; 
    border-radius: 10px;
    position: fixed; /* Position fixed for layout */
    left: 70vw;
    top: 50vh;
    transform: translate(-50%, -50%);
    color: black;
    padding: 15px;
    transition: all 0.3s ease-in-out;
    z-index: 100;
}

.box5.maximized {
    position: fixed; /* Ensure it stays fixed when maximized */
    top: 50vh;
    left: 109vh;
    width: 124%;
    height: 102%;
    margin: 0;
    padding: 0;
    z-index: 100;
}


.box6.maximized, .box7.maximized {
    position: absolute;
    display: flex;
    width: 22%; 
    height: 39%;
    z-index: 101;
}

.box7.maximized { /*box to the right*/
    position: fixed;
    left: 47vw;               /* Adjust position relative to the screen */
    top: 47vh;
    z-index: 101;
}

.box6.maximized { /*box to the left*/
    position: fixed;
    left: 15vw;               /* Adjust position relative to the screen */
    top: 47vh;
    z-index: 101;
}

.box5.opening {
    animation: openBox 0.5s ease-in-out forwards;
}

.box6, .box7, #box8 {
    animation: openBox 0.5s ease-in-out forwards;
}

.box5.closing,
.box6.closing,
.box7.closing,
#box8.closing {
    animation: closeBox 0.4s ease-in-out forwards;
}


/* CSS for sticky note animations */
@keyframes openNotes {
    from {
        opacity: 0;
        transform: scale(0.5);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes closeNotes {
    from {
        opacity: 1;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(0.5);
    }
}

#noteList {
    transition: opacity 0.5s, transform 0.5s;
    opacity: 0;
    transform: scale(0.5);
}

#noteList.open {
    animation: openNotes 0.5s forwards;
}

#noteList.close {
    animation: closeNotes 0.5s forwards;
}



/* Add this to your styles.css file */

/* Basic styling */
#view-count {
    font-size: 18px;           /* Adjust the font size */
    color: #333;               /* Set the text color */
    background-color: #f4f4f4; /* Set the background color */
    padding: 10px;             /* Add some padding */
    border: 1px solid #ddd;    /* Add a border */
    border-radius: 5px;        /* Round the corners */
    display: inline-block;     /* Ensure it fits the content size */
    margin: 20px 0;            /* Add some space around it */
  }
  
  /* Example of a more customized look */
  #view-count {
    font-size: 20px;           /* Larger font size */
    color: #007bff;            /* Blue color */
    background-color: #e9ecef; /* Light gray background */
    padding: 15px;             /* More padding */
    border: 2px solid #007bff; /* Blue border */
    border-radius: 8px;        /* More rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Add shadow */
    text-align: center;        /* Center the text */
  }
  


.new-box8 {
  width: 250px;
  height: 250px;
  background-image: url('valley.jpg'); /* Replace with your actual image */
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: 10px;
  margin: 5px;
}
.new-box8:hover {
  cursor: pointer;
  opacity: 0.8;
}


.new-box9 {
  width: 250px;
  height: 250px;
  background-image: url('mountain.jpg'); /* Replace with your actual image */
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: 10px;
  margin: 5px;
}
.new-box9:hover {
  cursor: pointer;
  opacity: 0.8;
}

.new-box10 {
  width: 250px;
  height: 250px;
  background-image: url('plane.jpg'); /* Replace with your actual image */
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: 10px;
  margin: 5px;
}
.new-box10:hover {
  cursor: pointer;
  opacity: 0.8;
}

.new-box11 {
  width: 250px;
  height: 250px;
  background-image: url('image.jpg'); /* Replace with your actual image */
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: 10px;
  margin: 5px;
}
.new-box11:hover {
  cursor: pointer;
  opacity: 0.8;
}

    
.box28 {
    width: 10.4vw;
    height: 10.8vh;
    background-image: url('nrme.png');
    position: fixed;
    top: 83.4vh; 
    left: 29.5vw; 
    z-index: 1;
    background-size: contain;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.3s ease; /* Smooth transition for the transform */
}

.box28::before {
    content: "Near Me";
    position: absolute;
    bottom: 85%; /* Position above the element */
    left: 30%;
    transform: translateX(-50%); /* Center the text */
    opacity: 0; /* Initially hidden */
    transition: opacity 0.3s ease; /* Smooth transition for opacity */
    background: #333; /* Background color for visibility */
    color: #fff; /* Text color */
    padding: 5px;
    border-radius: 3px; /* Rounded corners for the text box */
    white-space: nowrap; /* Prevent text wrapping */
}

.box28:hover {
    opacity: 0.9;
    transform: translateY(-10px) rotateY(10deg); /* Lifts and tilts the icon */
    cursor: pointer;
}

.box28:hover::before {
    opacity: 1; /* Show text on hover */
}



.box29 {
    width: 8vw;
    height: 8vh;
    background-image: url('icon1.png');
    position: fixed;
    top: 84.8vh; 
    left: 25.6vw; 
    z-index: 0;
    background-size: contain;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.3s ease; /* Smooth transition for the transform */
}

.box29::before {
    content: "RezPlan";
    position: absolute;
    bottom: 95%; /* Position above the element */
    left: 30%;
    transform: translateX(-50%); /* Center the text */
    opacity: 0; /* Initially hidden */
    transition: opacity 0.3s ease; /* Smooth transition for opacity */
    background: #333; /* Background color for visibility */
    color: #fff; /* Text color */
    padding: 5px;
    border-radius: 3px; /* Rounded corners for the text box */
    white-space: nowrap; /* Prevent text wrapping */
}

.box29:hover {
    opacity: 0.9;
    transform: translateY(-10px) rotateY(10deg); /* Lifts and tilts the icon */
    cursor: pointer;
}

.box29:hover::before {
    opacity: 1; /* Show text on hover */
}


.icon-divider {
    position: fixed;
    top: 74vh; /* Align vertically with the icons */
    left: 22vw; /* Place between the two groups */
    width: 130px; /* Adjust size as needed */
    height: auto;
    z-index: 1;
    opacity: 0.7;
    transition: opacity 0.3s ease;
    transform: rotate(30deg); /* Rotate 20 degrees clockwise */
}

.label-text {
  position: absolute;
  font-family: "Reenie Beanie", cursive;
  font-size: 2vw;
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  left: -34.3vw;
  top: 19vh;
}


.icon-divider2 {
    position: fixed;
    top: 74vh; /* Align vertically with the icons */
    left: 62vw; /* Place between the two groups */
    width: 130px; /* Adjust size as needed */
    height: auto;
    z-index: 1;
    opacity: 0.7;
    transition: opacity 0.3s ease;
    transform: rotate(-30deg); /* Rotate 20 degrees clockwise */
}

.label-text2 {
  position: absolute;
  font-family: "Reenie Beanie", cursive;
  font-size: 2vw;
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  left: 19.3vw;
  top: 19vh;
}

.icon-divider3 {
    position: fixed;
    top: 75vh; /* Align vertically with the icons */
    left: 42vw; /* Place between the two groups */
    width: 130px; /* Adjust size as needed */
    height: auto;
    z-index: 1;
    opacity: 0.7;
    transition: opacity 0.3s ease;
    transform: rotate(0deg); /* Rotate 20 degrees clockwise */
}

.label-text3 {
  position: absolute;
  font-family: "Reenie Beanie", cursive;
  font-size: 2vw;
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  left: -6vw;
  top: 19vh;
}