body {
    font-family: 'Arial', sans-serif;
    background: rgb(41,2,65);
background: linear-gradient(90deg, rgba(41,2,65,1) 0%, rgba(89,26,80,1) 0%, rgba(0,41,97,1) 100%);
    color: #fff;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    overflow-y: scroll;
}

iframe {
    overflow: hidden;
}

nav {
    background: rgb(41,2,65);
background: linear-gradient(90deg, rgba(41,2,65,1) 0%, rgba(55,0,47,1) 0%, rgba(0,29,69,1) 100%);
border: 1px solid white;
border-top: none;
    padding: 20px 20px;
    text-align: center;
}

nav h1 {
    margin: 0;
    font-size: 24px;
}

.game-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
    padding: 20px;
}

.game-container {
    background-color: rgba(255, 255, 255, 0.1);
    padding: 20px;
    border-radius: 10px;
    text-align: center;
}

.game-container:hover {
    background-color: rgba(255, 255, 255, 0.2);
      transition: transform 0.3s ease;
  transform: scale(1.05, 1.05);
}

.game-container img {
    width: 100%;
    height: auto;
    border-radius: 10px;
}

.game-container a {
    color: #fff;
    text-decoration: underline;
}

footer {
    background-color: #3a0062;
    padding: 10px 20px;
    text-align: center;
    color: #fff;
    position: fixed;
    bottom: 0;
    height: 45px;
    border-top: 1px solid white;
    width: 100%;
}

span {
    text-decoration: underline;
    cursor: pointer;
}

input {
  cursor: pointer;
    width: 250px;
    height: 30px; /* Adjust the height as needed */
    padding: 5px 10px; /* Add some padding inside the input for better usability */
    border: 2px solid #fff; /* A border to make it stand out */
    border-radius: 5px; /* Rounded corners for a softer look */
    background-color: rgba(255, 255, 255, 0.1); /* A subtle background color */
    color: #fff; /* Text color */
    font-size: 16px; /* Adjust the font size as needed */
    transition: border-color 0.3s ease; /* Smooth transition for hover effect */
}

input:hover {
  transition: transform 0.3s ease;
  transform: scale(1.05, 1.05);
}

input:focus {
    border-color: #89c0ff; /* Change border color on focus for better user interaction */
    outline: none; /* Remove default outline */
}

input::placeholder {
    color: #ccc; /* Placeholder text color */
}

#footerSpacing {
margin-top:25px;margin-bottom:25px;width:100%;height:0;position:relative;
}

.headerBack {
  margin:0;
  padding:0;
  top:0;
  width:100%;
  height: 50px;
  background-color: rgba(211, 211, 211, 0.1);
  margin-bottom:20px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
  border: 1px solid black;
  border-top: none;
}

.featured-section {
  margin: 25px;
  border-radius: 10px;
    background: rgba(211, 211, 211, 0.05); /* Gradient background */
    padding: 20px; /* Padding around the featured section */
    text-align: center;
  padding-top: 5px;
  max-height: 20%;
}

.featured-container {
    display: flex;
    justify-content: space-between; /* Space evenly between the games */
    max-width: 1200px; /* Maximum width for the featured section */
    margin: 0 auto; /* Center the container */
    align-items: center;
}

.featured-game {
    flex: 1; /* Each featured game takes equal space */
    width: 50%; /* Each game takes up 50% of the width */
    max-width: 350px;
}

.featured-game .game-container {
    margin: 0; /* Remove margin for game containers */
    border: 1px solid black;
}

.feat-button {
      flex: 1; /* Each featured game takes equal space */
      max-width: 150px;
      height: 150px;
    background: rgba(100, 100, 200, 0.3);
    border-radius: 100%;
    margin: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 45px;
    cursor: pointer;
    border: 1px solid black;
}

.feat-button:hover {
      background: rgba(100, 100, 200, 0.4);
}

* {
 transition: all 0.3s ease;
}

		.circle {
			width: 50px;
			height: 50px;
      background-color: rgba(211, 211, 211, 0.03);
			border-radius: 50%;
			position: absolute;
			transition: transform 0.1s ease-in-out;
      z-index: -1;
			/* Smooth scaling */
		}

    /* favorites */
    .favorite {
      border: 2px solid gold;
      color: gold;
    }

    img:hover {
      cursor:pointer;
    }

    #switchView {
      position: absolute;
      right: 0;
      margin-right:50px;
      top: 50%;
      transform: translate(0, -50%);
      width: 125px;
      height: 50px;
      border-radius: 15px;
      border: 1px solid white;
      background-color: rgba(31, 31, 31, 0.7);
      color: white;
      font-size: 18px;
      cursor: pointer;
	    transition: transform 0.3s ease;
    }