@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&family=Silkscreen&display=swap');
		body {
			font-family: "IBM Plex Mono", monospace;
			background: #E9E3C6;
			background-image: url('Images/Website/stars4.gif');
		}

		.wrapper {
			border: 3px solid #767fab;
			width: 615px;
			height: 385px;
			box-shadow: 3px 3px 0 #b9b7c9;
			background-image: url('Images/Website/frame.png');
			border-radius: 5px;
			margin: auto;
			margin-top: calc(50vh - 190px);
		}

		.wrapper::after {
			content: " ";
			display: block;
			border: 3px solid #767fab;
			border-top: 0;
			width: 615px;
			height: 9px;
			box-shadow: 3px 3px 0 rgba(185, 183, 201, 0.5);
			position: relative;
			left: -3px;
			top: -3px;
			border-radius: 0 0 5px 5px;
		}

		.content {
			background: #767fab;
			border-radius: 5px;
		}

		.menu a {
			font-family: "Silkscreen", sans-serif;
			border: 3px solid #767fab;
			border-bottom-color: #767fab;
			color: #380d41;
			text-decoration: none;
			display: inline-block;
			height: 41px;
			font-size: 13px;
			width: 128px;
			margin-left: -3px;
			border-radius: 3px;
			line-height: 33px;
			position: relative;
		}
		

		.menu a:hover {
			position: relative;
			top: 4px;
		}

		.menu a:hover::before {
			background-color: rgba(185, 183, 201, 0.5);
			display: block;
			content: " " ;
			height: 6px;
			width: calc(100% + 6px);
			position: absolute;
			top: -7px;
			left: -3px;
		}

		.menu a::after {
			background-color: #5a5687;
			display: block;
			content: " " ;
			height: 3px;
			width: 90px;
			margin: auto;
		}

.screen {
    width: 512px;
    height: 294px;
    background: url('Images/Website/rainbowprism.gif') center/cover no-repeat; /* Replace 'your-gif.gif' with the actual file path */
    border: 3px solid #767fab;
    margin: auto;
    margin-top: 20px;
    position: relative;
    border-radius: 5px;

    /* Centering the text */
    display: flex;
    justify-content: center;  /* Centers horizontally */
    align-items: center;  /* Centers vertically */
    text-align: center;
}

.screen-text {
    font-family: "Silkscreen", sans-serif; /* Or any font you prefer */
    font-size: 100px; /* Adjust as needed */
    color: #ffffff; /* Light color for better contrast */
    background: rgba(225, 105, 180, 0.5); /* Optional: Adds a slight background to improve readability */
    padding: 10px;
    border-radius: 5px;
}



		.menu {
			margin: auto;
			text-align: center;
			margin-top: 18px;
		}

/* Dropdown Menu Styles */
.dropdown {
    display: inline-block;
    position: relative;
}

/* Initially hidden dropdown */
.dropdown-content {
    opacity: 0; /* Initially hidden */
    visibility: hidden; /* Initially hidden */
    position: absolute;
    background-image: url('Images/Website/frame.png');
    border: 2px solid #b9b7c9;
    border-radius: 5px;
    width: 120px;
    box-shadow: 3px 3px 0 #b9b7c9;
    z-index: 100;
    top: 100%; /* Position below the link */
    transition: opacity 0.3s, visibility 0.3s; /* Smooth transition */
}

/* Show dropdown on hover */
.dropdown:hover .dropdown-content {
    opacity: 1; /* Fade in */
    visibility: visible; /* Make it visible */
}

/* Keeps the dropdown open when hovering over the dropdown-content itself */
.dropdown:hover .dropdown-content:hover {
    opacity: 1; /* Stay visible */
    visibility: visible;
}

.dropdown-content a {
    display: block;
    color: #380d41;
    padding: 8px;
    text-decoration: none;
}

/* Hover effect on the links inside the dropdown */
.dropdown-content a:hover {
    background: rgba(225, 105, 180, 0.5);
    color: #380D41;
}