.collapse > input[type="checkbox"] {  position: absolute;   left: -100vw;}
.collapse .content {  overflow-y: hidden;  height: 0;  transition: height 0.3s ease;  color: white;}
.collapse > input[type="checkbox"]:checked ~ .content {  height: auto;  overflow: visible;}
.collapse label { display: block;}
body {font: 16px/1.5em "Overpass", "Open Sans", Helvetica, sans-serif; color: navy; font-weight: 300;}
.collapse { margin-bottom: 1em;}
.collapse > input[type="checkbox"]:checked ~ .content {  padding: 15px;  border: 0;  border-top: 0;}
.collapse .handle {  margin: 0;  font-size: 1.125em;  line-height: 1.2em;}
.collapse label {   cursor: pointer;  font-weight: 500;  padding: 0px;  }



.container {   position: relative;  width: 100%;  overflow: hidden;  padding-top: 56.25%; /* 16:9 Aspect Ratio */}
.responsive-iframe {  position: absolute; top: 0;  left: 0;  bottom: 0;  right: 0;  width: 100%;  height: 100%;  border: none;}

<!-- Left  Menu -->
.mobile-container { max-width: 480px;margin: auto;height: 500px; color: red;border-radius: 10px;}

.icon-bar a {display: block;text-align: center;padding:10px;transition: all 0.3s ease;color: white;font-size: 22px;}
.icon-bar a:hover {background-color: #000;}
.active {background-color: #04AA6D;}


 

.button {
  background-color:green ;
  border-radius: 15px;
box-shadow: 0 5px #999;  margin: 4px 2px;
  border-style: none;
  box-sizing: border-box;
  color: white;
  cursor: pointer;
  display: inline-block;
  font-family: "Haas Grot Text R Web", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 18px;
  font-weight: 500;
  height: 32px;
  line-height: 24px;
  list-style: none;
  margin: 0;
  outline: none;
  padding: 0px 20px;
  position: relative;
  text-align: center;
  text-decoration: none;
  transition: color 100ms;
  vertical-align: baseline;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.button:hover,
.button:focus {
  background-color: #fa6400;
}

.button0 {
  background-color:#EA4C89 ;
  border-radius: 15px;
box-shadow: 0 5px #999;  margin: 4px 2px;
  border-style: none;
  box-sizing: border-box;
  color: #FFFFFF;
  cursor: pointer;
  display: inline-block;
  font-family: "Haas Grot Text R Web", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 18px;
  font-weight: 500;
  height: 32px;
  line-height: 24px;
  list-style: none;
  margin: 0;
  outline: none;
  padding: 0px 20px;
  position: relative;
  text-align: center;
  text-decoration: none;
  transition: color 100ms;
  vertical-align: baseline;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.button0:hover,
.button0:focus {
  background-color: #fa6400;
}

.button01 {
  background-color:#2A4C89 ;
  border-radius: 15px;
box-shadow: 0 5px #999;  margin: 4px 2px;
  border-style: none;
  box-sizing: border-box;
  color: #FFFFFF;
  cursor: pointer;
  display: inline-block;
  font-family: "Haas Grot Text R Web", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 18px;
  font-weight: 600;
  height: 32px;
  line-height: 24px;
  list-style: none;
  margin: 0;
  outline: none;
  padding: 0px 20px;
  position: relative;
  text-align: center;
  text-decoration: none;
  transition: color 100ms;
  vertical-align: baseline;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.button01:hover,
.button01:focus {
  background-color:  #2ea44f;
}



.div0 {width: 40px; height=400px; background-color: #292828; font-size: 15px; padding: 0px; text-align: center; border-radius: 10px;  box-shadow:0px 5px 0px 0px #999;}  

.c1 {width: 180px;  background-color: #292828; font-size: 15px; padding: 5px;color:white; text-align: center; 
border-radius: 10px;  box-shadow:0px 5px 0px 0px #999; }

.c2 {border-radius: 20px;width:525px;  background-color: #292828; font-size: 15px; padding: 0px; text-align: center; 
  }


.c4 {width: 150px;  background-color: #292828; font-size: 16px; color:tomato; padding: 5px; text-align: center; font-weight:800;;
border-radius: 10px;  box-shadow: 0px 10px 10px 0px #999;   margin: 4px 2px; opacity: 0.7; }

 

.navbar {  width: 100%;  overflow: auto;}.navbar a {  float: left;  padding: 12px;  color: white;font-weight:600;
        text-decoration: none;  font-size: 17px;} .navbar a:hover {  background-color: #000;}
.active {  background-color: #04AA6D;}

.navbar2 {  width: 100%;  overflow: auto;}.navbar2 a {  float: left;  padding: 5px;  color: white;font-weight:500;
        text-decoration: none;  font-size: 17px;} .navbar2 a:hover {  background-color: #000;}
.active {  background-color: #04AA6D;}




.navbar1 {  width: 100%; overflow: auto;font-size: 18px;color: white;font-weight:500;}
.navbar1 a {  float: left;  padding: 5px;  text-decoration: none;  font-size: 18px;} .navbar1 a:hover {  background-color: #000;}
.active {  background-color: #04AA6D;}

.colorchange{position:fixed;top:0; background:#181a1b; width:3000px; height:50px;}


@media(prefers-reduced-motion:no-preference){:root{scroll-behavior:smooth}}
body{-ms-overflow-style:none;scrollbar-width:none;overflow-y:scroll;margin:0;font-size:1rem;font-weight:200;line-height:1.5;color:#fff;text-align:left;background-color:#181a1b}

dt{font-weight:700}dd{margin-bottom:.5rem;margin-left:0}blockquote{margin:0 0 1rem}dfn{font-style:italic}b,strong{font-weight:bolder}small{font-size:70%!important;top:-.5em}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sub{bottom:-.25em}

sup{top:-.5em}a{color:#0080ff;text-decoration:none;background-color:transparent;-webkit-text-decoration-skip:objects}
a:hover{color:#fff;text-decoration:none}a:not([href]):not([tabindex]){color:inherit;text-decoration:none}a:not([href]):not([tabindex]):hover,a:not([href]):not([tabindex]):focus{color:inherit;text-decoration:none}
a:not([href]):not([tabindex]):focus{outline:0}pre,code,kbd,samp{font-size:1em}pre{margin-top:0;margin-bottom:1rem;overflow:auto;-ms-overflow-style:scrollbar}
figure{margin:0 0 1rem}img{vertical-align:middle;border-style:none}svg{overflow:hidden;vertical-align:middle}table{border-collapse:collapse}
caption{padding-top:.75rem;padding-bottom:.75rem;color:#6c757d;text-align:left;caption-side:bottom}
