:root { --dk-color:#bf776b; --mid-color:#f2b1a4; --lt-color:#ffe8e3; --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('https://neothemes.neocities.org/images/roses-bg.gif'); 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:var(--mid-color); border:1px solid var(--dkest-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(--lt-color); max-width:1000px; border:1px solid var(--dkest-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(--dkest-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(--dkest-color); } .wrapper { display:flex; flex-wrap:wrap; 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 { border:1px solid var(--dkest-color); 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); } .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:1px solid var(--dkest-color); } .main-content { order:1; width:100%; border-bottom:none; border-right:1px solid var(--dkest-color); } .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 { } */ } a