@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
@import "flag-icons/css/flag-icons.min.css";

/* ––––––––––––––––––––––––––––––––––––––––––––––––––
Based on: https://codepen.io/nickelse/pen/YGPJQG
Influenced by: https://sproutsocial.com/
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* #Mega Menu Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.mega-menu {
  display: none;
  left: 0;
  text-align: left;
  width: 100%;
}

/* #hoverable Class Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.hoverable {
  position: static;
}

.hoverable > a:after {
  content: "\25BC";
  font-size: 10px;
  padding-left: 6px;
  position: relative;
  top: -1px;
}

.hoverable:hover .mega-menu {
  display: block;
}

/* #toggle Class Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.toggleable > label:after {
  content: "\25BC";
  font-size: 10px;
  padding-left: 6px;
  position: relative;
  top: -1px;
  line-height: 1;
}

.toggle-input {
  display: none;
}
.toggle-input:not(checked) ~ .mega-menu {
  display: none;
}

.toggle-input:checked ~ .mega-menu {
  display: block;
}

.toggle-input:checked + label {
  color: white;
  background: #7c6f89; /*@apply bg-purple-800 */
}

.toggle-input:checked ~ label:after {
  content: "\25B2";
}

/* #slider Class Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */

input:checked ~ .dot {
  transform: translateX(100%);
}

/* Lesson Class Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */
section.lesson-pagination p.excerpt {
  font-size: 0.9rem;
}

.excerpt-box > p {
  margin: 0;
}

p.excerpt > a {
  color: #776C84;
}

pre, code {
  direction: ltr;
}

code.inline {
  unicode-bidi: embed;
}

