.woodbg {
    background-image: url('https://i.postimg.cc/zBZXLsNY/oc-woodbg.png');
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
    overflow:auto;
    min-height:94vh;
}

.profilenote {
  width:80%;
  height:auto;
  margin:auto;
  font-family: "Comic Sans MS", "Comic Sans", cursive;
  margin-top:2em;
  margin-bottom:2em;
  padding:3em 1em 3em 3em;
  background-image: url('https://i.postimg.cc/3KbPNhFs/oc-notelong.png');
  background-size: cover;
  background-repeat:no-repeat;
  overflow:visible;
    filter: drop-shadow(1px 1px 5px rgba(3, 7, 18, 0.20)) 
      drop-shadow(-1px 1px 5px rgba(3, 7, 18, 0.20))
      drop-shadow(1px -1px 5px rgba(3, 7, 18, 0.20))
      drop-shadow(-1px -1px 5px rgba(3, 7, 18, 0.20));
}
.profilenote a {
  color: #b64e09;
}
.profilenote a:hover {
  color: #6b2f2d;
}
.profilenote ul {
  padding-left:1.5em;
  text-transform:none;
  list-style-position: outside;
}
.profilenote h4 {
  font-weight:bold;
}

.profilewrite {
    width: 100%;
    height:auto;
    margin: auto;
    max-height:700px;
    font-size:1.1em;
    text-align:left;
    line-break:auto;
    padding:25px;
    overflow:auto;
    z-index:999;
  }
.profilewrite img {
  margin: 15px 0px 15px 0px;
  border: 5px solid white;
  box-shadow: -6px 12px 31px rgba(3, 7, 18, 0.30);
  max-width:100%;
}

.profilethe {
  background-image: url('https://i.postimg.cc/tJSRJLJy/oc-the.png');
  background-size:contain;
  background-position:left;
  background-repeat:no-repeat;
  background-attachment:local;
  margin:3rem 1rem 6rem 3rem;
  height: 15em;
  width:auto;
}

/* WIP STATS */
.wipstats {
  margin: 4rem 1rem 1rem 1rem; 
  width:100%;
  text-align:center;
}
.wipleft {
  text-align:right;
  float:left;
  font-weight:bold;
  width:50%;
  padding-right:0.5em;
}
.wipright {
  text-align:left;
  float:right;
  border-left: 2px solid #000;
  margin-bottom:1rem;
  width:50%;
  padding-left:0.5em;
}

/* OC AVATAR */
.photocont {
  right:0;
  top:-5vh;
  width:20vw;
  height:20vw;
  transform:rotate(15deg);
  position:absolute;
  box-shadow:  0px 90px 58px 16px rgba(0,0,0,0.3);
}

.photograph {
  width:100%;
  height:100%;
  border:10px solid white;
  background-color: rgb(197, 197, 197);
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
}
.photocaption {
  width:100%;
  height:auto;
  text-transform:lowercase;
  background-color:white;
  border:10px solid white;
  color:black;
  margin-top:-10px;
}

  /* PAGINATION */
  .navcontainer {
    position:relative;
  }
  .ocprev, .ocnext {
    height:100px;
    width:115px;
    bottom:75vh;
    position:absolute;
    z-index:999;
  }
  .ocprev {
    left:1%;
    background-image: url('https://i.postimg.cc/cH94LrF6/oc-arrowl.png');
    background-size:contain;
    background-repeat:no-repeat;
  }
  .ocnext {
    right:1%;
    background-image: url('https://i.postimg.cc/MHnZMqL5/oc-arrowr.png');
    background-size:contain;
    background-repeat:no-repeat;
  }

  @media only screen and (max-width: 768px) {
      .profilenote {
      width:98%;
      padding:1em;
    }
    .photocont {
      width:20vh;
      height:20vh;
      transform:rotate(0deg);
      top:0;
      position:fixed;
    }
  }
  @media only screen and (min-width:768px) and (max-width: 1199px) {
    .profilenote {
      width:90%;
    }
  }
  
    @media only screen and (max-width: 1199px) {
    .profilenote {
      margin-bottom:8em;
    }
    .ocprev {
      bottom:0;
      left:3em;
      margin-bottom:1em;
    }
    .ocnext {
      bottom:0;
      right:3em;
      margin-bottom:1em;
    }
    .wipstats {
    margin:2em 0em 2em 0em;
    }
    .wipleft {
      width:20%;
    }
    .wipright {
      width:80%;
    }
    .profilethe {
      height:10em;
      margin:1em 1rem 2rem 1rem;
    }
    .photocaption {
      font-size:0.8em;
    }
  }

  .returnbut {
    background-color: #b64e09;
    color:white!important;
    padding:20px;
    font-size:20px;
    font-family:'Segoe UI', sans-serif;
    font-weight:bold;
    border-radius:4px;
  }
  .returnbut:hover {
  background-color: #6b2f2d;
  color:white!important;
  text-decoration:none;
}
.returnbut:active {
    background-color: #b64e09;
  color:white!important;
}

  .ocprev:hover {
    transform:rotate(15deg);
    background-image: url('https://i.postimg.cc/0yR5jg0G/oc-arrowl2.png');
  }
  .ocnext:hover {
    transform:rotate(-15deg);
    background-image: url('https://i.postimg.cc/bwxy26m7/oc-arrowr2.png');
  }
  .ocprev:active {
        background-image: url('https://i.postimg.cc/cH94LrF6/oc-arrowl.png');
  }
  .ocnext:active {
      background-image: url('https://i.postimg.cc/MHnZMqL5/oc-arrowr.png');
  }