@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');

/*-----------------------------------------------------------------
RESET
-----------------------------------------------------------------*/

/** * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/) * http://cssreset.com */html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video {	margin: 0;	padding: 0;	border: 0;	font-size: 100%;	font: inherit;	vertical-align: baseline;}/* HTML5 display-role reset for older browsers */article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {	display: block;}body {	line-height: 1;}ol, ul {	list-style: none;}blockquote, q {	quotes: none;}blockquote:before, blockquote:after,q:before, q:after {	content: '';	content: none;}table {	border-collapse: collapse;	border-spacing: 0;}

/*-----------------------------------------------------------------
CSS LOGO
-----------------------------------------------------------------*/

.pixelart-to-css {
  box-shadow: 1px 1px 0 0 rgba(255, 255, 255, 1), 2px 1px 0 0 rgba(255, 255, 255, 1), 1px 2px 0 0 rgba(255, 255, 255, 1), 2px 2px 0 0 rgba(255, 255, 255, 1), 2px 4px 0 0 rgba(255, 255, 255, 1), 3px 4px 0 0 rgba(255, 255, 255, 1), 6px 4px 0 0 rgba(255, 255, 255, 1), 7px 4px 0 0 rgba(255, 255, 255, 1), 14px 4px 0 0 rgba(255, 255, 255, 1), 15px 4px 0 0 rgba(255, 255, 255, 1), 16px 4px 0 0 rgba(255, 255, 255, 1), 17px 4px 0 0 rgba(255, 255, 255, 1), 2px 5px 0 0 rgba(255, 255, 255, 1), 3px 5px 0 0 rgba(255, 255, 255, 1), 6px 5px 0 0 rgba(255, 255, 255, 1), 7px 5px 0 0 rgba(255, 255, 255, 1), 14px 5px 0 0 rgba(255, 255, 255, 1), 15px 5px 0 0 rgba(255, 255, 255, 1), 16px 5px 0 0 rgba(255, 255, 255, 1), 17px 5px 0 0 rgba(255, 255, 255, 1), 2px 6px 0 0 rgba(255, 255, 255, 1), 3px 6px 0 0 rgba(255, 255, 255, 1), 6px 6px 0 0 rgba(255, 255, 255, 1), 7px 6px 0 0 rgba(255, 255, 255, 1), 8px 6px 0 0 rgba(255, 255, 255, 1), 9px 6px 0 0 rgba(255, 255, 255, 1), 12px 6px 0 0 rgba(255, 255, 255, 1), 13px 6px 0 0 rgba(255, 255, 255, 1), 14px 6px 0 0 rgba(255, 255, 255, 1), 15px 6px 0 0 rgba(255, 255, 255, 1), 18px 6px 0 0 rgba(255, 255, 255, 1), 19px 6px 0 0 rgba(255, 255, 255, 1), 2px 7px 0 0 rgba(255, 255, 255, 1), 3px 7px 0 0 rgba(255, 255, 255, 1), 6px 7px 0 0 rgba(255, 255, 255, 1), 7px 7px 0 0 rgba(255, 255, 255, 1), 8px 7px 0 0 rgba(255, 255, 255, 1), 9px 7px 0 0 rgba(255, 255, 255, 1), 12px 7px 0 0 rgba(255, 255, 255, 1), 13px 7px 0 0 rgba(255, 255, 255, 1), 14px 7px 0 0 rgba(255, 255, 255, 1), 15px 7px 0 0 rgba(255, 255, 255, 1), 18px 7px 0 0 rgba(255, 255, 255, 1), 19px 7px 0 0 rgba(255, 255, 255, 1), 2px 8px 0 0 rgba(255, 255, 255, 1), 3px 8px 0 0 rgba(255, 255, 255, 1), 6px 8px 0 0 rgba(255, 255, 255, 1), 7px 8px 0 0 rgba(255, 255, 255, 1), 10px 8px 0 0 rgba(255, 255, 255, 1), 11px 8px 0 0 rgba(255, 255, 255, 1), 14px 8px 0 0 rgba(255, 255, 255, 1), 15px 8px 0 0 rgba(255, 255, 255, 1), 16px 8px 0 0 rgba(255, 255, 255, 1), 17px 8px 0 0 rgba(255, 255, 255, 1), 2px 9px 0 0 rgba(255, 255, 255, 1), 6px 9px 0 0 rgba(255, 255, 255, 1), 7px 9px 0 0 rgba(255, 255, 255, 1), 10px 9px 0 0 rgba(255, 255, 255, 1), 11px 9px 0 0 rgba(255, 255, 255, 1), 14px 9px 0 0 rgba(255, 255, 255, 1), 15px 9px 0 0 rgba(255, 255, 255, 1), 2px 10px 0 0 rgba(255, 255, 255, 1), 6px 10px 0 0 rgba(255, 255, 255, 1), 7px 10px 0 0 rgba(255, 255, 255, 1), 14px 10px 0 0 rgba(255, 255, 255, 1), 15px 10px 0 0 rgba(255, 255, 255, 1), 1px 11px 0 0 rgba(255, 255, 255, 1), 2px 11px 0 0 rgba(255, 255, 255, 1), 6px 11px 0 0 rgba(255, 255, 255, 1), 7px 11px 0 0 rgba(255, 255, 255, 1), 14px 11px 0 0 rgba(255, 255, 255, 1), 15px 11px 0 0 rgba(255, 255, 255, 1);
  height: 1px;
  width: 1px;
}

