/* Reset margins and padding for all elements */
* {
  margin: 0;
  padding: 0;
}

body { /* Base styles for the body */
  font: normal 14px Arial, Helvetica, sans-serif;
  color: #fff;
  text-align: center;
  background-color: #1c2128;
  height: 100%;
}

b, strong { /* Font weight for bold text */
  font-weight: bold;
}

h1, h2, h3, h4, h5 { /* Header Styles */
  margin: 2px;
}

/* Font sizes for headers with responsive scaling */
h1 {font-size: calc(1em + 2vw);}
h2 {font-size: calc(1em + 1vw);}
h3 {font-size: calc(1em + 0.5vw);}

a:link { /* Link Styles */
  color: #6401e5;
  text-decoration: none;
  font-weight: bold;
  font-size: 12px;
}

#meinpage {
  position: relative;
  min-height: 95vh;
}

#header, #footer { /* General styles for header and footer */
  margin: 0 auto;
  color: #fff;
}
#header { /* Header-specific styles */
  height: 70px;
  background-color: #121212b5;
  text-align: left;
  border-bottom: 1px solid #2e3846
}
#header a { /* Styles for header links */
  vertical-align: middle;
  display: inline-block;
  border: 0;
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  padding: 2px;
  margin: 3px;
  overflow: hidden;
}
#header a:hover { /* Hover effect for header links */
  color: #00c0f1;
  transition-duration: .35s;
}
#header a#headlogo { /* Specific style for the header logo link */
  border: none;
  margin: 0px;
  margin-left: 10px;
  background-color: transparent;
  box-shadow: none;
}
#headerright{
  float: right;
  margin-top: 18px;
}
#headerright a{
  display: inline-block;
  border-radius: 3px;
  padding: 3px;
  min-width: 25px;
  margin-right: 10px;
}
#headerright a.ashop{
  display: inline-block;
  border-radius: 100px;
  background: #38d1ec;
  padding: 6px;
}
#headerright a:hover{
  background: #535353;
}
#headerright input{
  width: 150px;
    color: #fff;
    border: 0px solid #fff;
    border-bottom: 1px solid #fff;
    background: transparent;
}
svg {
  fill: #fff;
  width: 18px;
  height: 18px;
}​
path {
  fill: #fff;
}​
#footer { /* Footer styles */
  text-align: center;
  padding: 7px;
  position: absolute;
  bottom: 0;
  width: 98%;
  border-top: 1px solid #151719;
}

.center { /* Center alignment utility class */
  text-align: center;
}

