:root {
     --dk-color:#bf776b;
     --mid-color:#f2b1a4;
     --lt-color:#ffffff;
     --dkest-color:#8e534a;
     --accent:#226051;
}
 html, body {
 
     margin:0;
     padding-top:25px;
     padding:0;
     height:98%;
     font-family:Verdana;
     font-size:11px;
    background-image:url('background.png');
     background-repeat:repeat;
     color:var(--dkest-color);
     padding:1px;
}
 body a {
     color:var(--accent);
     font-weight:bold;
}
 ul.list li {
     padding-bottom:5px;
}
 #container {
     max-width:900px;
     margin:0 auto;
     height:auto;
     background-color:var(--lt-color);
     margin-top:15px;
}
 h1, h3, h5 {
     color:var(--dk-color);
}
 h2, h4, h6 {
     color:var(--accent);
}
#header {
    max-width: 1000px;
    height: auto;
    margin: 0 auto;
    background-color: white;
    border: 1px solid var(--dkest-color);
}
.navbar {
    background-color: white;
    width: 180px;
    border: 1px solid var(--dkest-color);
    padding: 10px 0;
    text-align: left;
}

.navbar ul {
    list-style-type: none;
    margin: 0;
    padding: 10px;
}

.navbar li {
    display: block;
    width: 100%;
}

.navbar a {
    display: block;
    text-decoration: none;
    color: var(--accent);
    padding: 8px 12px;
    margin: 0;
    font-weight: bold;
    font-size: 12px;
}

.title {
    font-size: 35px;
    text-align: center;
}
 .section-title {
     text-align:center;
     font-weight:bold;
     padding-top:5px;
     padding-bottom:5px;
     background-color:var(--mid-color);
     color:var(--dkest-color);
     font-size:12px;
     border-bottom:1px solid var(--dkest-color);
}
.wrapper {
    display:flex;
    flex-wrap:nowrap;
    align-items:flex-start;
    height:auto;
    width:100%;
}
 #left-sidebar {
     width:197px;
     border:1px solid var(--dkest-color);
     height:100%;
     border-right:none;
     background-color:var(--lt-color);
}
 .content {
     padding:10px;
}
 .main-content {
  background: #ffffff !important;
}

.main-content .content {
  background: #ffffff !important;
}

.main-content .section-title {
  background: #ffffff !important;
}
 p {
     padding:5px;
}
 p a {
     color:var(--dkest-color);
     font-weight:bold;
}
 .scroll::-webkit-scrollbar-track {
     background-color: var(--lt-color);
}
 .scroll::-webkit-scrollbar {
     width: 10px;
     background-color: #f2b1a4;
}
 .scroll::-webkit-scrollbar-thumb {
     background-color: var(--dk-color);
}
 .navbar li {
     position: relative;
     display:inline-block;
}
 .navbar a {
     text-decoration:none;
     display:block;
     color:var(--accent);
     margin-right:15px;
     transition:0.2s all linear;
     font-weight:bold;
     font-size:12px;
     margin-right:40px;
}
 .navbar a:hover{
     background:var(--lt-color);
     color:var(--accent);
     transition:0.2s all linear;
     z-index:1;
}
 .navbar li > ul {
     background:var(--mid-color);
     display:none;
     position:absolute;
     margin-left:0;
     border:1px solid var(--dkest-color);
}
 .navbar li > ul a {
     padding-left:0;
     padding-right:0;
     padding-top:5px;
     padding-bottom:5px;
}
 .navbar li > ul li{
     display:block;
}
 .navbar li:hover > ul{
     display:block;
}
 .navbar ul ul ul {
     position:absolute;
     left:100%;
     top:0;
}
 ul.subitems {
     padding-left:0;
     padding-right:0;
     margin-right:0;
}
 ul.subitems li a {
     padding-right:0;
     margin-right:0;
     padding-left:10px;
     padding-right:10px;
     padding-top:10px;
     display:block;
}
 #footer {
     text-align:center;
     padding-top:5px;
     margin-bottom:5px;
}
 #footer p {
     background-color:white;
     display:block;
     width:160px;
     margin:0 auto;
     margin-top:5px;
     margin-bottom:5px;
     padding:5px;
}
 textarea {
     background-color:var(--dkest-color);
     color:var(--lt-color);
     font-size:10px;
}
 .code-wrapper {
     display:flex;
     padding-left:10px;
}
/* COMMENT OUT OR DELETE THE BELOW CODE FOR TWO SIDEBARS */
 #right-sidebar {
     display:none;
}

/* UNCOMMENT THE BELOW CODE FOR TWO SIDEBARS */
/* .main-content {
     width:600px;
     border-right:none;
}
 #right-sidebar {
     width:197px;
     border:1px solid var(--dkest-color);
}
 #container {
     max-width:1000px;
}
 */
/* CHANGE BELOW TO max-width:1000px for TWO SIDEBARS. It is max-width:914px for ONE SIDEBAR */
 @media only screen and (max-width: 917px) {
     #left-sidebar {
         order:2;
         width:100%;
         border-right: none;
    }
     .main-content {
         order:1;
         width:100%;
         border-bottom:none;
         border-right:none;
    }
     .navbar a {
         padding-bottom:10px;
    }
    /* UNCOMMENT THE BELOW CODE FOR TWO SIDEBARS */
    /* #right-sidebar {
         width:100%;
         order:3;
         border-top:none;
    }
     #container {
         max-width:1000px;
    }
     .main-content {
    }
     */
}
.photo-frame {
   display: inline-block;
   padding: 12px;
   background: #ffffff;
   border: 1px solid #000000;
   position: relative;
   box-shadow: 5px 5px 0 #f4a6c1;
}
.scrap-photo {
  height: auto;
  display: block;
  margin: 18px auto;
  border: none;
  box-shadow: none;
  padding: 0;
  background: none;
}

.photo-one {
  width: 115%;
  transform: rotate(-3deg);
}

.photo-two {
  width: 40%;
  transform: rotate(4deg);
}

.photo-three {
  width: 40%;
  transform: rotate(-2deg);
}

@font-face {
  font-family: "CuteFont";
  src: url("cute-font.ttf") format("truetype");
}

#header h1 {
  font-family: "CuteFont", sans-serif;
}

html, body {
  cursor: url("/wand.png") 8 8, auto;
}

a, button, input, textarea, select {
  cursor: url("/wand.png") 8 8, pointer;
}

#container {
  background-color: white;
}

.side-nav {
    padding: 12px;
}

.side-nav a {
    display: block;
    background-color: white;
    border: 1px solid var(--dkest-color);
    padding: 10px;
    margin-bottom: 10px;
    text-align: center;

    text-decoration: none;
    color: var(--accent);
    font-weight: bold;
    font-size: 12px;
}

.side-nav a:hover {
    background-color: var(--lt-color);
}
/* SIDEBAR OPEN/CLOSE BUTTON */

#sidebar-toggle {
    width: 35px;
    height: 35px;
    background: white;
    border: 1px solid var(--dkest-color);
    color: var(--dkest-color);
    cursor: pointer;
    flex-shrink: 0;
    font-size: 16px;
}

#left-sidebar.hidden {
    display: none;
}