@import url('normalize.css');
@import url('external/style_docs.css');

:root {
    --bgcol: rgb(247,246,237);
    --peach: rgb(255, 229, 180);
    --coral: rgb(255, 187, 110);
    --pink: rgb(255, 218, 239);
    --yellow: rgb(255, 255, 205);
    --green: rgb(202 252 202);
    --blue: rgb(186, 234, 240);
    --dark-blue: #084298;
    --purple: rgb(211, 198, 221);
    --mizuiro: rgb(212, 230, 240);
    --gray: rgb(200,200,200);
}

*, ::after, ::before {
  box-sizing: border-box;
}

body {
  font-family: 'Carme', sans-serif;
  margin: 0;
  padding: 0;
  line-height: 1.25;
  background-color: #F7F6ED;
}

pre {
  /* make pre work on mobile devices */
  overflow-x: auto;
  background-color: white;
  padding-top: .75em;
  padding-bottom: .75em;
  padding-left: 2em;
  padding-right: .75em;
  max-width: 100ch;
}

td > pre {
  /* no extra padding for preformatted code in a table */
  padding: 0;
}

code{
  background-color: white;
  padding: 2px 5px;
  display: inline;
  margin: 1px 0;
  font-family: monospace;
  font-weight: 600;
/*  border: 1px dashed rgba(0,0,0,0.3); */
}

pre > code{
  border: none;
  font-weight: normal;
  padding: 0;
  margin: 0;
}

p {
  text-align: left;
  line-height: 1.5;
  max-width: 100ch;
}

table pre {
  overflow: initial;
}

/* img should not lead to overflow i.e. on mobile devices */
img {
  max-width: 100%;
}

.gray {
  background-color: var(--gray) !important;
}

.mizuiro {
  background-color: var(--mizuiro) !important;
}

.peach {
  background-color: var(--peach) !important;
}

.coral {
  background-color: var(--coral) !important;
}

.pink {
  background-color: var(--pink) !important;
}

.yellow {
  background-color: var(--yellow) !important;
}

.green {
  background-color: var(--green) !important;
}

.blue {
  background-color: var(--blue) !important;
}

.purple {
  background-color: var(--purple) !important;
}

.white {
  background-color: white !important;
}

.videoContainer {
  position: relative;
  text-align: center;
  background-size: contain;
  color: white;
}