/*
    Scrollbar
-----------------------------------------*/

/* width */
::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #121212; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #767676; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #939393; 
}

@media only screen and (max-width: 639px) {
    ::-webkit-scrollbar {
      width: 3px;
      height: 3px;
    }    
}

/*-----------------------------------------------------------------*/

.trns {
    -webkit-transition-property: all;
            transition-property: all;
    
    -webkit-transition-duration: 0.3s;
            transition-duration: 1.3s;    

    -webkit-transition-timing-function: ease-in-out;
            transition-timing-function: ease-in-out;
}

.hidden {
    opacity:0;
}

.removed {
    display: none;
    pointer-events: none;
}

html, body {
    _min-height: 100%;
}

body {
    background-color: #33352f;
    color:#fff;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 14px;
    color:rgba(255,255,255,0.4);
    padding: 5.6vh 3.4vw;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

::-moz-selection { /* Code for Firefox */
  color: #333;
  background: #fff;
}

::selection {
  color: #333;
  background: #fff;
}

.holder {
    /*display: flex;
    justify-content: center;
    _align-items: center;
    _border:1px solid red;*/
}


.content {
    _border:1px solid green;
    _width: 38.2vw;
    margin-bottom: 2em;
}

header {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color:rgba(255,255,255,0.2);
    margin-bottom: 2rem;
}

.meta .version {
    margin-bottom: 1em;
}

a {
    color:inherit
}

a:hover {
    color:#fff;
}

h1 {
    color:#fff; 
    font-weight: 600;
    margin-bottom: 1em; 
}

.blink:after {
    margin-left:0.5em;
}

.blink:empty:after {
    margin-left:0em;
}

.blink:after {
    content:"";
    display: inline-block;
    background: #fff;
    width:0.5em;
    height: 1em;
    
    -webkit-animation: blink 1s infinite;
}

@-webkit-keyframes blink {
  0% {opacity: 1}
  50% {opacity: 0}
  100% {opacity: 1}
}

h2 {
    margin-bottom: 1em;
}

p {
    line-height: 1.3;
}


.hr,
.hrr {
    display: inline-block;
    overflow:hidden;
    width: 100%;
    height: 10px;
    line-height: 10px;
    margin: 2rem 0;
}

.hr:before {
    content: "--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------";
}

button {
    background-color: transparent;
    border: none;
    outline: none;
    text-transform: capitalize;
    font-size: 14px;
    font-weight: 400;
    color:rgba(255,255,255,0.7);
    opacity: 1;
    cursor: pointer;
    
    transition: all 0.3s cubic-bezier(0.4, 1, 0.8, 1);
}

button:before {
    content: "[";
    margin-right: 0.5em;
}
button:after {
    content: "]";
    margin-left: 0.5em;
}

button:hover {
    color:rgba(255,255,255,1);
}

button.scramble-btn span {
    position: relative;
}


button.disabled {
    cursor: progress;
    opacity: 0.15;
    pointer-events: none;
}

.description {}

.theory-container {
    font-size: 16px;
    color:rgba(255,255,255,0.7);
    min-height: 200px;
}

.theory-container p {
    line-height: 1.4;
}

.page-footer {
    background-color: #000;
    font-size:12px;
    text-align: right;
    padding:1em;
    position: fixed;
    bottom: 0;
    left:0;
    width:100%;
    box-sizing: border-box;
}

/*.theory-container:before {
    content: "001";
    display: block;
    position: absolute;
    transform: translate(-200%, 25%);
    opacity:0.3;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 1.5px;
}*/

@media (min-width: 640px){.descritpion-container {width: 61.8%;}}
@media (min-width: 960px){
    html, body {
        _padding:0;
        _height: 100%;
    }
    .holder{_height: 100vh; }
    .content {width: 61.8vw;  max-width: 600px;} 
}
@media (max-height: 799px){.holder{align-items:flex-start;} }
@media (min-height: 800px){.holder{align-items: center;} }
@media (min-width: 1200px){}
@media (min-width: 1600px){.content {width: 38.2vw; max-width: 600px;}}