/*Titles*/

h1{
font-size: 2.5em;
line-height: normal;
}

h2{
font-size: 2.0em;
line-height: normal;
}

h3{
font-size: 1.8em;
line-height: normal;
}

h4{
font-size: 1.5em;
line-height: normal;
}

h5{
font-size: 1em;
line-height: normal;
}

h6{
font-size: 0.7em;
line-height: normal;
}

@media screen and (max-width: 600px) {
  h1{
    font-size: 9vw;
  }
}

/* Spoiler Blocks */

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

details {
  border-style: groove;
  border-width: 2px;
  border-radius: 5px;
  padding: 5px;
  margin:auto;
  margin-top: 30px;
  background-color: rgb(196, 196, 196);
  width: 90%;
}

details > summary{
  font-weight: bold;
  font-size: large;
}

@keyframes sweep {
  0%    {opacity: 0; margin-bottom: -20px}
  100%  {opacity: 1; margin-bottom: 0px}
}

/*Latex Environments*/

.definition {

  display: block;

  padding: 12px;

  margin: 12px 0;

  border-style: solid;
  border-width: 2px;

  font-style: normal;

}

.definition:before {
  white-space: pre-wrap;
  content: "Definition (" attr(title) ") \A\A";

  font-size: 1.1em;

  font-weight: bold;

  font-style: normal;
}

.example {

  display: block;

  padding: 12px;

  margin: 12px 0;

  border-style: solid;
  border-width: 2px;

  font-style: normal;

}

.example:before {
  white-space: pre-wrap;
  content: "Example (" attr(title) ") \A\A";

  font-size: 1.1em;

  font-weight: bold;

  font-style: normal;
}

.exercise {
  display: block;
  padding: 12px;
  margin: 12px 0;
  border-style: solid;
  border-width: 2px;
  font-style: normal;
}

.theorem {
  display: block;
  padding: 12px;
  margin: 12px 0;
  border-style: solid;
  border-width: 2px;
  font-style: normal;
}

.theorem::before {
  content: "Theorem \A\A";
  font-size: 1.1em;
  font-weight: bold;
  font-style: normal;
}

.theorem[title]::before {
  content: "Theorem (" attr(title) ") \A\A";
}

.exercise::before {
  content: "Exercise \A\A";

  font-size: 1.1em;

  font-weight: bold;

  font-style: normal;
}

.exercise[title]::before {
  content: "Exercise (" attr(title) ") \A\A";
}

mjx-container{
  min-width:0 !important;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 10px; 
}

.todo {
  background-color: #ffdddd;
  border-left: 6px solid #f44336;
}