body, html { width: 100%; height: 100%; margin: 0; } .sidebar { padding-top: 10px !important; position: absolute; height: 100%; top: 0; left: 0; padding-left: 10px; padding-right: 5px; background-color: red; } .main_frame { position: absolute; left: 230px; padding-left: 10px; background-image: url('https://i.imgur.com/hAkK4gA.png'); } .sidebar ul { list-style-type: none; margin: 0; padding: 0; } .sidebar li { display: block; padding: 5px; } .sidebar label { margin-top: 10px; padding: 0; cursor: pointer; user-select: none; } .sidebar a:hover, .sidebar label:hover { filter:brightness(110%); } .sidebar input[type='radio'] { display: none; } .link_group ul { user-select: none; max-height: 0px; overflow: hidden; transition: 0.3s max-height; } .sidebar .link_group:has(input[type='radio']:checked) ul { max-height: 1000px; transition: 0.3s ease-in max-height; transition-delay: 0.0s; } .main_frame { max-width: 960px; line-height: 1.5em; margin-left:15px; margin-right: 10px; font-family: "EB Garamond" } .main_frame h2 { margin-bottom: 0px; padding-bottom:0px; } .main_frame p { margin-top: 10px; } .logo_holder { width: 254px; } .logo_holder img { width: 100%; } .page_title { box-shadow: 3px 3px #3d3d3d; background-color: purple; padding-left: 15px; font-family: 'Rajdhani', sans-serif; font-style: italic; text-shadow: 1px 1px BLACK; /*background-image: url(https://emma31.tripod.com/backs2/pup2.gif);*/ background-image: url('themes/macchiato_assets/pup2.png'); color: white; user-select: none; } .page_title h1 { padding-top: 20px; padding-bottom: 20px; }