/* Text color classes */
.textred {color: #fc596f;}
.textgreen {color: #38eca6;}
.textblue {color: #00d5f1;}
.textorange {color: #ffab54;}

#Intermediate_chapters, #Advanced_chapters { /* Hide intermediate and advanced chapters by default */
  display: none;
}

/* vibr red #fa0045 */
/* vibr blue #2e8ace */
/* vibr green #00bd73 */
/* vibr gold #d9ba52 */
/* content #1f252a */
/* text #999ea8 */
/* 10% #161a1e */
/*  */

details { /* Styles for details elements */
  border-radius: 0; 
  margin: 0px;
  margin-bottom: 2px;
  padding: 0;
  max-height: 999px;
  transition: max-height 400ms ease-out;
}

details iframe {
float: right;
margin-left: 16px;
aspect-ratio: 16 / 9;
width: 100%;
max-width: 560px;
height: auto;
margin-bottom: 16px;
}
.chapterclass h2 { /* Style for headers inside details */
  font-size: 1.4em;
  margin-top: 8px;
}
summary{
  vertical-align: middle;
  padding: 10px;
  background: #2e3846;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); /* Even shadow all around */

  color: #999ea8; /* color of arrow */
}
/*
#Beginner_chapters div:nth-child(odd) div summary,
#Intermediate_chapters div:nth-child(odd) div summary,
#Advanced_chapters div:nth-child(odd) div summary{
  background: #2e3846;

}
summary:hover, #Beginner_chapters div:nth-child(odd) div summary:hover,
#Intermediate_chapters div:nth-child(odd) div summary:hover,
#Advanced_chapters div:nth-child(odd) div summary:hover{
  background: #2f384b;
  cursor: pointer;
}
*/

/* Define gradients for each child */
/* Define gradients for each child with balanced saturation */
#Beginner_chapters div:nth-child(1) div summary,
#Intermediate_chapters div:nth-child(1) div summary,
#Advanced_chapters div:nth-child(1) div summary {
  background: linear-gradient(to right, rgba(0, 255, 255, 0.2), #2c3138),
  repeating-linear-gradient(
    -45deg,
    rgba(255, 255, 255, 0.01),
    rgba(255, 255, 255, 0.01) 10px,
    rgba(0, 0, 0, 0.01) 10px,
    rgba(0, 0, 0, 0.01) 20px
  );
}

#Beginner_chapters div:nth-child(2) div summary,
#Intermediate_chapters div:nth-child(2) div summary,
#Advanced_chapters div:nth-child(2) div summary {
  background: linear-gradient(to right, rgba(255, 255, 0, 0.2), #2c3138),
  repeating-linear-gradient(
    -45deg,
    rgba(255, 255, 255, 0.01),
    rgba(255, 255, 255, 0.01) 10px,
    rgba(0, 0, 0, 0.01) 10px,
    rgba(0, 0, 0, 0.01) 20px
  );
}

#Beginner_chapters div:nth-child(3) div summary,
#Intermediate_chapters div:nth-child(3) div summary,
#Advanced_chapters div:nth-child(3) div summary {
  background: linear-gradient(to right, rgba(255, 50, 50, 0.2), #262b31),
  repeating-linear-gradient(
    -45deg,
    rgba(255, 255, 255, 0.01),
    rgba(255, 255, 255, 0.01) 10px,
    rgba(0, 0, 0, 0.01) 10px,
    rgba(0, 0, 0, 0.01) 20px
  );
}

#Beginner_chapters div:nth-child(4) div summary,
#Intermediate_chapters div:nth-child(4) div summary,
#Advanced_chapters div:nth-child(4) div summary {
  background: linear-gradient(to right, rgba(255, 150, 0, 0.2), #2c3138),
  repeating-linear-gradient(
    -45deg,
    rgba(255, 255, 255, 0.01),
    rgba(255, 255, 255, 0.01) 10px,
    rgba(0, 0, 0, 0.01) 10px,
    rgba(0, 0, 0, 0.01) 20px
  );
}

#Beginner_chapters div:nth-child(5) div summary,
#Intermediate_chapters div:nth-child(5) div summary,
#Advanced_chapters div:nth-child(5) div summary {
  background: linear-gradient(to right, rgba(50, 150, 255, 0.2), #2c3138),
  repeating-linear-gradient(
    -45deg,
    rgba(255, 255, 255, 0.01),
    rgba(255, 255, 255, 0.01) 10px,
    rgba(0, 0, 0, 0.01) 10px,
    rgba(0, 0, 0, 0.01) 20px
  );
}

#Beginner_chapters div:nth-child(6) div summary,
#Intermediate_chapters div:nth-child(6) div summary,
#Advanced_chapters div:nth-child(6) div summary {
  background: linear-gradient(to right, rgba(150, 255, 50, 0.2), #2c3138),
  repeating-linear-gradient(
    -45deg,
    rgba(255, 255, 255, 0.01),
    rgba(255, 255, 255, 0.01) 10px,
    rgba(0, 0, 0, 0.01) 10px,
    rgba(0, 0, 0, 0.01) 20px
  );
}

#Beginner_chapters div:nth-child(7) div summary,
#Intermediate_chapters div:nth-child(7) div summary,
#Advanced_chapters div:nth-child(7) div summary {
  background: linear-gradient(to right, rgba(150, 50, 255, 0.2), #2c3138),
  repeating-linear-gradient(
    -45deg,
    rgba(255, 255, 255, 0.01),
    rgba(255, 255, 255, 0.01) 10px,
    rgba(0, 0, 0, 0.01) 10px,
    rgba(0, 0, 0, 0.01) 20px
  );
}

#Beginner_chapters div:nth-child(8) div summary,
#Intermediate_chapters div:nth-child(8) div summary,
#Advanced_chapters div:nth-child(8) div summary {
  background: linear-gradient(to right, rgba(255, 102, 255, 0.2), #2c3138),
  repeating-linear-gradient(
    -45deg,
    rgba(255, 255, 255, 0.01),
    rgba(255, 255, 255, 0.01) 10px,
    rgba(0, 0, 0, 0.01) 10px,
    rgba(0, 0, 0, 0.01) 20px
  );
}

#Beginner_chapters div:nth-child(9) div summary,
#Intermediate_chapters div:nth-child(9) div summary,
#Advanced_chapters div:nth-child(9) div summary {
  background: linear-gradient(to right, rgba(103, 103, 255, 0.2), #2c3138),
  repeating-linear-gradient(
    -45deg,
    rgba(255, 255, 255, 0.01),
    rgba(255, 255, 255, 0.01) 10px,
    rgba(0, 0, 0, 0.01) 10px,
    rgba(0, 0, 0, 0.01) 20px
  );
}

#Beginner_chapters div:nth-child(10) div summary,
#Intermediate_chapters div:nth-child(10) div summary,
#Advanced_chapters div:nth-child(10) div summary {
  background: linear-gradient(to right, rgba(255, 167, 85, 0.2), #2c3138),
  repeating-linear-gradient(
    -45deg,
    rgba(255, 255, 255, 0.01),
    rgba(255, 255, 255, 0.01) 10px,
    rgba(0, 0, 0, 0.01) 10px,
    rgba(0, 0, 0, 0.01) 20px
  );
}




details {
  transition: 0.3s background linear;
}

details>summary {
  transition: color 1s;
}

details[open]>summary {
  color: #d9103e;
}

.detclass{
  display: inline-flex;
  margin: 0;
  width: 100%;
}
.h2class{
  text-align: right;
  float: right;
  margin: 2px;
}
.h2details{
  display: inline-block;
  width: 100%;
  /* background-color: #080c10; */

}
details div h2{
color: #fff;
margin-bottom: 16px;
font-size: 20px;
font-weight: bold;
}

details h3 { /* Style for headers inside details */
  display: inline-block; font-size: 1em; 
  color: #fff;
}

details h4 { /* Style for headers inside details */
  display: inline-block; font-size: 1em; 
}

details div {
  margin: 0px;
color: #999ea8;
transition: 1s;
}

details div p{
  margin: 5px;
  text-align: justify;
}
details div ul, details div ol{
  margin-left: 20px;
}

details div p strong{
  color: #00c0f1;
  text-align: left;
}
.description{
  font-size: 16px;
  margin-top: 10px;
  font-style: italic;
  font-weight: bold;
  line-height: 1.3em;
}
.createdby{
  /* font-style: italic; */
  margin-left: 0;
  color: #fff;
  /* font-weight: bold; */
  font-size: 18px;
  height: 50px;
  line-height: 46px;
  padding-left: 58px;
  background-image: url("icons/favicon-32x32.png");
  background-repeat: no-repeat;
  background-size: 42px 42px;
}

hr {
  border: 1px solid #999;
  margin: 0.5em 0;
}

hr.explanation {border: 1px solid #ff0000;}
hr.practice {border: 1px solid #fbff00;}
hr.conclusion {border: 1px solid #00ccff;}

.chapterclass { /* Chapter class styles (currently empty, can be expanded) */
width: 70%;
display: inline-block;
text-align: left;
padding: 1px;
max-width: 1100px;
min-width: 800px;
} 

.cl { /* Clearfix utility class */
  clear: both;
  margin: 0;
  padding: 0;
}

#zenter { /* Container for the main content area */
  padding: 0 10px;
  padding-bottom: 121px;
  margin: 0 auto;
  overflow: hidden;
  background-color: #1c2128;
}

#tutorialcategories { /* Tutorial categories container */
  text-align: center;
  padding: 10px;
}

#Tiers, #Category { /* Tiers section styles */
  text-align: center;
  padding: 10px;
  font-size: 22px;
  color: #fff;
}
#Tiers a, #Category a { /* Styles for tier links */
  font-size: 22px;
  color: #999ea8;
  display: inline-block;
  border-radius: 6px;
  padding: 2px 5px;
}
#Tiers a:hover, #Category a:hover { /* Hover effect for tier links */
  color: #fff;
  transition-duration: .35s;
}
#Category a.Categoryset{
  color: #38d1ec
}

