/* Add a black background color to the top navigation */
.topnav {
  background-color: #333;
  overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 20px 28px;
  text-decoration: none;
  font-size: 17px;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Add an active class to highlight the current page */
.topnav a.active {
  background-color: #04AA6D;
  color: white;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
}

.icon-bar {
  width: 100%; /* Full-width */
  background-color: #555; /* Dark-grey background */
  overflow: auto; /* Overflow due to float */
}

.icon-bar a {
  float: left; /* Float links side by side */
  text-align: center; /* Center-align text */
  min-width: 100px;
  max-width: 20%; /* Equal width (5 icons with 20% width each = 100%) */
  padding: 12px 0; /* Some top and bottom padding */
  transition: all 0.3s ease; /* Add transition for hover effects */
  color: white; /* White text color */
  font-size: 36px; /* Increased font size */
}

.icon-bar a:hover {
  background-color: #000; /* Add a hover color */
}

.active {
  background-color: #04AA6D; /* Add an active/current color */
}


/* hobbies page styles */
/* vertical tab bar for video game recommendations */
* {box-sizing: border-box}

/* Style the tab */
.tab {
  float: left;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
  max-width: 250px;
  min-width: 100px;
  height: 300px;
  overflow-y:auto;
  white-space: nowrap;
}

/* Style the buttons that are used to open the tab content, center this */
.tabHolder {
  height: 25%;
  width: 90%;
    margin: 4% auto;
    display: flex;
    justify-content: center;

}

.tab button {
  display: block;
  background-color: inherit;
  color: black;
  padding: 22px 16px;
  width: 100%;
  border: none;
  outline: none;
  text-align: left;
  cursor: pointer;
  transition: 0.3s;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current "tab button" class */
.tab button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
  float: left;
  padding: 12px 12px 12px 12px;
  border: 1px solid #ccc;
  min-width: 500px; /* Adjust width to account for padding */
  max-width: 70%;
  border-left: none;
  height: 300px;
  overflow-y:auto;
  white-space: wrap;
}

/* Style the tab content */
.tabcontentimg {
  float: left;
  padding: 12px 12px 12px 12px;
  border: 1px solid #ccc;
  max-width: 324px;
  min-width: 174px;
  border-left: none;
  height: 300px;
}

.tabDataContainer {
  display: flex; /* Makes the container a flex container */
  /* Optional properties for alignment and spacing: */
  justify-content: space-around; /* Distributes space between items */
  align-items: flex-start; /* Aligns items to the start of the cross-axis */
  gap: 12px; /* Adds space between flex items */

}


/* Chips styles */
.chip {
  display: inline-block;
  padding: 0 25px;
  margin: 5px;
  height: 50px;
  font-size: 16px;
  line-height: 50px;
  border-radius: 25px;
  background-color: #f1f1f1;
}

.chip img {
  float: left;
  margin: 0 10px 0 -25px;
  height: 50px;
  width: 50px;
  border-radius: 50%;
}