.makeup .hll {background-color: #f4f5f6}
.makeup {background-color: #ffffff}.makeup .unselectable {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.makeup table td { padding: 2px; }
.makeup table pre { margin: 0; }
.makeup .cm {
  color: #717160;
  font-style: italic;
}
.makeup .cp {
  color: #999999;
  font-weight: bold;
}
.makeup .c1 {
  color: #717160;
  font-style: italic;
}
.makeup .cs {
  color: #999999;
  font-weight: bold;
  font-style: italic;
}
.makeup .c, .makeup .cd {
  color: #717160;
  font-style: italic;
}
.makeup .err {
  color: #a61717;
  background-color: #e3d2d2;
}
.makeup .gd {
  color: #000000;
  background-color: #ffdddd;
}
.makeup .ge {
  color: #000000;
  font-style: italic;
}
.makeup .gr {
  color: #aa0000;
}
.makeup .gh {
  color: #999999;
}
.makeup .gi {
  color: #000000;
  background-color: #ddffdd;
}
.makeup .go {
  color: #888888;
}
.makeup .gp {
  color: #555555;
}
.makeup .gs {
  font-weight: bold;
}
.makeup .gu {
  color: #aaaaaa;
}
.makeup .gt {
  color: #aa0000;
}
.makeup .kc {
  color: #000000;
  font-weight: bold;
}
.makeup .kd {
  color: #000000;
  font-weight: bold;
}
.makeup .kn {
  color: #000000;
  font-weight: bold;
}
.makeup .kp {
  color: #000000;
  font-weight: bold;
}
.makeup .kr {
  color: #000000;
  font-weight: bold;
}
.makeup .kt {
  color: #445588;
  font-weight: bold;
}
.makeup .k, .makeup .kv {
  color: #000000;
  font-weight: bold;
}
.makeup .mf {
  color: #008080;
}
.makeup .mh {
  color: #008080;
}
.makeup .il {
  color: #008080;
}
.makeup .mi {
  color: #008080;
}
.makeup .mo {
  color: #008080;
}
.makeup .m, .makeup .mb, .makeup .mx {
  color: #008080;
}
.makeup .sb {
  color: #d14;
}
.makeup .sc {
  color: #d14;
}
.makeup .sd {
  color: #d14;
}
.makeup .s2 {
  color: #d14;
}
.makeup .se {
  color: #d14;
}
.makeup .sh {
  color: #d14;
}
.makeup .si {
  color: #d14;
}
.makeup .sx {
  color: #d14;
}
.makeup .sr {
  color: #008521;
}
.makeup .s1 {
  color: #d14;
}
.makeup .ss {
  color: #990073;
}
.makeup .s {
  color: #d14;
}
.makeup .na {
  color: #008080;
}
.makeup .bp {
  color: #717160;
}
.makeup .nb {
  color: #007AA3;
}
.makeup .nc {
  color: #445588;
  font-weight: bold;
}
.makeup .no {
  color: #008080;
}
.makeup .nd {
  color: #3c5d5d;
  font-weight: bold;
}
.makeup .ni {
  color: #800080;
}
.makeup .ne {
  color: #990000;
  font-weight: bold;
}
.makeup .nf {
  color: #990000;
  font-weight: bold;
}
.makeup .nl {
  color: #990000;
  font-weight: bold;
}
.makeup .nn {
  color: #555555;
}
.makeup .nt {
  color: #000080;
}
.makeup .vc {
  color: #008080;
}
.makeup .vg {
  color: #008080;
}
.makeup .vi {
  color: #008080;
}
.makeup .nv {
  color: #008080;
}
.makeup .ow {
  color: #000000;
  font-weight: bold;
}
.makeup .o {
  color: #000000;
  font-weight: bold;
}
.makeup .w {
  color: #000;
}
.makeup {
  background-color: #f8f8f8;
}


/* Originally taken from: https://tmbb.github.io/makeup_demo/elixir.html#monokai */
.dark {
  --dark-comment-color: #cbc1c8;
  color: #f8f8f2;
}

.dark .makeup .hll {
  background-color: #49483e;
}
.dark .makeup .bp {
  color: #f8f8f2;
} /* :name_builtin_pseudo */
.dark .makeup .c {
  color: var(--dark-comment-color);
} /* :comment */
.dark .makeup .c1 {
  color: var(--dark-comment-color);
} /* :comment_single */
.dark .makeup .ch {
  color: var(--dark-comment-color);
} /* :comment_hashbang */
.dark .makeup .cm {
  color: var(--dark-comment-color);
} /* :comment_multiline */
.dark .makeup .cp {
  color: var(--dark-comment-color);
} /* :comment_preproc */
.dark .makeup .cpf {
  color: var(--dark-comment-color);
} /* :comment_preproc_file */
.dark .makeup .cs {
  color: var(--dark-comment-color);
} /* :comment_special */
.dark .makeup .dl {
  color: #e6db74;
} /* :string_delimiter */
.dark .makeup .err {
  color: #960050;
  background-color: #1e0010;
} /* :error */
.dark .makeup .fm {
  color: #a6e22e;
} /* :name_function_magic */
.dark .makeup .gd {
  color: #ff5385;
} /* :generic_deleted */
.dark .makeup .ge {
  font-style: italic;
} /* :generic_emph */
.dark .makeup .gi {
  color: #a6e22e;
} /* :generic_inserted */
.dark .makeup .gp {
  color: var(--dark-comment-color);
} /* :generic_prompt */
.dark .makeup .gs {
  font-weight: bold;
} /* :generic_strong */
.dark .makeup .gu {
  color: var(--dark-comment-color);
} /* :generic_subheading */
.dark .makeup .gt {
  color: #ff5385;
  font-weight: bold;
} /* :generic_traceback */
.dark .makeup .il {
  color: #ae81ff;
} /* :number_integer_long */
.dark .makeup .k {
  color: #66d9ef;
} /* :keyword */
.dark .makeup .kc {
  color: #66d9ef;
} /* :keyword_constant */
.dark .makeup .kd {
  color: #66d9ef;
} /* :keyword_declaration */
.dark .makeup .kn {
  color: #ff5385;
} /* :keyword_namespace */
.dark .makeup .kp {
  color: #66d9ef;
} /* :keyword_pseudo */
.dark .makeup .kr {
  color: #66d9ef;
} /* :keyword_reserved */
.dark .makeup .kt {
  color: #66d9ef;
} /* :keyword_type */
.dark .makeup .l {
  color: #ae81ff;
} /* :literal */
.dark .makeup .ld {
  color: #ae81ff;
} /* :literal_date */
.dark .makeup .m {
  color: #ae81ff;
} /* :number */
.dark .makeup .mb {
  color: #ae81ff;
} /* :number_bin */
.dark .makeup .mf {
  color: #ae81ff;
} /* :number_float */
.dark .makeup .mh {
  color: #ae81ff;
} /* :number_hex */
.dark .makeup .mi {
  color: #ae81ff;
} /* :number_integer */
.dark .makeup .mo {
  color: #ae81ff;
} /* :number_oct */
.dark .makeup .n {
  color: #f8f8f2;
} /* :name */
.dark .makeup .na {
  color: #a6e22e;
} /* :name_attribute */
.dark .makeup .nb {
  color: #f8f8f2;
} /* :name_builtin */
.dark .makeup .nc {
  color: #a6e22e;
} /* :name_class */
.dark .makeup .nd {
  color: #a6e22e;
} /* :name_decorator */
.dark .makeup .ne {
  color: #a6e22e;
} /* :name_exception */
.dark .makeup .nf {
  color: #a6e22e;
} /* :name_function */
.dark .makeup .ni {
  color: #f8f8f2;
} /* :name_entity */
.dark .makeup .nl {
  color: #f8f8f2;
} /* :name_label */
.dark .makeup .nn {
  color: #f8f8f2;
} /* :name_namespace */
.dark .makeup .no {
  color: #66d9ef;
} /* :name_constant */
.dark .makeup .nt {
  color: #ff5385;
} /* :name_tag */
.dark .makeup .nv {
  color: #f8f8f2;
} /* :name_variable */
.dark .makeup .nx {
  color: #a6e22e;
} /* :name_other */
.dark .makeup .o {
  color: #ff5385;
} /* :operator */
.dark .makeup .ow {
  color: #ff5385;
} /* :operator_word */
.dark .makeup .p {
  color: #f8f8f2;
} /* :punctuation */
.dark .makeup .py {
  color: #f8f8f2;
} /* :name_property */
.dark .makeup .s {
  color: #e6db74;
} /* :string */
.dark .makeup .s1 {
  color: #e6db74;
} /* :string_single */
.dark .makeup .s2 {
  color: #e6db74;
} /* :string_double */
.dark .makeup .sa {
  color: #e6db74;
} /* :string_affix */
.dark .makeup .sb {
  color: #e6db74;
} /* :string_backtick */
.dark .makeup .sc {
  color: #e6db74;
} /* :string_char */
.dark .makeup .sd {
  color: #e6db74;
} /* :string_doc */
.dark .makeup .se {
  color: #ae81ff;
} /* :string_escape */
.dark .makeup .sh {
  color: #e6db74;
} /* :string_heredoc */
.dark .makeup .si {
  color: #e6db74;
} /* :string_interpol */
.dark .makeup .sr {
  color: #e6db74;
} /* :string_regex */
.dark .makeup .ss {
  color: #e6db74;
} /* :string_symbol */
.dark .makeup .sx {
  color: #e6db74;
} /* :string_other */
.dark .makeup .sx {
  color: #e6db74;
} /* :string_sigil */
.dark .makeup .vc {
  color: #f8f8f2;
} /* :name_variable_class */
.dark .makeup .vg {
  color: #f8f8f2;
} /* :name_variable_global */
.dark .makeup .vi {
  color: #f8f8f2;
} /* :name_variable_instance */
.dark .makeup .vm {
  color: #f8f8f2;
} /* :name_variable_magic */
.dark .makeup .w {
  color: #fff;
}

.preload, .preload * {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -ms-transition: none !important;
  -o-transition: none !important;
  transition: none !important;
}

body, body * {
  transition: background-color 0.25s ease, color 0.25s ease;
}

#pick-up-phone {
	translate: 0 100%;
	transition: translate 500ms ease-in-out;
}

#pick-up-phone.is-visible {
	translate: 0 0;
}

#pick-up-overlay {
	opacity: 0;
	pointer-events: none;
	transition: opacity 500ms ease-in-out;
}

#pick-up-overlay.is-on {
	pointer-events: auto;
	opacity: 1;
}

/* Alpine.js */
/* https://alpinejs.dev/directives/cloak */

[x-cloak] { display: none !important; }
