<style>
/* Define a cool color scheme */
:root {
  --main-color: #00a0d2; /* A light blue */
  --accent-color: #ff4d4d; /* A bright red */
  --dark-color: #333333; /* A dark gray */
  --light-color: #f0f0f0; /* A light gray */
}

/* Apply a background gradient to the whole page */
body {
  background: linear-gradient(to right, var(--main-color), var(--accent-color));
}

/* Style the header element */
header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
}

/* Style the logo image */
.logo img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

/* Style the navigation links */
.headNavs a, .mainNavs a {
  display: inline-block;
  padding: 10px;
  margin: 5px;
  color: white;
  text-decoration: none;
  font-weight: bold;
}

/* Add some hover effects to the navigation links */
.headNavs a:hover, .mainNavs a:hover {
  background-color: var(--accent-color);
  transform: scale(1.1);
}

/* Style the search box */
.searchBox {
  margin-top: 20px;
}

/* Style the search input and button */
.searchIpt, .btn {
  height: 40px;
  border: none;
  outline: none;
}

/* Style the search input */
.searchIpt {
  width: 400px;
  padding-left: 10px;
}

/* Style the search button */
.btn {
  width: 100px;
  background-color: var(--main-color);
  color: white;
}

/* Add some hover effects to the search button */
.btn:hover {
  background-color: var(--accent-color);
}

/* Style the main contents area */
.mainContents {
  display: flex;
}

/* Style the menus wrapper */
.menusWrapper {
  width: 200px;
}

/* Style the menus buttons */
.menusWrapper a {
  display: block;
  width: 100%;
  height: 100px;
  line-height: 100px;
  text-align: center;
  vertical-align: middle;
}

/* Add some hover effects to the menus buttons */
.menusWrapper a:hover {
   background-color: var(--light-color);
   color: var(--dark-color);
}

/* Style the active menu button */
.menusWrapper a.active {
   background-color: var(--dark-color);
   color: white;
}

/* Style the center wrapper */
.ctnerWrapper {
   flex-grow: 1;
   padding-left: 20px;
}

/* Style the center tab */
.ctnerTab a {
   display: inline-block;
   padding: 10px;
   margin-right: 10px;
   border-bottom: solid var(--main-color) thick; 
}

/* Add some hover effects to the center tab links */
.ctnerTab a:hover {
   border-bottom-color: var(--accent-color);
}

/* Style the active center tab link */
.ctnerTab a.on {
   border-bottom-color: white; 
}

/* Style the nav title */
.navTitle {
   font-size: large;
   font-weight:bold; 
}

/* Style the nav area */
.navArea h2 {
   display:inline-block; 
   margin-right :10px; 
}
</style>