body, html, .main_content {
  height: 100%;
  line-height: 1.8;
}
body {
  background-image: url('../images/background_repeat.png');
  background-repeat: repeat;
  background-attachment: fixed;
}
.w3-bar .w3-button {
  padding: 16px;
}
/* make space for side menu */
@media (min-width:601px){
.main_content {
  margin-left: 10%;
}}

/* CARD BOXES */
.gray_box {
  background: #333533;
  padding: 20px;
  border-radius: 15px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  -webkit-box-decoration-break: clone;
  -o-box-decoration-break: clone;
  box-decoration-break: clone;
}
.gray_box2 {
  background: #242423;
  padding: 20px;
  border-radius: 15px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  -webkit-box-decoration-break: clone;
  -o-box-decoration-break: clone;
  box-decoration-break: clone;
}
.blue_box {
  background: #028090;
  margin: 10px;
  padding: 15px;
  border-radius: 15px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* ROTATE TEXT -90 DEGREES/MAKE TEXT VERTICAL */
.text_sideways {
  writing-mode: vertical-rl;
  transform: rotate(-180deg);
  margin: auto;
}

/* GLOBAL MENU STYLES */
.menu_link {
  background: #028090;
  font-size: 25px;
  font-family: 'Audiowide';
  font-weight: bold;
  text-decoration: none;
  color: #e5e5e5;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: #e5e5e5;
  -webkit-text-fill-color: transparent;
  margin: 10px;
  border-radius: 15px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  -webkit-transition: -webkit-transform .2s ease-in-out;
    transition: transform .2s ease-in-out;
}
.menu_link:hover {
  background: #242423;
  -webkit-text-stroke-color: #028090;
  color: #028090;
  -webkit-transform: rotate(4deg);
    transform: rotate(4deg);
}
.menu_link2 {
  font-size: 25px;
  font-family: 'Audiowide';
  font-weight: bold;
  text-decoration: none;
  color: #e5e5e5;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: #028090;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* TOP MENU BAR */
.topMenu {
  background: #333533;
  border-radius: 0px 0px 15px 15px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

/* SLIDE-IN SIDE MENU */
#sideMenu {
  background: #333533;
  overflow-y: auto;
  overflow-x: hidden;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2) inset, 0 6px 20px 0 rgba(0, 0, 0, 0.19) inset;
}
.sideMenu {
  position: fixed;
  top: 0px;
  left: 0px
  border: 1px solid #ccc;
  background-color: #333533;
  width: 10%;
  height: 100%;
  z-index: 100;
  padding-top: 20px;
  padding-bottom: 20px;
}
.sideMenu button {
  display: block;
  background-color: inherit;
  color: #279af1;
  padding: 22px 16px;
  padding-top: 10px;
  width: 100%;
  border: none;
  outline: none;
  text-align: left;
  cursor: pointer;
  font-size: 25px;
  font-family: 'Audiowide';
}
/* side menu text */
.sidebar_text {
  display: flex;
  width: 80%;
  align-items: center;
  padding: 20px;
}
.menu_link2 .sidebar_text {
  margin-bottom: 20px;
  background: #028090;
  -webkit-text-stroke-color: #e5e5e5;
  border-radius: 15px;
  box-shadow: 0 -4px 8px 0 rgba(0, 0, 0, 0.2), 0 -6px 20px 0 rgba(0, 0, 0, 0.19);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  -webkit-transition: -webkit-transform .2s ease-in-out;
    transition: transform .2s ease-in-out;
}
.menu_link2:hover .sidebar_text {
  background: #242423;
  -webkit-text-stroke-color: #028090;
  color: #028090;
  -webkit-transform: rotate(-176deg);
    transform: rotate(-176deg);
}

/* MENU FOR SMALL SCREENS */
.mobile_menu {
  position: fixed;
  display: none;
  top: 0px;
  height: 100%;
  width: 100%;
  background: #333533;
  z-index: 100;
}
.mobile_menu_container {
    width: 100%;
}
.mobile_menu_close {
  display: inline-block;
  vertical-align: middle;
  overflow: hidden;
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
  background: #028090;
  font-size: 30px;
  font-family: 'Audiowide';
  font-weight: bold;
  color: #e5e5e5;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: #028090;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke-color: #e5e5e5;
  border: none;
  border-radius: 15px;
  margin-top: 20px;
  width: 90%;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.mobile_menu_close:hover {
  background: #242423;
  -webkit-text-stroke-color: #028090;
  color: #028090;
}
.mobile_menu_link {
  display: inline-block;
  vertical-align: middle;
  overflow: hidden;
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
  background: #028090;
  font-size: 25px;
  font-family: 'Audiowide';
  font-weight: bold;
  color: #e5e5e5;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: #028090;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke-color: #e5e5e5;
  width: 80%;
  padding: 10px;
  margin-left: 10%;
  margin-right: 10%;
  margin-top: 20px;
  border: none;
  border-radius: 15px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  -webkit-transition: -webkit-transform .2s ease-in-out;
    transition: transform .2s ease-in-out;
}
.mobile_menu_link:hover {
  background: #242423;
  -webkit-text-stroke-color: #028090;
  color: #028090;
  -webkit-transform: rotate(4deg);
    transform: rotate(4deg);
}

/* BOTTOM OF PAGE FOOTER */
footer {
  background: #333533;
  border-radius: 15px 15px 0px 0px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding: 20px;
  color: #028090;
}
footer i {
  background: transparent;
  color: #e5e5e5;
  border-radius: 15px;
  text-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
}
footer i:hover {
  color: #333533;
  -webkit-transform: rotate(-5deg);
          transform: rotate(-5deg);
}
/* 'made by' text */
footer p {
  font-family: 'Audiowide';
  font-weight: bold;
  color: #e5e5e5;
}
footer .blue_box {
  color: #e5e5e5;
  margin: 0px;
  padding: 10px;
}
footer > p > a:hover {
  color: #333533;
}


/* ROTATING ANIMATION STYLING */
.rotating_obj {
  width: 100%;
  height: 100%;
  -webkit-transition: -webkit-transform .2s ease-in-out;
          transition:         transform .2s ease-in-out;
}
.rotating_child {
  width: 100%;
  height: 100%;
  -webkit-transition: -webkit-transform .2s ease-in-out;
          transition:         transform .2s ease-in-out;
}
.rotating_child_back {
  width: 100%;
  height: 100%;
  -webkit-transition: -webkit-transform .2s ease-in-out;
          transition:         transform .2s ease-in-out;
}
.rotate_forward {
  -webkit-transform: rotate(2deg);
          transform: rotate(2deg);
}
.rotate_back {
  -webkit-transform: rotate(-2deg);
          transform: rotate(-2deg);
}
.rotate_forward_title .rotating_child {
  -webkit-transform: rotate(3deg);
          transform: rotate(3deg);
}
.rotate_forward_title .rotating_child_back {
  -webkit-transform: rotate(-3deg);
          transform: rotate(-3deg);
}
.rotate_forward_title .rotating_child2 {
  -webkit-transform: rotate(10deg);
          transform: rotate(10deg);
}
.rotate_forward_title .rotating_child_back2 {
  -webkit-transform: rotate(-10deg);
          transform: rotate(-10deg);
}
.rotating_child2:hover {
  -webkit-text-stroke-width: 0px;
  -webkit-text-stroke-color: black;
  background: linear-gradient(90deg, #279af1, #b618b7);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
}
.rotating_child_back2:hover {
  -webkit-text-stroke-width: 0px;
  -webkit-text-stroke-color: black;
  background: linear-gradient(90deg, #279af1, #b618b7);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
}