#Category a.Categorys{
  color: #999ea8
}
#Category a.Categorys:hover{
  color: #fff
}
/*#Tiers a#Tier1 {  Specific style for Tier1 link 
  color: #38eca6;
}*/

.dblock { /* Block display utility class */
  display: inline-block;
  border: 1px solid goldenrod;
  color: #000;
  text-align: center;
  margin: 1px;
  padding: 0 2px;
  background-color: rgba(255, 255, 255, 0.2);
  vertical-align: top;
}
p.dblock { /* Specific style for paragraphs with class 'dblock' */
  margin: 5px;
  background-color: rgba(255, 204, 0, 0.5);
}

.dblock u { /* Style for underlined text inside .dblock */
  font-size: 16px;
  font-family: "Segoe UI Symbol", sans-serif;
  vertical-align: middle;
  text-decoration: none;
}
#Tiers a.chapter0 {color:#999ea8}
#Tiers a.chapter1 {color:#38eca6}
#Tiers a.chapter2 {color:#ffab54}
#Tiers a.chapter3 {color:#fc596f}
#Tiers a.chapter0:hover {color:#fff}


/* Media Queries for responsive design */
@media screen and (min-width: 950px) { /* Large screens */
}
@media screen and (min-width: 670px) and (max-width: 950px) { /* Medium screens */
}
@media screen and (max-width: 800px) { /* Small screens */
#Beginner_chapters{
width: 99%;
min-width: 350px;}
.createdby {
  float: left;
  margin-right: 16px;
}
details iframe {
  float: none;
}
}
@media only screen and (max-height: 575.98px) and (orientation: landscape) { /* Landscape mode on small screens */
}
@media all and (display-mode: standalone) 

{ /* Standalone display mode */
body {}
}

#cookieChoiceInfo { /* Cookie consent info */
  display: block;
}


details[open] summary~* {
  animation: sweep .5s ease-in-out;
}

@keyframes sweep {
  0% {
    opacity: 0;
    transform: translateY(-10px)
  }

  100% {
    opacity: 1;
    transform: translateY(0)
  }
}