/* my css styles */

/* center figure caption whenever image is centered */
.quarto-figure-center>figure>figcaption {
  margin: auto;
  text-align: center;
}

/*
figcaption {
  margin: auto;
  text-align: center;
}
*/

/* field with of contact form */
.myform {
    width: 500px;
}

/* bring title-meta (autor, date, modified-date) into one line */
#title-block-header.quarto-title-block.default .quarto-title-meta {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-column-gap: 1em;
}

/* draw shadow around figure */
/*taken from custom.scss of Thought Splinters */
.figure-img {
    border: 1px;
    border-style: groove;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px  rgba(0, 0, 0, 0.19);
}

/* vertical aligned
see: https://github.com/quarto-dev/quarto-cli/discussions/1386#discussioncomment-3146433
*/
#vcenter {
  vertical-align: middle;
}

/* a thicker horizontal line (not used at the moment) */
hr.mytitle{
    height: 5px;
    background: black;
}


/* #######################################################################  */
/*                                                                          */
/*                           Theorems and friends                           */
/*  https://www.andreashandel.com/posts/2023-06-13-custom-callouts-quarto/  */
/*                                                                          */
/* #######################################################################  */

/* ##############   Example   ############# */

.my-example {
  margin: 1em 0;
  border: 2px solid gray;
  border-left: 10px solid #36648B;
  border-radius: 10px;
}

.my-example-header {
  margin-left: 0;
  padding-left:  60px;
  padding-top:  15px;
  padding-bottom: 0.1em;
  color: white;
  background-color: #5CACEE;
  border-top-right-radius: 10px;
  font-size: 1em;
  font-weight: bold;
  background-size: 40px;
  background-repeat: no-repeat;
  background-position: 15px center;
  background-image: url("img/icons8/example-64.png");
}


.my-example-container {
  padding-top: 5px;
  padding-left: 10px;
  color: black;
  background-color: white;
  border-bottom-right-radius: 10px;
}

/* ##############   R Code   ############# */

.my-r-code {
  margin: 1em 0;
  border: 2px solid burlywood;
  border-left: 10px solid #8B7355;
  border-radius: 10px;
}

.my-r-code-header {
  margin-left: 0;
  padding-left:  60px;
  padding-top:  15px;
  padding-bottom: 0.1em;
  color: black;
  background-color: #FFD39B;
  border-top-right-radius: 10px;
  font-size: 1em;
  font-weight: bold;
  background-size: 40px;
  background-repeat: no-repeat;
  background-position: 15px center;
  background-image: url("img/icons8/r-code.png");
}

.my-r-code-container {
  padding-top: 5px;
  padding-left: 10px;
  color: black;
  background-color: white;
  border-bottom-right-radius: 10px;
}

/* ##############   Resources   ############# */

.my-resource {
  margin: 1em 0;
  border: 2px solid gray;
  border-left: 10px solid teal;
  border-radius: 10px;
}

.my-resource-header {
  margin-left: 0;
  padding-left:  60px;
  padding-top:  15px;
  padding-bottom: 0.1em;
  color: white;
  background-color: rgb(123, 173, 173);
  border-top-right-radius: 10px;
  font-size: 1em;
  font-weight: bold;
  background-size: 40px;
  background-repeat: no-repeat;
  background-position: 15px center;
  background-image: url("img/icons8/books-48.png");
}

.my-resource-container {
  padding-top: 5px;
  padding-left: 10px;
  color: black;
  background-color: white;
  border-bottom-right-radius: 10px;
}

/* ##############   Procedure   ############# */

.my-procedure {
  margin: 1em 0;
  border: 2px solid #8B7B8B;
  border-left: 10px solid thistle;
  border-radius: 10px;
}

.my-procedure-header {
  margin-left: 0;
  padding-left:  60px;
  padding-top:  15px;
  padding-bottom: 0.1em;
  color: black;
  background-color: #FFE1FF;
  border-top-right-radius: 10px;
  font-size: 1em;
  font-weight: bold;
  background-size: 40px;
  background-repeat: no-repeat;
  background-position: 15px center;
  background-image: url("img/icons8/procedure-32.png");
}

.my-procedure-container {
  padding-top: 5px;
  padding-left: 10px;
  color: black;
  background-color: white;
  border-bottom-right-radius: 10px;
}