style.css

* {
    margin: 0; /* Remove default margin from all elements */
    padding: 0; /* Remove default padding from all elements */
}
body {
    font-family: 'Arial', sans-serif; /* Set the font style for the body */
    background-color: #B2B4B2; /* Set a solid background color */
    background-attachment: fixed; /* Fix the background image in place */
    background-image: url('images/VideoGames.jpg'); /* Set the background image */
}
.navbar {
    display: flex; /* Use flexbox for layout */
    position: sticky; /* Keep the navbar fixed at the top */
    align-items: center; /* Center items vertically */
    justify-content: space-between; /* Space out items */
    top: 0px; /* Position at the top */
    background: #54585A; /* Background color */
    background-blend-mode: darken; /* Blend mode for background */
    background-size: cover; /* Cover the entire navbar */
    color: white; /* Text color */
    padding: 10px 20px; /* Padding around navbar */
}
.nav-link {
    text-align: center; /* Center text in links */
    display: inline-block; /* Allow block-level styling */
}
.nav-list {
    display: flex; /* Use flexbox for horizontal layout */
    list-style: none; /* Remove bullet points */
    justify-content: center;  /* Center the list items */
    flex-grow: 1;  /* Allow the nav-list to take remaining space */
}
.nav-list li {
    margin-right: 20px; /* Space between list items */
}
.nav-list li:last-child {
    margin-right: 0; /* Remove margin for the last item */
}
.nav-list li a {
    text-decoration: none; /* Remove underline from links */
    color: white; /* Link text color */
    font-size: 18px; /* Font size for links */
    transition: color 0.3s; /* Smooth transition for color change */
}
.nav-list li a:hover {
    color: #A7A4E0; /* Change color on hover */
}
.rightNav {
    text-align: right; /* Align text to the right */
}
header {
    background-color: #54585A; /* Match header background color with navbar */
}
.row {
    display: flex; /* Use flexbox for horizontal layout */
    justify-content: right; /* Align items to the right */
    margin-bottom: 20px; /* Space between rows */
}
img {
    margin: 5px; /* Space around images */
}

/* Navbar container */
.navbar {
    display: flex; /* Use flexbox for layout */
    background-color: #333; /* Background color */
    padding: 10px; /* Padding around navbar */
    align-items: center; /* Center items vertically */
}

/* Navbar links */
.navbar a {
    color: white; /* Link text color */
    text-decoration: none; /* Remove underline from links */
    padding: 14px 20px; /* Padding around links */
}
.navbar a:hover {
    background-color: #575757; /* Background color on hover */
    color: white; /* Keep text color white on hover */
}

/* Dropdown container */
.dropdown {
    position: relative; /* Position relative for dropdown */
    display: inline-block; /* Allow inline-block styling */
}

/* Dropdown button */
.dropdown .dropbtn {
    background-color: #333; /* Background color for dropdown button */
    color: white; /* Text color */
    border: none; /* No border */
    cursor: pointer; /* Pointer cursor on hover */
    padding: 14px 20px; /* Padding around button */
    font-size: 16px; /* Font size for button */
}
.dropdown:hover .dropbtn {
    background-color: #575757; /* Change background on hover */
}

/* Dropdown menu */
.dropdown-content {
    display: none; /* Initially hide dropdown */
    position: absolute; /* Position dropdown relative to parent */
    background-color: #444; /* Background color for dropdown items */
    min-width: 160px; /* Minimum width for dropdown */
    z-index: 1; /* Stack above other elements */
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2); /* Shadow effect */
    opacity: 0; /* Start invisible */
    transition: opacity 0.3s ease; /* Fade-in effect */
}
.dropdown-content a {
    color: white; /* Text color for dropdown items */
    padding: 12px 16px; /* Padding around dropdown items */
    text-decoration: none; /* Remove underline */
    display: block; /* Block display for dropdown items */
}
.dropdown-content a:hover {
    background-color: #575757; /* Change background on hover */
}
.dropdown:hover .dropdown-content {
    display: block; /* Show dropdown on hover */
    opacity: 1; /* Fully visible */
}
.text-style {
    text-align: center; /* Center text */
    background-color: #B2B4B2; /* Background color */
    width: 500px; /* Fixed width */
    border-radius: 10px; /* Rounded corners */
    border: 4px solid black; /* Border around text style */
}
.thing {
    display: flex; /* Use flexbox for layout */
    justify-content: center; /* Center items */
}
html, body {
    height: 100%; /* Set full height for html and body */
    margin: 0; /* Remove default margin */
}
body {
    display: flex; /* Use flexbox for layout */
    flex-direction: column; /* Stack children vertically */
}
.footer {
    margin-top: auto; /* Push footer to the bottom */
    background-color: #333; /* Match background color */
    padding: 10px 0; /* Add padding */
    color: #ffffff; /* Text color */
    text-align: center; /* Center text in footer */
}