.videoLink {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.logintext {
  width: 118px;
  color: #333;
  padding: 2px 2px 2px 2px;
  line-height: 1.2;
  border-radius: 3px;
  border: 1px solid #ccc;
  font-size: .8rem;
  letter-spacing: 1px;
}

.loginbutton {
  border: 0;
  padding: 2px 20px;
  line-height: 1.2;
  font-size: 1rem;
  text-align: center;
  color: #a4a;
  border-radius: 1px;
  background-color: rgba(220, 220, 220, 1);
  background-image: linear-gradient(to top left,
                                    rgba(0, 0, 0, .2),
                                    rgba(0, 0, 0, .2) 30%,
                                    rgba(0, 0, 0, 0));
  white-space: nowrap;
}

.loginbutton:hover,
.loginbutton:focus {
  background-color: rgba(230, 230, 230, 1);
}

.loginbutton:active {
  font-size: 1rem;
  color: #727;
  background-color: rgba(205, 205, 205, 1);
}

.navtitle{
  display: inline-block;
}

.mydir {
  color: #80f;
  font-weight: bold;
}

.innerlink {
  color: #00f;
  cursor: pointer;
}
.innerlink:hover,
.innerlink:focus {
  text-decoration-color: #44f;
  font-weight: bold;
  color: #44f;
}
.innerlink:active {
  text-decoration-color: #44f;
  color: #44f;
}

a {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}
p    a,
li   a {
    /* within text: underline to make clear this is a link */
  text-decoration-line: underline;
}
a:hover,
a:focus {
  cursor: pointer;
  font-weight: bold;
}
.navtitle a:hover,
.navtitle a:focus,
p    a:hover,
p    a:focus,
li   a:hover,
li   a:focus {
    /* in navigation title, do not use bold but shadow to keep width constant: */
  font-weight: normal;
  text-decoration-line: underline;
  text-shadow: 0 0 .7px #333, 0 0 .7px #333, 0 0 .7px #333;
}

a:active {
  text-decoration-color: #44f;
  color: #44f;
  cursor: pointer;
}

a:visited:hover,
a:visited:focus {
  cursor: pointer;
  font-weight: bold;
}

.nav {
  font-size: 2rem;
  color: #00f;
  cursor: pointer;
  display: inline-block;
  text-decoration-line: none;
}

.nav:hover,
.nav:focus {
  transform: scale(1.3);
  color: #66f;
}
.nav:active {
  color: #88f;
}
.nav:visited {
  color: #00d;
  text-decoration-line: none;
}
.nav:visited:hover,
.nav:visited:focus {
  color: #44d;
  text-decoration-line: none;
}

.navdead {
  font-size: 2rem;
  text-decoration-color: #ccc;
  color: #ccc;
  display: inline-block;
}

.attractivebutton {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border: 0;
  padding: 5px 15px;
  margin: 10px 0;
  font-size: 1rem;
  text-align: center;
  color: #fff;
  text-shadow:	-1px -1px 0 #080,
		1px -1px 0 #080,
		-1px 1px 0 #080,
		1px 1px 0 #080;
  font-weight: bold;
  border-radius: 10px;
  background-color: rgba(0, 220, 0, 1);
  background-image: linear-gradient(to top left,
                                    rgba(0, 0, 0, .2),
                                    rgba(0, 0, 0, .2) 30%,
                                    rgba(0, 0, 0, 0));
  vertical-align: baseline;
  text-decoration-line: none;
}

.attractivebutton:hover,
.attractivebutton:focus {
  background-color: rgba(0, 240, 0, 1);
  color: #fff;
}

.attractivebutton:active {
  background-color: rgba(120, 255, 120, 1);
}

.attractivebutton:visited {
  color: #dfd;
  background-color: rgba(0, 220, 0, 1);
  background-image: linear-gradient(to top left,
                                    rgba(0, 0, 0, .2),
                                    rgba(0, 0, 0, .2) 30%,
                                    rgba(0, 0, 0, 0));
  text-decoration-line: none;
}

.attractivebutton:visited:hover,
.attractivebutton:visited:focus {
  background-color: rgba(120, 255, 120, 1);
  color: #fff;
  text-decoration-line: none;
}

header {
  padding: 10px;
  background: #24FF24;
  background-color: #242424;
  color: white;
  border-color: #ff0000;
  opacity: 0.8;
}

header .wrapper{
  display: flex;
  align-items: center;
}

header .wrapper #loginStatus{
  flex-grow: 1;
}

@media (max-width: 768px) {
  main {
    margin: 10px;
  }
}
@media (min-width: 769px) {
  main {
    border-radius: 0.5em;
    border: 1px solid;
    padding: 20px 20px 20px 20px;
    margin: 10px;
  }
}

.codeinput {
  font-family: 'Fira Mono';
  font-size: .8rem;
  letter-spacing: 1px;
  line-height: 1.5;
  border-radius: 5px;
  border: 1px solid #ccc;
  box-shadow: 1px 1px 1px #999;
  letter-spacing: 1px;
}

.runbuttons{
  bottom: 12px;
  /* 53px of ace_gutter + 12px */
  left: 65px;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em;
}

.runbutton {
  border: 0;
  padding: 2px 20px;
  line-height: 1.2;
  font-size: 1rem;
  text-align: center;
  color: #a4a;
  border-radius: 1px;
  background-color: rgba(220, 220, 220, 1);
  background-image: linear-gradient(to top left,
                                    rgba(0, 0, 0, .2),
                                    rgba(0, 0, 0, .2) 30%,
                                    rgba(0, 0, 0, 0));
}

.runbutton:hover,
.runbutton:focus {
  background-color: rgba(230, 230, 230, 1);
}

.runbutton:active {
  font-size: 1rem;
  color: #727;
  background-color: rgba(205, 205, 205, 1);
}

.computeroutput {
  font-family: 'Fira Mono';
  letter-spacing: 1px;
  padding: 5px;
  border: 1px solid #ffff33;
  color: #ffff33;
  background-color: #242424;
  white-space: nowrap;
  overflow: auto;
  height: 100%;
}

