/***

THIS CODE HAS BEEN REVAMPED... AGAIN!

IF YOU WANT THE ORIGINAL CSS, GO TO: 
  https://eggramen.neocities.org/code/css/misc/fakewp_old/fakewp2.css

IF YOU WANT THE v2 CSS (i.e. NOT THE ORIGINAL BUT NOT THE CURRENT WIP REVAMP), GO TO: 
  https://eggramen.neocities.org/code/css/misc/fakewp_new/fakewp2_new.css

***/

body {
  background: no-repeat url("https://echoequinox.neocities.org/images/background.png");
  background-attachment: fixed;
  color: white;
  font-family: sans-serif;
  font-size: 0.875em;
  }
  
center {
  text-align: center;
  }
  
/*Contains everything*/
.wrapper {
  width: 1150px;
  background: #430f28;
  margin: 0 auto;
  top: 0;
  margin-top: -10px;
  border-left: 0px solid #430f28;
  border-right: 0px solid #430f28;  
  margin-bottom: -10px;
  }
  
/*Contains main and sidebar divs*/
.wrapper-2 {
  position: relative;
}
  
/*Header and footer images*/
.header, .footer {
  height: 200px;
  overflow: hidden;
  background: linear-gradient(rgb(0,0,0,0.1),rgb(0,0,0,0.1)), url("https://www.lifeinthefingerlakes.com/wp-content/uploads/2019/10/finger-lakes-sunset.jpg"); /*This is the image in the header and footer. Replace it with your own!*/
  background-size:cover;
  }
  
  
.footer {
  height: 50px;
  }
  
.header img {
  border-top: 0px;
  }
  
  
/*Big title at the top of the page.*/  
.title {
  padding: 15px 10px 10px 20px;
  }

<nav class="nav-bar">
  <ul class="nav-links">
    <li><a href="#">Home</a></li>
    <li class="has-dropdown">
      <a href="#">About</a>
      <ul class="dropdown">
        <li><a href="#">Our Team</a></li>
        <li><a href="#">History</a></li>
      </ul>
    </li>
    <li class="has-dropdown">
      <a href="#">Projects</a>
      <ul class="dropdown">
        <li><a href="#">Current</a></li>
        <li><a href="#">Archive</a></li>
      </ul>
    </li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

/*Override default margins/padding for headings.*/
.title h1, .title h2, .title h3 {
  padding:0;
  margin: 0;
  }

/*Container for top row of links.*/
.links {
  padding: 5px;
  padding-top: 3px;
  padding-bottom: 5px;
  }
  
/*Div style for individual links.*/
.link {
  text-align: center;
  display: inline-block;
  list-style-type: none;
  float: none;
  font-weight: bold;
  font-size: 1.16em;
  padding: 5px;
  margin-right: 10px;
  margin-left: 10px;
  border: 0px solid red;
  }
  
.link a {
  color: white;
  text-decoration: none;
  }

/* /* FLEX LAYOUT: main and sidebars */
.wrapper-2 {
  display: flex;
  flex-direction: row;
  position: relative;
}

/* Left sidebar: force it to the left */
.sidebar-left {
  order: 0;
  width: 200px;
  flex-shrink: 0;
  margin: 10px;
}

/* Main content: always in the center */
.main {
  order: 1;
  flex-grow: 1;
  margin: 10px;
}

/* Right sidebar: force it to the right */
.sidebar-right {
  order: 2;
  width: 200px;
  flex-shrink: 0;
  margin: 10px;
}

.box {
  padding: 10px 10px 10px 10px;
  background: #d3c2bb;
  color: #000000;
  border-top: 5px solid #bb1648;
  border-bottom: 5px solid #bb1648;
  margin: 10px 0;
}

/* Remove bottom border on all boxes except the last one to avoid stacked borders */
.box:not(:last-child) {
  border-bottom: none;
  margin-bottom: 30px; /* extra spacing between boxes */
}

/* Prevent overflow of large images in main text areas */
.box img {
  max-width: 100%;
  height: auto;
}

/* Mobile compatibility: vertical layout */
@media(orientation: portrait), (max-width: 910px) {
  .wrapper {
    width: 96vw;
    margin: 0 auto;
    padding: 0;
    position: relative;
  }

  .wrapper-2 {
    flex-direction: column;
    width: 94vw;
    margin: 0 auto;
    padding: 0;
  }

  .sidebar-left,
  .sidebar-right {
    width: 92vw;
    margin: 0.25rem auto;
    font-size: 0.95em;
  }

  .main {
    width: 92vw;
    margin: 0.25rem auto;
  }
}

/* Top navigation bar */
.nav-bar {
  background: #611531;
  padding: 0;
  margin: 0;
}

/* Top-level navigation items */
.nav-links {
  list-style: none;
  display: flex;
  justify-content: center;
  margin: 0;
  padding: 0;
}

.nav-links > li {
  position: relative;
}

.nav-links > li > a {
  display: block;
  padding: 10px 20px;
  color: white;
  text-decoration: none;
  font-weight: bold;
}

.nav-links > li > a:hover {
  background: #bb1648;
}

/* Dropdown container */
.dropdown {
  display: none;
  position: absolute;
  background-color: #611531;
  top: 100%;
  left: 0;
  min-width: 160px;
  z-index: 999;
}

.dropdown li {
  display: block;
}

.dropdown li a {
  padding: 10px 15px;
  display: block;
  color: white;
  text-decoration: none;
}

.dropdown li a:hover {
  background-color: #bb1648;
}

/* Show dropdown on hover */
.has-dropdown:hover .dropdown {
  display: block;
}

.float-left {
  float: left;
  margin: 0 15px 15px 0;
  max-width: 40%;
  height: auto;
  display: block; /* helps align text to top */
}

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}