body {
  background-image: url('../images/bg-black-with-colored-stripes.gif');
  background-color: black;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  display: flex;
  font-family: "Arimo", sans-serif;
}

/*  ---------------- LARGE NAV BAR ---------------- */

.menu-bar {
  margin-left: 50px;
  min-height: 100vh;
  width: 260px;
  background-image: url('../images/menu-bar.jpg');
  background-size: 200px 100vh;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.menu-text {
  width: 200px;
  height: 50px;
  background: black;
  cursor: pointer;
  margin: 10px 0 10px 0;
}

.menu-text:hover {
  cursor: pointer;
  filter: brightness(1.5);
  background-color: hsla(0, 0%, 0%, 0.544);
}

.welcome-menu-text { background-image: url("../images/welcome-menu.gif"); }
.home-menu-text { background-image: url("../images/home-menu-monocolor.gif"); }
.blog-menu-text { background-image: url("../images/blog-menu-monocolor.gif"); }
.photos-menu-text { background-image: url("../images/photos-menu-monocolor.gif"); }
.diary-menu-text { background-image: url("../images/diary-menu-monocolor.gif"); }
.routine-menu-text { background-image: url("../images/routine-menu-monocolor.gif"); }
.secrets-menu-text { background-image: url("../images/secrets-menu-monocolor.gif"); }

/*  ---------------- MEDIUM NAV BAR ---------------- */

.menu-bar-medium-size {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 50px;
  background: black;
  display: none;
  border-bottom: 2px white solid;
  justify-content: center;
  align-items: center;
}

.menu-medium-size-text {
  font-family: "Arimo", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
  font-size: 34px;
  color: black;
  text-shadow: -1px -1px 0 white, 1px -1px 0 white, -1px  1px 0 white, 1px  1px 0 white;
  margin: 0 10px 0 10px;
}

.menu-link {
  color: black;
}

.menu-medium-size-text:hover { cursor: pointer; }
.welcome-medium:hover { color: #474747dd; }
.home-medium:hover { color: #ffde21; }
.blog-medium:hover { color: #ff1d1d; }
.photos-medium:hover { color: #2fff3d; }
.diary-medium:hover { color: #00ffe5; }
.routine-medium:hover { color: #fc51ff; }
.secrets-medium:hover { color: #5628fd; }

/*  ---------------- MOBILE NAV BAR ---------------- */

.menu-bar-mobile {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 50px;
  background: black;
  display: none;
  border-bottom: 2px white solid;
  justify-content: center;
  align-items: center;
}
.menu-mobile-icons {
  font-size: 34px;
  color: white;
  margin: 0 10px 0 10px;
}
.menu-mobile-icons:hover {
  cursor: pointer;
}

/*  ---------------- CONTENT CONTAINERs ---------------- */

@keyframes createBox {
  from { transform: scale(0); }
  to { transform: scale(1); }
}

.section-container {
  width: 62vw;
  height: 100vh;
  margin-left: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.box {
  animation: createBox .25s;
  width: 100%;
  height: 100vh;
  border-left: 5px black solid;
  border-right: 5px black solid;
}

.welcome-box { 
  background: rgb(0, 0, 0);
  color: white;
  width: 700px;
  height: 500px;
  border-image-slice: 27 27 27 27;
  border-image-width: 10px 10px 10px 10px;
  border-image-outset: 0px 0px 0px 0px;
  border-image-repeat: stretch stretch;
  border-image-source: url("../images/rainbow-border.gif");
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.welcome-img {
  width: 500px;
  height: auto;
}

.home-box { background: rgb(255, 222, 33); }
.blog-box { background: rgb(255, 29, 29); }
.photos-box { background: rgb(47, 255, 61); }
.diary-box { background: rgb(0, 255, 229); }
.routine-box { background: rgb(252, 81, 255); }
.secrets-box { background: rgb(86, 40, 253); }

.invisible {
  display: none;
}

/*  ---------------- MEDIA QUERIES ---------------- */

@media (max-width: 1300px) {
  body { justify-content: center; }

  .menu-bar { display: none; }
  .menu-bar-medium-size { display: flex; }
  .box { height: calc(100vh - 50px); }

  .section-container {
    width: 85vw;
    margin: 50px 0 0 0;
    height: calc(100vh - 50px);
  }
  .welcome-box {
    border-image-width: 0 20px 0 20px;
    height: calc(100vh - 90px);
  }
}

@media (max-width: 960px) {
  body { justify-content: center; }

  .menu-bar { display: none; }
  .menu-bar-medium-size { display: none; }
  .menu-bar-mobile { display: flex; }

  .box {
    height: calc(100vh - 50px);
    border: none;
    animation: none;
  }
  .section-container {
    width: 100vw;
    margin: 50px 0 0 0;
    height: calc(100vh - 50px);
    border: none;
    margin: 50px 0 0 0;
  }
  .welcome-box {
    width: 100vw;
    margin: 50px 0 0 0;
    height: calc(100vh - 50px);
    border: none;
    padding: 0;
    margin: 0;
  }
}

@media (max-width: 600px) {
  .welcome-img { width: 80%; }
}