button,input[type='button'],input[type='submit'] {
  cursor: pointer;
}

.table-wrapper{
  max-width: 100%;
  overflow-x: auto;
}

table {
  border-collapse: collapse;
  border: 2px solid rgb(200,200,200);
  letter-spacing: 1px;
  font-size: 0.8rem;
}

td, th {
  border: 1px solid rgb(190,190,190);
  padding: 10px 20px;
  max-width: 120ch;
}

th {
  background-color: rgb(235,235,235);
}

td {
  text-align: center;
}

td > * {
  text-align: initial;
}

.tbl-fat-inner-border thead{
  border-bottom: 2px solid black;
}

.tbl-fat-inner-border td:not(:last-child),
.tbl-fat-inner-border th:not(:last-child){
  border-right: 2px solid black;
}

tr:nth-child(even) td {
  background-color: rgb(250,250,250);
}

tr:nth-child(odd) td {
  background-color: rgb(245,245,245);
}

.thsplit {
  /*split table cell with diagonal line:

    using gradient to create a line:
     0   - 48.75% light grey,
    48.75- 49.5 % gradient for antialiasing,
    49.5 - 50.5 % dark grey line, width 1%,
    50.5 - 51.25% gradient for antialiasing,
    51.25-100   % light grey
  */
    background:linear-gradient(to top right,
                               rgb(235,235,235) 48.75%,
                               rgb(190,190,190) 49.5%,
                               rgb(190,190,190) 50.5%,
                               rgb(235,235,235) 51.25%);
}

caption {
  padding: 10px;
}

.boxeditems {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-template-rows: auto 1fr;
  max-width: 100%;
}

.item {
  border-radius: 1.5em;
  border: 1px solid;
  padding: 20px 20px 20px 20px;
  margin: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, .15);
  transition: all .1s linear;
  opacity: 0.8;
  z-index: 1;
}

.item:hover,
.item:focus {
    transform: scale(1.03);
    z-index: 10;
    box-shadow: 0 10px 20px rgba(0, 0, 0, .2);
}


.itemhead {
    position: relative;
    font-size: 1.8rem;
    font-weight: bold;
    padding-bottom: 1rem;
}

.itemtitle {
    width: 80%;
    padding: 0px 0px 0px 0px;
}

.itemicon {
    font-size: 2.8rem;
    position: absolute;
    top: 0px;
    right: 0px;
}

.mymain {
    position: relative;
}

.nav_top .nav_bot {
    z-index: 5;
}

.nav_top .navdead {
  cursor: not-allowed;
}

.nav_left, .nav_right{
  margin-top: 20px;
}

.responsive-container {
  position: relative;
  overflow: hidden;
  width: 100%;
}
.aspect-16-by-9{
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
}

.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

.far {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  font-style: normal;
  display: inline-block;
}

.fa-angle-down:before {
  content: "\f102";
}

.fa-angle-left:before {
  content: "\f104";
}

.fa-angle-right:before {
  content: "\f105";
}

.fa-angle-up:before {
  content: "\f106";
}

.fa-directions:before{
  content: "\f5eb";
}

.fa-spinner:before{
  content: "\f110";
}

.fa-play:before{
  content: "\f04b";
}

.fa-spin {
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% {
   transform:rotate(0deg)
  }
  100% {
   transform:rotate(1turn)
  }
}

.form-control {
  display: block;
  width: 100%;
  padding: .375rem .75rem;
  font-size: 1rem;
  line-height: 1.5;
  color: #495057;
  background-color: #fff;
  border: 1px solid #ced4da;
  border-radius: .25rem;
}

.text-center{
  text-align: center;
}

.mx-auto{
  margin-left: auto !important;
  margin-right: auto !important;
}

.d-block{
  display: block;
}

.d-inline-block{
  display: inline-block;
}

.mb-05{
  margin-bottom: 0.5rem;
}

.mb-15{
  margin-bottom: 1.5rem;
}

.my-20{
  margin: 2em 0;
}

a[target="_blank"] {
  text-decoration-line: underline;
}

