/* Base styles for the entire page */
body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    font-family: Arial, sans-serif;
    background-color: #1d1d1d;
    overflow: hidden;  /* Prevents scrollbar due to moving emoji */
}

/* Container for the skier */
.skier-container {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;  /* Ensure skier doesn't interfere with other elements */
}

/* Moving Skier Emoji */
.emoji-skier {
    position: absolute;
    font-size: 2.5em;
}

/* Centered container */
.container {
    text-align: center;
    z-index: 1;  /* Ensure it stays above the skier */
}

/* Large text for name */
h1 {
    font-size: 3em;
    margin: 0 0 20px 0;
    color: #ececec;
}

/* Styling for links */
.links {
    display: flex;  /* Display links in a row */
    justify-content: center;
    align-items: center;
    color: #ececec;
}

.links a {
    font-size: 1.2em;
    color: #9958da9d;
    text-decoration: none;
    margin: 0 10px;  /* Adds space between each link */
}

.emojis {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;  /* Space between emojis and the name */
    font-size: 2em;  /* Size of the emojis */
    gap: 40px;  /* Add space around the logo */
}

.logo {
    width: 50px;  /* Set the width of the logo */
    height: 50px;  /* Keep the aspect ratio of the image */
    border: none;  /* Remove any default borders */
    display: inline-block;  /* Ensures the logo aligns properly with text */
    vertical-align: middle;  /* Aligns the logo vertically in line with text */
    filter: grayscale(85%);  /* Apply grayscale filter */
    transition: filter 0.3s ease-in-out;
}

.logo:hover {
    filter: grayscale(0%);  /* Remove grayscale to show original colors */
}