/* Customized summary element*/
summary {
	display: flex;
	cursor: pointer;
	height: 3em;
	justify-content: left;
	align-items: center;
}

/* Customized details element with smooth opening*/
details {

  @media (prefers-reduced-motion: no-preference) {
	interpolate-size: allow-keywords;
  }

  &::details-content {
	opacity: 0;
	block-size: 0;
	overflow-y: clip;
	transition: content-visibility 0.5s allow-discrete, opacity 0.5s, block-size 0.5s;
	
  }

  &[open]::details-content {
	opacity: 1;
	block-size: auto;
  }
  display: block;
  border: 1px solid Gainsboro;
}

/* Remove default marker Chrome */
details summary::-webkit-details-marker {
display: none
}
/* Remove default marker Mozila */
details > summary {
list-style: none;
}

/* Add own closed state marker and style it */
details summary::before {
  content: '+';
  display: flex;
  margin-left: 1em;
  margin-right: 2em;
  border: 1px solid Gainsboro;
  border-radius: 2px;
  width: 1em;
  height: 1em;
  align-items: center;
  justify-content: center;
  letter-spacing: 0px;
  transform: scale(1.5);
}

/* Add own open state marker  */
details[open] summary::before {
  content: '-';
}

details:hover summary::before{
  transform: scale(1.8);
  background-color: Gainsboro;
  transition-duration:0.3s;
}

details::details-content {
  padding-left: 1em;
  padding-right: 1em;
}

/*Math blocks formatting*/
math {
  font-family: serif;
  font-size: 18px;
  overflow: auto visible;
  padding-top: 1em;
  padding-bottom: 1em;
}

.mathInline {
  font-family: serif;
  font-style: italic;
}

/*Rsponsive container for video iframes*/
.resp-container {
  position: relative;
  overflow: hidden;
  padding-top: 56.25%;
}

.resp-iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}