/* Prevent touch and selection interactions */
* {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

/* General body styling */
body {
    font-family: 'Tangerine', serif;    
    margin: 0;
    padding: 0;
    background-color: #67726E;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative; /* Ensure positioning context for cursor */
}

/* Header styling */
header {
    margin-bottom: 10px;
    padding-top: 10px;
}

/* Navigation styling */
nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    max-width: 80%;
    position: relative; /* Ensure positioning context for icons */
}

/* Fade-in animation for elements */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Logo styling */
#logo {
    width: 250px;
    height: auto;
    opacity: 0;
    animation: fadeIn 0.3s ease-in forwards;
}

/* Navigation icons styling */
.nav-icon {
    height: auto;
    transition: all 0.1s ease, opacity 0.1s ease;
    opacity: 0;
    animation: fadeIn 0.5s ease-in forwards;
}

/* Hover effect on navigation icons */
.nav-icon:hover {
    filter: brightness(0) saturate(80%) invert(70%) sepia(20%) saturate(2000%) hue-rotate(120deg) brightness(80%) contrast(130%);
    transform: scale(1.1);
    opacity: 0.9;
}

/* Active effect on navigation icons */
.nav-icon:active {
    opacity: 0.5;
}

/* Individual asset sizes */
#asset1 { width: 130px; }
#asset2 { width: 140px; }
#asset3 { width: 150px; }
#asset4 { width: 150px; }
#asset5 { width: 130px; }
#asset6 { width: 140px; }
#asset7 { width: 130px; }

/* Footer styling */
footer {
    background-color: #67726E; /* Match page background color */
    width: 150px;
    height: 10px; /* Set the height of the footer */
    margin-top: 100px; /* Pushes the footer to the bottom */
    padding-top: 0px;
    margin-bottom: 50px;
}

/* VR Cursor styling */
#cursor {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 15px;
    height: 15px;
    background-color: red;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
    pointer-events: none; /* Prevent cursor from interacting with elements */
}