/* https://pustelto.com/blog/optimizing-css-for-faster-page-loads/ */
:root{
  --main-color : 87,147,240;
  --main-theme : rgb(var(--main-color));
  --gutter-theme : rgba(46,48,63,0);
  --background-theme : rgba(0,35,48,0); 
  --red : rgb(250, 0, 0);
}


/* Extra CSS for mkdocs-enumerate-headings-plugin */ 
.enumerate-headings-plugin {
  filter: opacity(35%);
}

.wrapper_h {
  border: solid 1px;
  border-radius: 6px;
  border-color: var(--main-theme);
}

.wrapper {
border: solid 1px;
border-radius: 6px;
border-color: var(--main-theme);
display: flex;
flex-wrap: wrap;
flex: 1 1 auto;
}

.wrapper > * {
flex: 1 1 300px;
}

.interior_wrapper {
border-right: 1px solid ;
width:50%;
}

.line{
border-bottom : 1px solid var(--main-theme);
}

.ace_editor {
font-size:1em;
margin: 4px 4px;
height: 200px;
background: var(--background-theme);
}

.term_editor {
--color:var(--main-theme);
--background: var(--gutter-theme);
--size : 1.4;
height: 205px;
}

.term_editor_h {
--color:var(--main-theme);
--background: var(--gutter-theme);
--size : 1.4;
height: 150px;
}

/* First apply terminal CSS */
.terminal {
width: 50%;
}

/* Then change width to 100% */
.terminal_f {
--color:var(--main-theme);
--background: var(--gutter-theme);
--size : 1.4;
border: solid 1px;
border-radius: 6px;
border-color: var(--main-theme);
height: 205px; 
width: 100%;
}

/* Test to decide which REPL is best */
.terminal_f_h {
--color:var(--main-theme);
--background: var(--gutter-theme);
--size : 1.4;
height: 150px; 
width: 100%;
}


textarea {
width: 100%;
resize: vertical;
}

textarea:focus {
  outline: none;
}

.hide {
display:none;
}

.blinking {
width: 8px;
height: 20.84375px;
background-color: var(--main-theme);
animation-name: blinking;
animation-duration: 1s;
animation-iteration-count: infinite;
display: inline-block;
}

/* overloading ace gutters to hide them behind navbar */
.ace_gutter {  
z-index: 1; /* might be a bit drastic */
}

.ace_gutter > .ace_layer {
color: var(--main-theme);
background-color: var(--gutter-theme);
border-right: solid 1px var(--main-theme); 
}

/* modification of ace-tomorrow-night-bright theme */
.ace-tomorrow-night-bright .ace_gutter {
background-color: var(--gutter-theme);
color: #DEDEDE;
}

.ace-crimson-editor .ace_gutter {
background-color: var(--gutter-theme);
color: #DEDEDE;
}


.compteur {
float: right;
color: var(--main-theme);
font-size : 1.2em
}

.compteur::before {
content: "Evaluations restantes : ";
color: var(--main-theme);
font-size : 0.8em
}

.if>rect {
/*fill: var(--main-theme) !important;*/
stroke: #ff3838 !important;
stroke-width: 1.5px !important;
}

.admonition.hint.inline.end {
min-width: 30em;
height: auto;
}

.can_wrapper {
position: relative;
width: 100%;
height: 400px;
}

.can_wrapper canvas {
position: absolute;
top: 0;
left: 0;
}

.tooltip {
  padding: 5px 4px 0px 0px;
  position: relative;
  display: inline-block;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 90px;
  background-color: var(--main-theme);
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  position: absolute;
  z-index: 1;
  top: 110%;
  left: 50%;
  margin-left: -45px; /* Use half of the width (120/2 = 60), to center the tooltip */
  font-size: 0.9em;
}

.tooltip .tooltiptext::after {
  content: " ";
  position: absolute;
  bottom: 100%;  /* At the top of the tooltip */
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent var(--main-theme) transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}
  
.tooltip > img {
  width: 32px;
  border: 1px solid rgba(85,119,196);
  padding: 3px;
  border-radius: 9px;
  box-shadow: 2px 2px var(--main-theme);
  background-image: linear-gradient(to bottom, rgb(191, 255, 255), 15%, rgba(var(--main-color),0.8));
}

.tooltip:hover > img {
  text-shadow: 0px 0px rgba(87,147,240,0);
  position:relative; 
  left: 1px; 
  top: 1px;
  cursor: pointer;
  font-size : 2em;
  box-shadow: 0px 0px rgba(87,147,240,0);
}
/* 

[data-md-color-scheme="slate"] {
  --md-primary-fg-color: var(--red);
} */