:root {
  --mid-color: #E4007C;
  --mid-dark: #b3005f;
}

/* =========================
   GLOBAL
========================= */
html, body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  font-size: 16px;
  background-color: #F8C8DC;
}

/* =========================
   CONTAINER
========================= */
#container {
  max-width: 900px;
  margin: 0 auto;
  border: 3px solid black;
  background: white;
}

/* =========================
   HEADER
========================= */
#header {
  text-align: center;
  background: #000;
}

#header img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* =========================
   NAVBAR (MAIN ROW)
========================= */
.navbar {
  background-color: var(--mid-color);
  border-bottom: 2px solid var(--mid-dark);
}

.navbar ul {
  list-style: none;
  margin: 0;
  padding: 0;

  display: flex;
  justify-content: center;
}

.navbar li {
  position: relative;
}

/* links + ART label */
.navbar a,
.navbar span {
  display: block;
  padding: 12px 18px;
  color: white;
  text-decoration: none;
  letter-spacing: 1px;
  cursor: pointer;
}

.navbar a:hover,
.navbar span:hover {
  background: rgba(0, 0, 0, 0.2);
}

/* =========================
   DROPDOWN FIX
========================= */
.subitems {
  display: none !important;   /* FORCE hidden */
  position: absolute;
  top: 100%;
  left: 0;

  background: #222;
  min-width: 180px;
  z-index: 1000;

  flex-direction: column;
}

.navbar li:hover > .subitems {
  display: flex !important;   /* FORCE show only on hover */
  flex-direction: column;
}

/* =========================
   CONTENT
========================= */
.wrapper {
  padding: 20px;
}

.main-content {
  width: 100%;
}

.content {
  background: #000;
  color: #fff;
  padding: 20px;
  box-sizing: border-box;
  text-align: left;
}

/* image */
.about-img {
  max-width: 200px;
  height: auto;
  display: block;
  margin: 0 auto 15px auto;
}

/* =========================
   MOBILE
========================= */
@media (max-width: 900px) {

  #container {
    width: 100%;
    border: none;
  }

  .navbar ul {
    flex-wrap: nowrap;
    justify-content: center;
  }

  .navbar a,
  .navbar span {
    font-size: 14px;
    padding: 10px;
  }

  .wrapper {
    padding: 10px;
  }

  .content {
    padding: 15px;
  }
}