* {margin: 0; padding: 0;box-sizing: border-box;font-family: Arial, sans-serif;line-height: 25px;}
a{text-decoration: none;}
img{width: 100%;float: left;height: auto;margin-bottom: 10px;}
h1{font-size: 24px;text-align: center;padding-bottom: 10px;}
h3{margin-top: 10px;}
hr{width: 50px;height: 3px;background-color: red;margin-top: 5px;margin-bottom: 10px;}
.topbar {width: 100%;height: 60px;background-color: #f1f1f1;color: #000;display: flex;align-items: center;
justify-content: space-between;padding: 0 20px;position: fixed;top: 0;left: 0;border-bottom: 2px solid black;z-index: 465534}
.sidebar-footer{bottom: 0px;position: fixed;width: 280px;background-color: black}
.menu-toggle {font-size: 24px;cursor: pointer;display: none;}
.search-box {display: flex;align-items: center;background: white;padding: 5px;border-radius: 5px;}
.search-box input {border: none;padding: 5px;outline: none;width: 200px;}
.search-box button {background-color: #f1f1f1;color: #000;border: none;padding: 5px 10px;cursor: pointer;border-radius: 3px;}
.sidebar {width: 280px;height: 100vh;background: #f1f1f1;position: fixed;left: 0;top: 60px;transition: transform 0.3s ease;
        overflow:scroll;padding-bottom: 95px;z-index: 1000;}
.right-sidebar{width: 300px;position: fixed;right: 0;top: 60px;transition: transform 0.3s ease;background: #f1f1f1;padding: 10px;}
.right-sidebar h2{text-align: center;}
.right-sidebar ul{list-style: none;margin-top: 10px;padding-left: 10px;}
.right-sidebar ul li{padding: 2px 0px;}
.sidebar a {color: #000;padding: 12px 0px;}
#menu-checkbox {display: none;}
#search_results{margin: 70px 310px 10px 290px;}
@media(max-width: 768px)
{
  #search_results{margin-left: 2.5%;width: 95%;}
}
.accordion-title {display: block;background-color: #f7f7f7;padding: 10px;font-size: 16px;font-weight: 500;cursor: pointer;border-bottom: 2px solid white;color: #000}
.accordion-content {max-height: 0; overflow: hidden;background: #f1f1f1;transition: max-height 0.3s ease-in-out;font-weight: 400;}
.accordion-title:hover{color:#fff;background-color:#00bbbb;text-shadow: 0px 0px 0px;transition: 0.3s ease-in-out; }
.accordion-content:hover{background-color:#00bbbb;text-shadow: 0px 0px 0px;transition: 0.3s ease-in-out;}
.accordion-content a{color: #000;font-size: 16px;display: block;padding: 7px 10px;}
.accordion-content:hover a{color: #fff}
.accordion-item input, .checkid input{display: none;}
.accordion-item span, .checkid span{margin-right: 10px;}
.accordion-item label:hover a, .checkid label:hover a{color: #fff}
.accordion-item input:checked ~ .accordion-content {max-height: 50px;}
.accordion-content a:before{content: "⮞";margin-right: 5px;}
.accordion-content:hover a:before{content: "⮟"}
  input[type="checkbox"]:not(checked) + label::after {content: "⮟";float: right;margin-right: 10px;}
input[type="checkbox"]:checked + label::after{content: "⮝";margin-right: 10px;}

.checkid input[type="checkbox"]:not(checked) + label::after {content: "⮝";float: right;margin-right: 10px;}
.checkid input[type="checkbox"]:checked + label::after{content: "⮟";margin-right: 10px;}
.checkid input:checked ~ .accordion-content{max-height: 0px;}
.checkid input:not(checked) ~ .accordion-content {max-height: 50px;}

.darkerlishadow{background-color:#ededed;text-transform:capitalize;  
-webkit-box-shadow: inset 0px 5px 5px -4px rgba(50, 50, 50, 0.55);
-moz-box-shadow:    inset 0px 5px 5px -4px rgba(50, 50, 50, 0.55);
box-shadow:         inset 0px 5px 5px -4px rgba(50, 50, 50, 0.55);}
.darkerlishadowdown{background-color:#ededed;text-transform:capitalize;  
-webkit-box-shadow: inset 0px -4px 5px -4px rgba(50, 50, 50, 0.55);
-moz-box-shadow:    inset 0px -4px 5px -4px rgba(50, 50, 50, 0.55);
box-shadow:         inset 0px -4px 5px -4px rgba(50, 50, 50, 0.55);}


.container {margin:60px 300px 0px 280px;transition: margin-left 0.3s ease;padding:10px;}
.container p{margin-top: 10px}
.container p a{font-weight: 600;color:blue;}

.color-container{background-color:#fdfdfd;padding: 10px;}
.no-color-container{padding: 10px;}
.color-container ul, .no-color-container ul{padding-left: 20px;}

.footer {width: 100%;background: #222;color: white;text-align: center;float: left;}
.important-links {padding: 10px 0px;border-top: 1px solid #444;text-align: center;}
.important-links a {color: #bbb;margin: 0 15px;font-size: 14px;}
.important-links a:hover {color: white;}

@media (max-width: 768px) 
{
  .sidebar{transform: translateX(-100%);}
  .menu-toggle{display: block;}
  #menu-checkbox:checked ~ .sidebar{transform: translateX(0);}
  .container{margin-left: 0px;margin-right: 0px;}
  .search-box input {width: 120px;}
  .sidebar-footer{display: none;}
  .sidebar{padding-bottom: 50px;}
  .container{padding: 10px 0px;}
  .right-sidebar{display: none;}
  h2{font-size: 20px;}
}