@font-face {
  font-family: 'Geist';
  src: url(fonts/webfonts/Geist-Thin.woff2) format('woff2');
  font-style: normal;
  font-weight: 300;
}

@font-face {
  font-family: 'Geist';
  src: url(fonts/webfonts/Geist-Regular.woff2) format('woff2');
  font-style: normal;
  font-weight: 400;
}
@font-face {
  font-family: 'Geist';
  src: url(fonts/webfonts/Geist-Medium.woff2) format('woff2');
  font-style: normal;
  font-weight: 500;
}
@font-face {
  font-family: 'Geist';
  src: url(fonts/webfonts/Geist-SemiBold.woff2) format('woff2');
  font-style: normal;
  font-weight: 600;
}
@font-face {
  font-family: 'Geist';
  src: url(fonts/webfonts/Geist-Bold.woff2) format('woff2');
  font-style: normal;
  font-weight: 700;
}


body {
    margin: 0px;
    font-optical-sizing: auto;
    font-family: 'Geist';
    box-sizing: border-box;
    font-style: normal;
  }


  ::-webkit-scrollbar {
    display: none;
  }

  
  h1,h2,h3,h4{
    font-weight: 700;
    margin: 0px;
  }


main{
    margin: 2rem;


}

.accordion{
    margin-top: 2em;
    font-size: 1em;
    
    
}

.accordion > details {
margin-bottom:1rem;
}


ul{
  padding-left: 1em;
  margin-bottom: 0px;

}

ul > details{
    margin-top: 1rem;

}

summary {
  width: fit-content;
  font-weight: 600;
  cursor: pointer;
}

ul > details > summary {
  font-weight: 400;
}

details > div {
  font-weight: 400;
  margin-top: 1rem;
  margin-left: 2rem;
  line-height: 1.8;
}

details::details-content {
  display: block;
	block-size: 0;
	overflow: hidden;
	transition-property: block-size, content-visibility;
	transition-duration: 0.5s;
	transition-behavior: allow-discrete;

}

details[open]::details-content {
	/* Fallback for browsers that don't support calc-size() function */
	block-size: auto;
	
	/* calc-size() function allows transition to height: auto; */
	block-size: calc-size(auto, size);
}

p{
  margin: 0px;
  min-width: 400px;

}

a{
  text-decoration: none;
}
a:visited { 
  text-decoration: none;
   color:blue;
 }

ul details div {
  display: grid;
  grid-template-columns: 33% 67%;
  gap: 2rem;
  width: 100%;
  height: 100%;


}


.image-container {
  position: absolute;
  margin: 0px;
  width: auto;
  display: flex;
  flex-direction: column;
  top: 0rem;
  padding-top: 6rem;
  right: 2rem;
  height: calc(100% - 6rem) ;
  overflow-y: scroll;

}



img{
  object-fit: scale-down;
  max-width: calc(67vw - 12rem);
  max-height: calc(100vh - 12rem);
  
  
}


details > span {
  font-weight: 300;
  display: block;
  margin-top: 1em;
  margin-left: 1rem;
  font-size: 14px;
}

details > summary::marker {
  content: "+ ";
  font-family: monospace;
  font-weight: bold;
}

details[open] > summary::marker {
  content: "- ";
}