a[target="_blank"]::after {
  content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAQElEQVR42qXKwQkAIAxDUUdxtO6/RBQkQZvSi8I/pL4BoGw/XPkh4XigPmsUgh0626AjRsgxHTkUThsG2T/sIlzdTsp52kSS1wAAAABJRU5ErkJggg==);
  margin: 0 0.3em;
}

.d-flex{
  display: flex !important;
}

.justify-content-between{
  justify-content: space-between;
}

.justify-content-center{
  justify-content: center;
}

.justify-content-end{
  justify-content: flex-end;
}

.flex-wrap{
  flex-wrap: wrap;
}

.ace_editor{
  font-family: 'Fira Mono';
  font-size: 1rem;
}

.ansi-black-fg { color : rgb(0, 0, 0) }
.ansi-red-fg { color : rgb(187, 0, 0) }
.ansi-green-fg { color : rgb(0, 187, 0) }
.ansi-yellow-fg { color : rgb(187, 187, 0) }
.ansi-blue-fg { color : rgb(45, 130, 179) }
.ansi-magenta-fg { color : rgb(187, 0, 187) }
.ansi-cyan-fg { color : rgb(0, 187, 187) }
.ansi-white-fg { color : rgb(255, 255, 255) }
.ansi-bright-black-fg { color : rgb(85, 85, 85) }
.ansi-bright-red-fg { color : rgb(255, 85, 85) }
.ansi-bright-green-fg { color : rgb(0, 255, 0) }
.ansi-bright-yellow-fg { color : rgb(255, 255, 85) }
.ansi-bright-blue-fg { color : rgb(85, 85, 255) }
.ansi-bright-magenta-fg { color : rgb(255, 85, 255) }
.ansi-bright-cyan-fg { color : rgb(85, 255, 255) }
.ansi-bright-white-fg { color : rgb(255, 255, 255) }

.w-75{
  width: 75px;
}

.w-100{
  width: 100%;
}

.position-relative{
  position: relative;
}

.position-absolute{
  position: absolute;
}

.overflow-scroll{
  overflow: scroll;
}

.text-overflow-ellipsis{
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.align-items-center {
  align-items: center !important;
}
.alert-primary {
  color: var(--dark-blue);
  background-color: var(--blue);
  border-color: var(--blue);
}
.alert-warning {
  background-color: var(--peach);
}
.alert {
  position: relative;
  padding: 1rem 1rem;
  margin-bottom: 1rem;
  border: 1px solid transparent;
  border-top-color: transparent;
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-left-color: transparent;
  border-radius: .25rem;
  max-width: 80ch;
}
.me-2 {
  margin-right: .5rem !important;
}

/* hide h2 in generated file content/design/pages/fum_file.html */
h2#_file_formats{
  display: none;
}

.twitter-follow-button {
  background: #1c95de;
  color: #FFF;
  padding: 0.7rem 2.9rem;
  font-weight: 500;
  display: inline-flex;
  outline: none;
  border: none;
  cursor: pointer;
  box-shadow: 0px 14px 47px 0px rgba(28, 28, 28, 0.24);
  border-radius: 70px;
  text-decoration: none;
  transition: all 100ms ease-in-out;
}

.twitter-follow-button[target="_blank"]::after{
  content: none;
}

.twitter-follow-button:hover {
  box-shadow: none
}

/*
this hides the custom ace_scrollbar
and enables native scrollbars in ace_scroller
*/
.ace_scrollbar{
  display: none !important;
}
.ace_scroller{
  overflow-x: auto !important;
}

.runcode-wrapper {
  max-width: 102rem;
  margin: 1.5em 0;
}

.gap-25 {
  gap: 0.25rem;
}

#benchmark-charts {
  display: flex;
  flex-wrap: wrap;
  gap: 2em;
  max-width: initial;
}

.max-width-60-ch {
  max-width: 60ch;
}

.last-changed{
  font-size: small;
  text-align: right;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* increase contrast in ace mode editor for accessibility */
.ace_editor .ace_comment {
  color: #36614c !important;
}
.ace_variable.ace_other{
  color: #24606c !important;
}

.file-tree {
  font-family: 'Fira Mono', 'monospace';
  font-size: 1.1rem;
  line-height: 1.17;
}