/*
  Name:       lucario
  Author:     Raphael Amorim

  Original Lucario color scheme (https://github.com/raphamorim/lucario)
*/

.cm-s-lucario.CodeMirror, .cm-s-lucario .CodeMirror-gutters {
  background-color: #2b3e50 !important;
  color: #f8f8f2 !important;
  border: none;
}
/* .cm-s-lucario .CodeMirror-gutters { color: #2b3e50; } */

.cm-s-lucario .CodeMirror-gutters { background: #002240; border-right: 1px solid #aaa; margin-right: 2px;}
.cm-s-lucario .CodeMirror-guttermarker { color: #ffee80; }
.cm-s-lucario .CodeMirror-guttermarker-subtle { color: #d0d0d0; }

.cm-s-lucario .CodeMirror-cursor { border-left: solid thin #E6C845; }
.cm-s-lucario .CodeMirror-linenumber { color: #f8f8f2; }
.cm-s-lucario .CodeMirror-selected { background: #243443; }
.cm-s-lucario .CodeMirror-line::selection, .cm-s-lucario .CodeMirror-line > span::selection, .cm-s-lucario .CodeMirror-line > span > span::selection { background: #243443; }
.cm-s-lucario .CodeMirror-line::-moz-selection, .cm-s-lucario .CodeMirror-line > span::-moz-selection, .cm-s-lucario .CodeMirror-line > span > span::-moz-selection { background: #243443; }
.cm-s-lucario span.cm-comment { color: #5c98cd; }
.cm-s-lucario span.cm-string, .cm-s-lucario span.cm-string-2 { color: #E6DB74; }
.cm-s-lucario span.cm-number { color: #ca94ff; }
.cm-s-lucario span.cm-variable { color: #f8f8f2; }
.cm-s-lucario span.cm-variable-2 { color: #f8f8f2; }
.cm-s-lucario span.cm-def { color: #72C05D; }
.cm-s-lucario span.cm-operator { color: #66D9EF; }
.cm-s-lucario span.cm-keyword { color: #ff6541; }
.cm-s-lucario span.cm-atom { color: #bd93f9; }
.cm-s-lucario span.cm-meta { color: #f8f8f2; }
.cm-s-lucario span.cm-tag { color: #ff6541; }
.cm-s-lucario span.cm-attribute { color: #66D9EF; }
.cm-s-lucario span.cm-qualifier { color: #72C05D; }
.cm-s-lucario span.cm-property { color: #f8f8f2; }
.cm-s-lucario span.cm-builtin { color: #72C05D; }
.cm-s-lucario span.cm-variable-3, .cm-s-lucario span.cm-type { color: #ffb86c; }

.cm-s-lucario .CodeMirror-activeline-background { background: #243443; }
.cm-s-lucario .CodeMirror-matchingbracket { text-decoration: underline; color: white !important; }

#background{
  position:absolute;
  top:0px;
  left:0px;
  z-index: -5;
}

.styleBtn{
  font-size: 1.5em;
  padding: 10px 20px;
  border: #40476D solid;
  transition: 0.25s;
  color:#40476D;
  background-color: #fff;
}
  
  .styleBtn:hover,
  .styleBtn:focus { 
    border-color: #36C9C6;
    color: #fff;
    box-shadow: inset 0 0 0 2em #36C9C6;
  }


.circle {
  border-radius: 100%;
  min-width: 1em;
  min-height: 1.5em;
  border: #40476D solid 2px;
}

#py-description{
  width:100px;
  text-align: center;
}

.title{
  /* text-shadow: -2px -2px 0 #9EE5E4,2px -2px 0 #9EE5E4; */
  font-family: 'Lobster', cursive;
  letter-spacing: 5px;
  text-shadow: 2px 2px 0 #36C9C6,-2px -2px 0 #e0e0e0,2px -2px 0 #e0e0e0,-2px 2px 0 #e0e0e0,1px 1px 0 #36C9C6;
  color:#40476D
}

.subtitle,.link,#py-description{
  color:#40476D
}

.link:hover{
  /* text-decoration: none; */
  color:#36C9C6;
  text-decoration-style: dotted;
text-decoration-thickness: 0.2rem;
text-underline-offset: 5px;
}

#modal {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(0,0,0,.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 5;
    flex-direction:row-reverse;
    
}

#close_btn_container{
  height:400px;
  display:flex;
  justify-content:flex-start;
  flex-direction:column;
}

.modal__window {
  position: relative;
  background-color: white;
  padding: 2em 2.5em;
  width:500px;
  height:400px;
  overflow:scroll;
  color:#40476D
}

.modal__close {
  position: relative;
  top: 0px;
  right: 0;
  z-index: 6;
}

#modal:not(:target) {
    visibility: hidden;
    opacity: 0;
}

#closeBtn{
  position:relative;
  top:-20px;
  right:30px;
  z-index:10;
}

strong{
  color:red
}