@font-face {
    font-family: 'Cookiemonster'; /* Give your custom font a name */
    src: url('Cookiemonster-gv11.ttf') format('truetype'); /* Specify the font file path and format */
}
/* Start https://www.cursors-4u.com */ * {cursor: url(https://cur.cursors-4u.net/others/oth-8/oth758.cur), auto !important;} /* End https://www.cursors-4u.com */
body{
    background-color: black
}
/* Style the navigation bar with a border */
/* Style the navigation bar with a border */
nav {
    background-color: ;
    color: #fff;
     width: 200%;
    border: 20px solid hotpink; /* Green border with a thickness of 40px */
    padding: 1px; /* Add some padding to create space between the border and the content */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Add a text shadow to the navigation bar text */
}


/* Style the navigation list */
nav ul {
    list-style-type: none;
    margin: 0;
    display: flex;
}

/* Style the navigation list items */
nav ul li {
    margin-right: 80px;
}

/* Style the navigation button container */
.nav-button {
    text-align: center;
}

/* Style the navigation links as images */
.nav-button img {
    display: block;
    width: 300px; /* Fixed width for the images */
    height: 120px; /* Fixed height for the images */
    margin-bottom: 5px; /* Spacing between image and text */
    transition: transform 0.3s, opacity 0.5s; /* Add transitions for transform and opacity */
}

/* Style the text below each button with the custom font */
.nav-button span {
    display: block;
    font-size: 44px;
    color: hotpink;
    font-family: 'Cookiemonster', sans-serif; /* Apply the custom font */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Add a text shadow to the text */
}

/* Change the link image size and opacity on hover */
.nav-button:hover img {
    transform: scale(1.5); /* Increase the size by 0.5x on hover */
    opacity: 0.7;
}

/* Media query for smaller screens */
@media (max-width: 768px) {
    nav ul }
        text-box {
    position: absolute;
    top:20%;
        right:0%
    width: 800px;
    padding: 20px;
    background-color: #222;
    border: 2px solid #444;
    box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.2);
}

.text {
      font-family: 'YourCustomFont', Arial Rounded MT, sans-serif;
    font-size: 2em;
    font-weight: 700;
    color: #FFEB3B;
    text-transform: uppercase;
   // text-shadow: 1px 1px 1px #5ff6ff, 1px 2px 1px #008aff, 1px 3px 1px #008aff, -1px 3px 2px #008aff, -1px -1px 1px #0064b8, 2px -1px 2px #0064b8, 1px 7px 4px rgba(0, 9, 35, 0.4), 1px 9px 10px rgba(0, 64, 255, 0.2), 1px 9px 35px rgba(0, 64, 255, 0.2), 1px 9px 60px rgba(0, 64, 255, 0.4);
}

.text2 {
      font-family:  sans-serif;
    font-size: 2em;
    font-weight: 700;
    color: #F5F0F2;
    
   text-shadow: 1px 1px 1px #DFF0F2, 1px 2px 1px #008aff, 1px 3px 1px #008aff, -1px 3px 2px #008aff, -1px -1px 1px #0064b8, 2px -1px 2px #0064b8, 1px 7px 4px rgba(0, 9, 35, 0.4), 1px 9px 10px rgba(0, 64, 255, 0.2), 1px 9px 35px rgba(0, 64, 255, 0.2), 1px 9px 60px rgba(0, 64, 255, 0.4);
}
.text3 {
      font-family:  'YourCustomFont', Arial Rounded MT, sans-serif;
    font-size: 2em;
    font-weight: 700;
    color: #F35EEA;
    
   
}
.text4 {
      font-family:   Arial Rounded MT, sans-serif;
    font-size: 2em;
    font-weight: 700;
    color: #91E991;
     text-shadow: 1px 1px 1px #E2EDEE, 1px 2px 1px #E0E6EB, 1px 3px 1px #008aff, -1px 3px 2px #008aff
   
}