.gradient {
    /* fallback for older browsers */
    background-color: #161616; /* Grey color */
    /* modern browsers */
    /*background: linear-gradient(to bottom right, #161616, #111111);*/
    /* Ensure the gradient covers the entire body */
    height: 100vh;
    margin: 0;
    padding: 0;
}

/* For WebKit-based browsers (Chrome, Safari, etc.) */
::-webkit-scrollbar {
    width: 10px; /* Set the width of the scrollbar */
}
  
::-webkit-scrollbar-track {
    background: #333; /* Set the background color of the track */
}
  
::-webkit-scrollbar-thumb {
    background: #666; /* Set the color of the scrollbar thumb */
    border-radius: 5px; /* Add some border radius for a rounded thumb */
}
  
.centered-container {
    /* Center horizontally and vertically */
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* Set the container height to full viewport height */
    height: 100vh;

    /* Make text white */
    color: white;
}

.white-text {
    color: white; /* Make text white */
    text-align: center; /* Center text horizontally */
    font-family: Arial, sans-serif; /* Use Arial font */
    font-size: 24px; /* Adjust font size */
}


.grey-text {
    color: rgb(158, 158, 158); /* Make text white */
    text-align: center; /* Center text horizontally */
    font-family: Arial, sans-serif; /* Use Arial font */
    font-size: 14px; /* Adjust font size */
}

.red-text {
    color: red; /* Make text red */
}

body {
    font-family: Arial, sans-serif; /* Apply Arial to the body */
}

.underline {
    text-decoration: underline; /* Underline text */
}

.link {
    text-decoration: none; /* Remove underline from links */
    color: rgb(95, 95, 95); /* Change link color */
}

/* Apply Arial to specific elements */
h1, h2, h3 {
    font-family: Arial, sans-serif;
}

/* Reset default margin and padding */
body, header, nav, ul, li {
    margin: 0;
    padding: 0;
}

/* Style the header */
header {
    padding: 10px 20px; /* Add some padding */
    position: relative; /* Relative positioning for absolute children */
    display: grid;
    grid-template-columns: 1fr auto 1fr; /* Use flexbox for layout */
    align-items: center; /* Center items vertically */
    justify-content: space-between; /* Space elements evenly */
    font-weight: bold; /* Make the font bold */
}

/* Style the logo */
.logo {
    width: 30px; /* Set the width of the logo */
    height: auto; /* Automatically adjust the height to maintain aspect ratio */
    filter: brightness(0) invert(1); /* Change image color to white */
}

#home-link {
    display: flex;
    justify-content: flex-end;
}

/* Style the navigation */
nav ul {
    list-style-type: none; /* Remove bullet points */
}

nav ul li {
    display: inline-block; /* Display list items horizontally */
}

nav ul li a {
    display: block; /* Make the links fill the list item */
    padding: 10px 20px; /* Add some padding */
    text-decoration: none; /* Remove underline */
    color: white; /* White text color */
}

nav ul li a:hover {
    color: #555; /* Darken background color on hover */
}

/* Style the Discord button */
.discord-button {
    width: 30px; /* Set the width of the logo */
    height: auto; /* Automatically adjust the height to maintain aspect ratio */
    filter: brightness(0) invert(1); /* Change image color to white */
}

#discord-link {
    display: flex;
    justify-content: flex-end;
  }

.intro-up {
    animation: fade-up 0.5s;
}

.intro-down {
    animation: fade-down 0.5s;
}

@keyframes fade-up {
    0% {
        opacity: 0;
        transform: translateY(+30px) scale(0.99);
    }

    100% {
        opacity: 1;
        transform: translateY(0px) scale(1);
    }
}

@keyframes fade-down {
    0% {
        opacity: 0;
        transform: translateY(-30px) scale(0.99);
    }

    100% {
        opacity: 1;
        transform: translateY(0px) scale(1);
    }
}