@charset "utf-8";
/* CSS Document */

        /* General body styling */
		body{
            margin: 0;
            padding: 0;
            font-family: "MS Sans Serif", "Tahoma", sans-serif;
			overflow-x: hidden;
        }

		body, a, button{
			cursor: url('Links/Cursor_Fang.png'), pointer;
		}

.preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: black; /* adjust the background color to your liking */
  z-index: 1000; /* ensure the preloader is on top of other elements */
  display: flex;
  justify-content: center;
  align-items: center;
}


.loader {
  border: 16px solid #f3f3f3; /* adjust the border color to your liking */
  border-radius: 50%;
  border-top: 16px solid #3498db; /* adjust the border-top color to your liking */
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}


@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}


@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

        .bodystartpage {
			height: 100%;
			overflow: hidden;
        }

        /* Header styling */
        header {
            background: #c0c0c0; /* Windows XP grey */
            border-bottom: 2px solid #232429;
            color: #000080; /* Dark blue text color */
            text-align: center;
            padding: 5px 6px;
            z-index: 2000; /* Ensure it stays above other content */
			height: 130px;

        }

        .header-title {
            background: #033399; /* XP blue */
            color: white;
            padding: 5px 0;
            font-size: 14px; /* XP font size */
            font-weight: 300;
            border-bottom: 1px solid #000080;
        }
		
		#typewriter-text {
			border-right: 7px solid white; /* The blinking cursor effect */
			white-space: nowrap; /* Prevent text wrapping */
			overflow: hidden; /* Hide the overflow as the text is typed */
			display: inline-block;
		}

		@keyframes typewriter {
			from { width: 0; }
			to { width: textwidth; } /* The width will animate from 0 to 100% */
		}

		@keyframes blinkCursor {
			50% { border-color: transparent; } /* Make the cursor blink */
		}

		/* The typewriter animation */
		.typing {
			animation: typewriter 1.8s steps(30,end) forwards, blinkCursor 0.65s step-end infinite;
		}
		
		.header-close-button {
			position:absolute;
			right: 5px;
			top: 8px;/* Adjust for spacing */
			cursor: pointer;
		}
		
		/* close button styling (NOT close button image styling) */
		#close-button {
   		background-color: transparent;
    	border: none;
    	cursor: pointer;
		}
		
		
		.header-close-button img {
			width: 20px; /* Adjust to the size of your icon */
			height: 20px;
		}
		
		.header-close-button img:hover {
    	box-shadow: 2px 2px 0px rgba(0, 0, 0, 1); /* Shadow effect on hover */
		}

        .logo {
            margin-top: 5px;
        }

        .logo img {
            height: 96px; /* Adjust as needed */
			
        }

        .logo img:hover {
            animation: repeatAnimation 1.3s infinite; /* Apply animation on hover */
        }

        /* Keyframes to control GIF animation */
        @keyframes repeatAnimation {
            0% {
                transform: scale(1);
            }
			50%{
				transform: scale(1.10);
			}
            100% {
                transform: scale(1); /* Optional: Slight scale effect */
            }

        }
		
		/*whole nav */
		.Nav-all {
			position: absolute;
    		margin-top: 25px;
			left: 1%
		}
		
		.nav-button{
			background-color: transparent;
    		border: none;
    		cursor: pointer;
			width: 104px;
			height: 42px;
		}
		/*menu image */
		#nav-image:hover{
			box-shadow: 2px 2px 0px rgba(0, 0, 0, 1); /* Shadow effect on hover */
		}
		
		/*hamburger icon */
		.nav-icon {
			margin-top: 7px;
			margin-left: 14px;
			width: 20px;
			position:absolute;
			}

		.nav-icon:after, 
		.nav-icon:before,
		.nav-icon div {
			background-color: #323232;
			border-radius: 0px;
			content: '';
			display: block;
			height: 3px;
			margin: 5px 0;
			transition: all .2s ease-in-out;
			}

		.nav-icon.animate:before {
			transform: translateY(8.5px) rotate(135deg);
		}

		.nav-icon.animate:after {
			transform: translateY(-8.5px) rotate(-135deg);
		}

		.nav-icon.animate div {
			transform: scale(0);
		}
		
		
