style.css

body {
    font-family: 'Tomorrow', sans-serif; /* Use Tomorrow font */
    margin: 0; /* Reset margin */
    padding: 0; /* Reset margin and padding */
    display: flex; /* Use flexbox for centering */
    justify-content: center; /* Center content horizontally */
    align-items: center; /* Center content vertically and horizontally */
    height: 100vh;  /* Full viewport height */
    background-image: radial-gradient( circle 490.7px at 3.1% 21.8%,  rgba(82,6,135,1) 0%, rgba(22,1,34,1) 100.3% ); /* Gradient background */
    background-size: 200% 200%; /* Gradient background */
    animation: gradient 5s ease infinite; /* Animation for gradient background */
}

.logo {
    width: 150px; /* Set the size of the logo */
    height: 150px; /* Set the size of the logo */
    background-image: url('images/socials/pfp.png'); /* Profile Picture */
    background-repeat: no-repeat; /* Prevent background from repeating */
    background-size: cover; /* Cover the entire element */
    background-position: center; /* Center the background image */
    border-radius: 50%; /* Make it a circle */
    margin: 0 auto; /* Center horizontally */
    margin-bottom: 20px; /* Add some space below the logo */
    /*box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* Add a subtle shadow for depth */
}
/* Container */
.container {
    text-align: center; /* Center text inside the container */
    border: 1px solid rgba(255, 255, 255, 0.3); /* Semi-transparent border */
    background: rgba(255, 255, 255, 0.2); /* Semi-transparent background */
    border-radius: 10px; /* Add rounded corners */
    box-shadow: 124px 30px rgba(0, 0, 0, 0.8); /* Add a subtle shadow for depth */
    backdrop-filter: blur(9px); /* For modern browsers */
    -webkit-backdrop-filter: blur(5px); /* For Safari */
    border: 1 solid rgba(255, 255, 255, 0.315);
    padding: 20px; /* Add padding for better spacing */
    box-shadow: 6px 3px 9px rgba(0, 0, 0, 0.616); /* Add a subtle shadow for depth */
    width: 100%; /* Set width to 100% for proper centering */
    padding: 20px; /* Add padding for better spacing */
    max-width: 300px; /* Set a maximum width for the container */ 
    margin: 0 auto; /* Center the container horizontally */
    display: flex; /* Use flexbox for layout */
    flex-direction: column; /* Arrange items in a column */
}
.links {
    display: flex;  /* Use flexbox for layout */
    flex-direction: row; /* Arrange links in a row */
    justify-content: center; /* Center links horizontally */
    align-items: center; /* Center links vertically */
    flex-wrap: wrap; /* Allow wrapping of links */
    width: 100%; /* Set width to 100% for proper centering */
    max-width: 185px; /* Add a max-width for better layout control */
    margin: 0 auto; /* Center horizontally */
    margin-top: 20px; /* Add some space above the links */
    gap: 15px; /* Add spacing between the links */
}
.white-text {
    color: #fff; /* Set text color to white */
    font-weight:100; /* Set font weight to 100 */
    display: grid; /* Use grid for layout */
    align-items: center;    /* Center items vertically */
    justify-content: center; /* Center items horizontally */
    width: 80%; /* Set width to 80% for better layout */
    max-width: 400px; /* Set a maximum width for the text */
    margin: 0 auto; /* Center horizontally */
    margin-bottom: 20px;    /* Add margin at the bottom */
    text-align: center; /* Center text inside the div */
    }
h1 {
    margin-bottom: 0.5px; /* Add margin at the bottom */
    text-transform: uppercase; /* Transform text to uppercase */
    color:#ff8000; /* Set text color */
    font-size: 1.8em; /* Set font size */
    text-decoration: outline;   /* Outline text */
    text-decoration-style: solid; /* Solid outline */
    text-decoration-color: #FFFFFF; /* Outline color */
    text-decoration-thickness: 6px; /* Thickness of the outline */
    text-shadow: #221133 2px 2px 2px; /* Add shadow to text */
}
h2 {
    margin-bottom: 0.1px; /* Add margin at the bottom */
    text-transform: uppercase;  /* Transform text to uppercase */
    font-size: 0.7em; /* Set font size */
    color:#eb2a84; /* Set text color */
    text-decoration: outline;   /* Outline text */
    text-decoration-style: solid; /* Solid outline */
    text-decoration-color: #FFFFFF; /* Outline color */
    text-decoration-thickness: 6px; /* Thickness of the outline */
    text-shadow: #221133 2px 2px 2px; /* Add shadow to text */
}
h3 {
    margin-bottom: 0.1px; /* Add margin at the bottom */
    text-transform: uppercase; /* Transform text to uppercase */
    font-size: 0.8em; /* Set font size */
    font-weight: 200; /* Set font weight */
    color:#ebce2a; /* Set text color */
    text-decoration: outline;   /* Outline text */
    text-decoration-style: solid; /* Solid outline */
    text-decoration-color: #FFFFFF; /* Outline color */
    text-decoration-thickness: 6px; /* Thickness of the outline */
    text-shadow: #221133 2px 2px 2px; /* Add shadow to text */
}
#youtube {
    background-image: url('images/socials/YouTube.svg'); /* Replace with your icon URL */
    background-size: contain; /* Ensure the icon fits within the element */
    display: inline-block;
    width: 30px; /* Set a fixed width for the icon */
    height: 30px; /* Set a fixed height for the icon */
    margin-right: 5px; /* Add some space between the icon and text */
    vertical-align: middle; /* Align the icon vertically with the text */
    fill: #ffffff; /* Set the icon color to white */
}
#youtube:hover {
    filter: invert(22%) sepia(93%) saturate(6077%) hue-rotate(357deg) brightness(88%) contrast(132%);
}

