:root {
     --dk-color:#ffffff;
     --mid-color:#236f6c;
     --lt-color:#ffffff;
     --dkest-color:#000000;
     --accent:#19062d;
     --border-color:#19062d;
     --sb-color:#2f9591;
}
 html, body {
     margin:0;
     padding-top:25px;
     padding:0;
     height:95%;
     font-family: Verdana;
     font-size:12px;
     background-image:url('https://squidkitty.neocities.org/assets_images/backgroundtile.png');
     background-repeat:repeat;
     color:var(--dkest-color);
     padding:1px;
}
 body a {
     color:var(--accent);
     font-weight:bold;
}
img {
  width: 100%; /* Makes the image take up 100% of the parent's width */
  height: auto; /* Maintains the image's aspect ratio */
  display: block; /* Prevents extra space below the image, especially in older browsers */
}

 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(--border-color);
}
 h2, h4, h6 {
     color:var(--accent);
}
 #header {
     max-width:1000px;
     height:auto;
     margin:0 auto;
     background-color:var(--mid-color);
     border:1px solid var(--border-color);
}
 .navbar li a {
     text-decoration:none;
}
 .navbar ul {
     list-style-type:none;
     padding:0;
     padding-left:20px;
     padding-right:20px;
}
 .navbar {
     background-color:var(--sb-color);
     max-width:1000px;
     border:1px solid var(--border-color);
     border-bottom:none;
     border-top:none;
     padding-top:5px;
     padding-bottom:5px;
     text-align:center;
}
 .title {
     font-size:35px;
     text-align:center;
     font-style:italic;
     color:var(--border-color);
}
 .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(--border-color);
}
 .wrapper {
     
     display:flex;
     flex-wrap:stretch;
     height:auto;
     width:100%;
}
 #left-sidebar {
    flex: 0 0 197px;
    background-color: var(--sb-color);
    border: 1px solid var(--dkest-color);
    border-right: none;
     
}
 .content {
     text-align: center;
     padding:10px;
}
 .main-content {
     border:1px solid var(--dkest-color);m
     width:700px;
     height:auto;
}
 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);
     
    min-width: 100%;
    width: auto; 
    box-sizing: border-box;
    white-space: nowrap;
    z-index: 1000;
}
 .navbar li > ul a {
     padding-left:0;
     padding-right:0;
     padding-top:10px;
     padding-bottom:10px;
}
 .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;
}

@media only screen and (max-width: 917px) {
  .wrapper {
    flex-direction: column;   /* stack vertically instead of side-by-side */
  }

  .main-content {
    order: 1; 
    width: 100%;
  }

  #left-sidebar {
    order: 2; 
    width: 100%;
    border-top: 1px solid var(--dkest-color);
    border-right: none;
  }

  .navbar a {
    padding-bottom: 10px;
  }
}