/* Styling for the navigation menu */
		.nav-open {
			position:fixed;
			top: 141px;
			left: -400px; /* Start hidden off-screen */
			width: 350px; /* Width of the nav menu */
			height: 100%; /* Full height */
			background: #c0c0c0; /* Background color */
			border-right: 1px solid #656565; /* Border color */
			transition: left 0.15s ease; /* Smooth transition */
			padding: 20px; /* Padding inside the menu */
			z-index: 999; /* Ensure it's on top */
		}

/* Show the navigation menu */
		.nav-open.show {
			left: 0;
		}
		
		/* Class to prevent scrolling */
		.no-scroll {
			overflow: hidden;
}
		.nav-banner {
			float: left;
			
		}
		
		.nav-open .a-styling a{							
			display: flex;
            flex-wrap: wrap;
            padding: 15px;
			margin-top: 2px;
			border-bottom: 1px solid black;
			box-shadow: 0px 1px 0px white;
			font-family:"source-code-pro",monospace;
			font-size: 15pt;
			color: #323232;
			text-decoration: none;
			letter-spacing: 1.5px;
			background: #c0c0c0;
		}			
		
		.nav-open-div{							
			margin-left: 60px;
			max-width: 300px
		}		
		
		.nav-open a:hover{							
			box-shadow: 2px 2px 0px rgba(0, 0, 0, 1); /* Shadow effect on hover */
          	background-color: pink;
			font-weight: 1000
		}
		

		.nav-open a img{			
			padding-right: 15px;
			margin-top: -1px;
		}
		



		#desktop {
			background: url('Links/xp-background.jpg') no-repeat center center fixed;
			background-size: cover;
			height: 100vh; /* Ensure the section covers at least the viewport height */
			padding-bottom: 0px; /* Space for the fixed taskbar */
			display: flex;
			flex-direction: column;
			background-attachment: scroll;
			margin-bottom: -135px
		}

		#xpstartbutton {
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-color: #0078d7;
			color: white; /* text color of time... */
			margin-top: 100vh; /* Pushes the element down by 100% of the viewport height */
			height: 30px;
			padding: 4px 9px;
			position: absolute; 
			bottom: 0;
			left: 0;
			width: 100%;
			box-sizing: border-box;
			font-size: 12px; 
			z-index: 997; 
		}

        /* Start button styling */
        .start-button {
            display: flex;
            align-items: center;
            background-color: #0078d7;
            padding: 0;
            height: 100%;
            border: 0;
            border-radius: 0;
            cursor: pointer;
        }

        /* Start button image */
        .start-button img {
            height: 34px;
            width: 98px;
            margin-left: -9px;
        }


		
        /* Time display styling */
        .time {
            font-size: 12px; /* XP taskbar font size */
        }

        /* Icons styling */
        #desktop-icons {
            display: flex;
            flex-wrap: wrap;
            padding: 20px;
        }

        .icon {
            width: 80px;
            text-align: center;
            margin: 20px;
            cursor: pointer;
        }

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

        .icon p {
            margin-top: 5px;
            font-size: 12px; /* XP icon text font size */
            color: white;
        }
		

        /* Start menu styling */
        .menu {
            display: none;
            position: absolute; /* Fixed position */
            bottom: 33px; /* Adjusted to be above the taskbar */
            left: 0px;
            background: #ffffff; /* Light grey background for XP feel */
            border: 0.5px solid #000080; /* Dark blue border */
            border-radius: 5px; /* Rounded corners */
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Shadow for depth */
            padding: 10px;
            width: 200px; /* Adjust width as needed */
            font-size: 12px; /* XP menu font size */
            z-index: 997; /* Ensure it stays above other content */
        }

        /* Menu list styling */
        .menu ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }

        .menu ul li {
            margin: 0;
            padding: 5px;
            border: 1px solid #000080; /* Border around menu items */
            border-radius: 3px; /* Slightly rounded corners */
            background-color: #f0f0f0; /* Light background for items */
            cursor: pointer;
            transition: background-color 0.2s, color 0.2s; /* Smooth background and text color change */
            font-size: 12px; /* XP menu item font size */
            text-align: center; /* Center text inside menu items */
        }

        /* Specific styles for menu items */
        .menu ul li:hover {
            background-color: #d0d0d0; /* Slightly darker on hover */
            color: #000080; /* Dark blue text color on hover */
        }

        /* Link styling inside menu items */
        .menu ul li a {
            color: #000080;
            text-decoration: none;
            display: block;
            padding: 5px;
        }

        /* Link hover styling */
        .menu ul li a:hover {
            text-decoration: underline;
        }

		
		.CV {
			height: 150px;
			margin-top: -152px;
			width: 100%;
			background-color:#c0c0c0;
		}
		
		.footer-message{
			align-content: center;
			height: 50px;
			background-color:#D9D9D9;
			text-align: center;
			font-size: 12.8px;
			font-style: normal;
			font-family: "source-code-pro",monospace;
			border-top: 1px solid #FEFEFE;
            border-radius: 2px;
            box-shadow: 3 4px 6px blue;
		}
		
        /* _______________________________________________________________Responsive Design */
	@media (max-width: 768px) {

			
			@keyframes typewriter{
			from { width: 0; }
			to { width: 60%; } /* The width will animate from 0 to 100% */
			}

            #desktop-icons {
                justify-content: left;
                padding: 10px;
            }

            .icon {
                width: 60px;
                margin: 10px;
            }

            .icon img {
                width: 40px;
                height: 40px;
            }

            .icon p {
                font-size: 10px;
            }
			


            #xpstartbutton {
                font-size: 10px;
                padding: 4px 5px;
            }

            .start-button img {
                width: 16px;
                
            }
        
		}
		
        /* _______________________________________________________________Responsive Design */

			@media (max-width: 480px) {
				header {
					padding: 5px 0;
				}

				.header-title {

					padding: 6px 0;
					font-size: 11px; /* XP font size */
					font-weight: 400;
				}


				#header {
					height: 25px;
					font-size: 10px;
				}

				.nav-icon{
					margin-top: 3.5px;
					margin-left: 15px;
					width: 16px;
				}

				#nav-image{
					width: 85px;
				}

				.nav-open{		
				left: -555px;
				margin-left:0 ;
				width: 100vw;
				}		

				.start-button img {
					height: 30px;
					width: 90px;
				}

				.time {
					font-size: 10px;
				}


				.menu {
					width: 150px;
					font-size: 10px;
				}

			}
		
/*____________________________________________________________________________________________________CV Page */

.cvpage{
	background-color:black;
	margin-top:-20px;
}

.cvpage p {
	
	margin-left: 4vw;
	font-size: 15pt;
	font-family: "source-code-pro",monospace;
	color: white;
    padding: 15px;
	border-bottom: 1px solid black;
	box-shadow: 0px 1px 0px white;
	letter-spacing: 1.5px;
	}		

.cvpage p img{
	padding-right: 10px;
	
}

.avatar {
    display: flex;
    flex-direction: row;
    justify-content:flex-end;
	justify-content:center;
    align-items: center;
    background-color: black;
    margin-right: 3vw;
}

.avatar div {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.selectplayer {
    margin-bottom: 0px; /* adjust the margin as needed */
	
}

.characterturning {
	background-color: black;
	float:right;
	min-height: 400px;
	max-height: 1500px;
	margin-top: 50px;
	}

@media (max-width: 480px) {
	.avatar {
    display: flex;
    flex-direction: row;
    justify-content:center;
    align-items: center;
	
	}
	.selectplayer{
		overflow:visible
		
	}