html {
  scroll-behavior: smooth;
padding: 0;
  display: flex;
  flex-direction: column;
}


body{
font-family : Montserrat-Light ,Oswald, Verdana; 
font-size: 15px;
overflow-x: hidden;
background-color: #444;
margin: 0;
line-height: 200%;
width: 100%;
}

/* _____________________ Pattern styles ________________________*/
.left-half {
  background-color: #ff9e2c;
  float: left;
  width: 50%;
}

.right-half {
  background-color: #b6701e;
  float: left;
  width: 50%;
}

/* ________________________ */
.responsive {
  width: 100%;
  max-width: 400px;
  height: auto;
}






/* ____________________________________________________________*/
/* _____________________ 30 Summary detail ________________________*/
details {
  width: 50%;
  margin: 0 auto;
  background: none;
  margin-bottom: 0.5rem;
  box-shadow: 0 0.1rem 1rem -0.5rem rgba(0, 0, 0, 0.4);
  border-radius: 5px;
  overflow: hidden;
}

summary {
  padding: 1rem;
  display: block;
  background: #333;
  padding-left: 2.2rem;
  position: relative;
  cursor: pointer;
}

summary:before {
  border-width: 0.4rem;
  border-style: solid;
  border-color: transparent transparent transparent #fff;
  position: absolute;
  left: 1rem;
  transform: rotate(0);
  transform-origin: 0.2rem 50%;
  transition: 0.25s transform ease;
}


details[open] > summary:before {
  transform: rotate(90deg);
}

details summary::-webkit-details-marker {
  display: none;
}

details > ul {
  padding-bottom: 1rem;
  margin-bottom: 0;
}

details > ul li {
list-style: none;
}