#twitch {
    background-image: url('images/socials/Twitch.svg'); /* Replace with your icon URL */
    background-size: contain; /* Ensure the icon fits within the element */
    display: inline-block;
    width: 30px; /* Set a fixed width for the icon */
    height: 30px; /* Set a fixed height for the icon */
    margin-right: 5px; /* Add some space between the icon and text */
    vertical-align: middle; /* Align the icon vertically with the text */
    fill: #ffffff; /* Set the icon color to white */
    transition: fill 0.3s; /* Add transition for smooth effect */
}
#twitch:hover {
    filter: invert(33%) sepia(26%) saturate(5572%) hue-rotate(247deg) brightness(98%) contrast(107%);
  }
#kick {
    background-image: url('images/socials/Kick.svg'); /* Replace with your icon URL */
    background-size: contain; /* Ensure the icon fits within the element */
    display: inline-block;
    width: 30px; /* Set a fixed width for the icon */
    height: 30px; /* Set a fixed height for the icon */
    margin-right: 5px; /* Add some space between the icon and text */
    vertical-align: middle; /* Align the icon vertically with the text */
}
#kick:hover {
    filter: invert(70%) sepia(87%) saturate(663%) hue-rotate(51deg) brightness(104%) contrast(98%);
  }
#discord {
    background-image: url('images/socials/discord.svg'); /* Replace with your icon URL */
    background-size: contain; /* Ensure the icon fits within the element */
    display: inline-block;
    width: 30px; /* Set a fixed width for the icon */
    height: 30px; /* Set a fixed height for the icon */
    margin-right: 5px; /* Add some space between the icon and text */
    vertical-align: middle; /* Align the icon vertically with the text */
}
#discord:hover {
    filter: invert(44%) sepia(47%) saturate(7036%) hue-rotate(225deg) brightness(100%) contrast(91%);
}
#ghub {
    background-image: url('images/socials/GitHub.svg'); /* Replace with your icon URL */
    background-size: contain; /* Ensure the icon fits within the element */
    display: inline-block;
    width: 30px; /* Set a fixed width for the icon */
    height: 30px; /* Set a fixed height for the icon */
    margin-right: 5px; /* Add some space between the icon and text */
    vertical-align: middle; /* Align the icon vertically with the text */
}
#tiktok {
    background-image: url('images/socials/TikTok.svg'); /* Replace with your icon URL */
    background-size: contain; /* Ensure the icon fits within the element */
    display: inline-block;
    width: 30px; /* Set a fixed width for the icon */
    height: 30px; /* Set a fixed height for the icon */
    margin-right: 5px; /* Add some space between the icon and text */
    vertical-align: middle; /* Align the icon vertically with the text */
}
#bsky {
    background-image: url('images/socials/BlueSky.svg'); /* Replace with your icon URL */
    background-size: contain; /* Ensure the icon fits within the element */
    display: inline-block;
    width: 30px; /* Set a fixed width for the icon */
    height: 30px; /* Set a fixed height for the icon */
    margin-right: 5px; /* Add some space between the icon and text */
    vertical-align: middle; /* Align the icon vertically with the text */
}
#bsky:hover{
    filter: invert(36%) sepia(75%) saturate(2282%) hue-rotate(196deg) brightness(100%) contrast(102%);
}
#insta {
    background-image: url('images/socials/Instagram.svg'); /* Replace with your icon URL */
    background-size: contain; /* Ensure the icon fits within the element */
    display: inline-block;
    width: 30px; /* Set a fixed width for the icon */
    height: 30px; /* Set a fixed height for the icon */
    margin-right: 5px; /* Add some space between the icon and text */
    vertical-align: middle; /* Align the icon vertically with the text */
}
#insta:hover {
    filter: invert(16%) sepia(100%) saturate(3269%) hue-rotate(310deg) brightness(115%) contrast(97%);
}

/* Optional subtle fade-in */
body {
    opacity: 0;
    animation: fadeIn 8s ease forwards;
}

@keyframes fadeIn {
    to {
        opacity: 1;
    }
}

@media screen and (max-width: 768px) {
    body {
        padding: 20px; /* Add padding for smaller screens */
    }
    .container {
        max-width: 80%; /* Allow more width on smaller screens */
        padding: 15px; /* Reduce padding for smaller screens */
    }
    .logo {
        width: 130px; /* Reduce logo size on smaller screens */
        height: 130px; /* Reduce logo size on smaller screens */
    }
    h1 {
        font-size: 1.5em; /* Reduce font size for smaller screens */
    }
        h2, h3 {
            font-size: 0.7em; /* Reduce font size for smaller screens */
        }
    }