/***

Modified from a layout by https://eggramen.neocities.org

***/

body {
  background: white;
  font-size: 1em;
  font-family:'Fredoka';
  padding: 0;
  margin: 0;
  background-image: url("https://mooshpuppii.com/images/mushbg.png");
}

/*Contains everything*/

/*Contains main and sidebar divs*/
.wrapper-2 {
  position: relative;
}

/*Header and footer images*/
.header {
  height: 200px;
  overflow: hidden;
  background-size: cover;
}

/*These three classes are just for defining the boundaries and size of the main and sidebar columns. Most fancy styling goes in the 'box' class.*/
.main {
  display: inline-block;
}

.sidebar-left {
  width: 200px;
  position: absolute;
  top: 0;
}

.sidebar-left {
  margin-left: 10px;
}

.main {
  margin-left: 220px;
  width: 710px;
}

/*Box used for individual sections in the sidebar, center column, etc.*/

.box {
  border-radius: 40px;
  color: #1c1711;
  background-color: white;
  border-top: 3px solid #262020;
  border-bottom: 7px solid #262020;
  border-left: 3px solid #262020;
  border-right: 3px solid #262020;
  margin: 9px auto 9px auto;
}

.box2 {
  border-radius: 40px;
  color: #1c1711;
  background-color: white;
  border-bottom: 7px solid #262020;
  border-left: 3px solid #262020;
  border-right: 3px solid #262020;
  margin: 9px auto 9px auto;
}

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

.box2 img {
  max-width: 100%;
  height: auto;
}

/*Sidebar and main box*/
.inner {
  padding: 16px;
  font-size: 1.075em;
  text-align: left;
}

/*Wraps text in the main box around image*/
.image-left {
  float: left;
  margin-right: 15px;
}

/*About me page alignment*/
.inner2 {
  height: 854px;
  overflow: auto;
  padding: 0.25em 1em 0.3em 1em;
  font-size: 1.075em;
  text-align: center;
}
/*Social links at the top*/
.linkbox {
  padding: 0.25em 1em 0.3em 1em;
  font-size: 1.25em;
  text-align: center;
}

.inner4 {
  padding: 0.25em 1em 0.3em 1em;
  font-size: 1.075em;
  text-align: left;
}

/* For narrow screens. Makes the sidebars narrower, and makes width of the 
 * center/main div 50% of the viewport width.
 */
@media (max-width: 1180px) {
  .wrapper {
    width: calc(440px + 50vw);
  }
  .main {
    width: 50vw;
  }
}

@media (max-width: 910px) {
  .wrapper {
    width: calc(360px + 52vw);
  }
  .sidebar-left {
    width: 160px;
  }
  .main {
    margin-left: 180px;
    width: 52vw;
  }
}

/* Mobile compatibility. Puts everything into a standard vertical layout. */
@media (orientation: portrait) {
  .wrapper {
    width: 96vw;
    margin: 0 auto;
    padding: 0;
    position: relative;
  }
  .wrapper-2 {
    width: 94vw;
    margin: 0 auto;
    padding: 0;
    position: relative;
  }
  .sidebar-left,
  .main {
    position: relative;
    width: 92vw;
    margin: 0.25rem 1vw;
  }
  .sidebar-left,
  .sidebar-right {
    font-size: 0.95em;
  }
}

.wrapper {
  background: none;
  top: 0;
  margin: 0 auto;
  width: 870px;
}

/*Width and margins of left sidebar*/
.sidebar-left {
  width: 175px;
  margin-left: 0px;
}

/*Width and margins of main box*/
.main {
  width: 686px;
  margin-left: 185px;
}

.wrapper,
.links a {
  color: #983969;
}

.header {
  border: 3px soli #333;
  background-image: url("https://mooshpuppii.neocities.org/images/banner.png");
  box-shadow: rgba(0, 0, 0, 0.3) 0 6px 14px;
  border-top: 3px solid #262020;
  border-bottom: 3px solid #262020;
  border-left: 3px solid #262020;
  border-right: 3px solid #262020;
  text-align: center;
  margin-top: 15px;
  top: 0;
}

.links {
  margin-top: 1em;
}

.title {
  /*suppress title, since we're putting the title as text in the header box*/
  display: none;
}

.footer {
  height: 0;
}

.box h1,
.box h2,
.box h3,
.box h4 {
  background: #C6DD95;
  border: 3px solid;
  margin: 0;
  padding: 10px;
  text-align: center;
  border-radius: 25px;
}

.box2 h1,
.box2 h2,
.box2 h3,
.box2  h4 {
  background: #C6DD95;
  border: 3px solid;
  margin: 0;
  padding: 10px;
  text-align: center;
  border-radius: 25px;
}

.tablemoment {
  padding: 10px;
  text-align: center;
  table-layout: fixed;
  width: 100%;
}

.tablemoment th {
  padding: 10px;
  text-align: center;
}

.tablemoment td {
  padding: 25px;
  text-align: center;
}

/* For narrow screens: slightly narrows sidebars, and makes the width
 * of the main/center div flexible (sized relative to viewport width.)
 */
@media (max-width: 880px) {
  .wrapper {
    width: calc(340px + 50vw);
  }
  .sidebar-left,
  .sidebar-right {
    width: 160px;
  }
  .main {
    width: 50vw;
    margin-left: 170px;
  }
}

/*Mobile compatibility. Just turns it all into a vertical layout.*/
@media (orientation: portrait) {
  .wrapper {
    width: 96vw;
    margin: 0 auto;
    padding: 0;
    position: relative;
  }
  .wrapper-2 {
    width: 94vw;
    margin: 0 auto;
    padding: 0;
    position: relative;
  }
  .sidebar-left,
  .main,
  .sidebar-right {
    position: relative;
    width: 92vw;
    margin: 0.25rem 1vw;
  }
}