* {
  transition: background-color 0.2s linear;
}

@media (prefers-reduced-motion) {
  * {
    transition: none;
  } 
}

:root {
    --button-text-color: #2d2d2d;
    --button-bg-color: #fff;
    --button-border-color: #2d2d2d;
    --button-hover-text-color: #fff;
    --button-hover-bg-color: #2d2d2d;
    --color-body-bg: #2d2d2d;
    --link-color: #d2d2d2;
    --color-body-text: #FFFFFF;
    --color-key: #2d2d2d;
    --border-color: #ddd;
    --color-intext: #6e6e6e;
    --line: #000;
    --error: #ff990061;
    --focus-a: #C6C8CA;
    --focus-b: #C6C8CA;
    --focus-b-chek: #E8E9EB;
    --focus-chek: #FFFFFF;
    --focus-on: #E8E9EB;
    --focus-off: #FFFFFF;
    --affter-a: #FFFFFF;
    --affter-b: #E8E9EB;
}


@media (prefers-color-scheme: dark) {
  :root,
  .dark-mode {
    --button-text-color: #fff;
    --button-bg-color: #2d2d2d;
    --button-border-color: #fff;
    --button-hover-text-color: #2d2d2d;
    --button-hover-bg-color: #fff;
    --color-body-bg: #2d2d2d;
    --link-color: #d2d2d2;
    --color-body-text: #FFFFFF;
    --color-key: #2d2d2d;
    --border-color: #545454;
    --color-intext: #aba8a8;
    --error: rgba(252, 252, 15, 0.38);
    --focus-a: #2D2D2D;
    --focus-a: #2D2D2D;
    --focus-b: #C6C8CA;
    --focus-b-chek: #767879;
    --focus-chek: #2D2D2D;
    --focus-on: #767879;
    --focus-off: #dddddd;
    --affter-a: #dddddd;
    --affter-b: #767879;
  }

    .light-mode {
        --button-text-color: #fff;
        --button-bg-color: #2d2d2d;
        --button-border-color: #fff;
        --button-hover-text-color: #2d2d2d;
        --button-hover-bg-color: #fff;
        --color-body-bg: #2d2d2d;
        --link-color: #d2d2d2;
        --color-body-text: #FFFFFF;
        --color-key: #2d2d2d;
        --border-color: #545454;
        --color-intext: #aba8a8;
        --error: rgba(252, 252, 15, 0.38);
        --focus-a: #2D2D2D;
        --focus-a: #2D2D2D;
        --focus-b: #C6C8CA;
        --focus-b-chek: #767879;
        --focus-chek: #2D2D2D;
        --focus-on: #767879;
        --focus-off: #dddddd;
        --affter-a: #dddddd;
        --affter-b: #767879;
    }
}

@media (prefers-color-scheme: light) {
    :root,
    .light-mode {
        --button-text-color: #fff;
        --button-bg-color: #2d2d2d;
        --button-border-color: #fff;
        --button-hover-text-color: #2d2d2d;
        --button-hover-bg-color: #fff;
        --color-body-bg: #2d2d2d;
        --link-color: #d2d2d2;
        --color-body-text: #FFFFFF;
        --color-key: #2d2d2d;
        --border-color: #545454;
        --color-intext: #aba8a8;
        --error: rgba(252, 252, 15, 0.38);
        --focus-a: #2D2D2D;
        --focus-b: #C6C8CA;
        --focus-b-chek: #767879;
        --focus-chek: #2D2D2D;
        --focus-on: #767879;
        --focus-off: #dddddd;
        --affter-a: #dddddd;
        --affter-b: #767879;
    }
 
  .dark-mode {
    --button-text-color: #fff;
    --button-bg-color: #2d2d2d;
    --button-border-color: #fff;
    --button-hover-text-color: #2d2d2d;
    --button-hover-bg-color: #fff;
    --color-body-bg: #2d2d2d;
    --link-color: #d2d2d2;
    --color-body-text: #FFFFFF;
    --color-key: #2d2d2d;
    --border-color: #545454;
    --color-intext: #aba8a8;
    --error: rgba(252, 252, 15, 0.38);
    --focus-a: #2D2D2D;
    --focus-b: #C6C8CA;
    --focus-b-chek: #767879;
    --focus-chek: #2D2D2D;
    --focus-on: #767879;
    --focus-off: #dddddd;
    --affter-a: #dddddd;
    --affter-b: #767879;
  }
}
button {
    appearance: none;
    background: var(--button-bg-color);
    border-radius: 20px;
    border: 2px solid var(--button-border-color);
    color: var(--button-text-color);
    cursor: pointer;
    padding: 1em 2em;
    font-weight: 600;
    font-family: 'Arial', system-ui;
}

button:hover,
button:focus {
  background: var(--button-hover-bg-color);
  color: var(--button-hover-text-color);
}



body {
    font-family: system-ui;
    font-size: 13px;
    margin: 0px;
    background: #fff;
    color: var( --color-body-text);
}
    a { color: var( --link-color); }
    a.link { text-decoration: none; border-bottom: none; }
    div.clear { clear: both; }
    form { margin: 0; padding: 0; }
    .link-2 {   }
    #logo_border { position: absolute; top: 10px; cursor: pointer; }
    body.dzen #logo { opacity: 0; }
    #content { padding-left: 50%; width: 740px; margin-left: -370px; }
    #header { 
width: 740px;
font-size: 16px;
margin: auto;
padding-top: 29px; }
    hr { position: absolute; margin-top: 10px; left: 10px; right: 10px; height: 0px; border: none; }
    body.dzen #counter { display: none; }
    body.dzen #social { display: none; }
    #dict { float: left; }
    #refresh { margin-left: 20px; }
    #refresh span { display: inline-block; margin-top: 3px; width: 13px; height: 12px;  }
    body.dzen #refresh span { background-position: 0 -500px; }
    #speed { float: right; padding-left: 20px; min-height:16px; margin-right: 20px; cursor: default; *margin-top: -20px; }
    #coins { float: right; padding-left: 20px; min-height:16px; margin-right: 20px; cursor: default; *margin-top: -20px; }
    
    body.dzen #speed { background: none; }
    body.dzen #coins { background: none; }

    #error { float: right; min-height:16px; cursor: default; *margin-top: -20px; }
    body.dzen #error { background: none; }
    #time { margin-left: 260px; position: absolute; padding-left: 20px; background: url(i/iconsa.png) no-repeat 0 -350px; top: 60px; }
    body.dict #time, body.dzen #time { display: none; }
    .nimp { color: #849196; }


    #time_sel, #dict_sel { color: #ddd; position: absolute; background: #fff; border: 1px solid #ddd; padding: 10px; width: 300px; margin-left: -11px; margin-top: -11px; display: none; z-index: 3; box-shadow: 5px 5px 5px #ddd; -webkit-box-shadow: 5px 5px 5px #ddd; -moz-box-shadow: 5px 5px 5px #ddd; }

#intext {
    display: block;
    padding-bottom: 3px;
    border: none;
    width: 100%;
    border-bottom: 1px dotted var(--color-body-text);
    background: var(--color-body-bg);
    color: var(--color-body-text);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

}
#intext, #text {
    font-family: system-ui;
    font-size: 17px;
    border-image: linear-gradient(90deg,#ffffff00, #ffffffff 20px, #ffffff00) 1;
    border-width: 2px;
    /* border-style: solid; */
    border-image-slice: 1;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}


/*** Works on common browsers ***/
::selection {
    background-color: #ffffff00;
    color: #ffffff;
}

/*** Mozilla based browsers ***/
::-moz-selection {
    background-color: #ffffff00;
    color: #ffffff;
}

/***For Other Browsers ***/
::-o-selection {
    background-color: #ffffff00;
    color: #ffffff;
}

::-ms-selection {
    background-color: #ffffff00;
    color: #ffffff;
}

/*** For Webkit ***/
::-webkit-selection {
    background-color: #ffffff00;
    color: #ffffff;
}

    #intext:focus {
        outline: none;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
    #intext.error {
        background: #fca60f61;
    }
    body.dzen #intext.error { background: none; color: #f00; }
    #intext.blur { border-bottom: 1px solid var(--color-intext)}
    #text { margin: 1px; padding: 0; margin-top: 3px; }
    #text div { height: 1.2em; width: 800px; margin-bottom: 1px; }
    #text.penalt div.line1 { height: 1.2em; background: var(--error); width: inherit; display: inline-block; }
    #text.error { color: #f00; }
    body.dzen #text span.checked, #text span.checked { color: #c7d0d4; }
    body.dzen #text.error { color: #000; }
    #text span.warn {  }
    #text div.line4, #text div.line5 { visibility: hidden; }
    #question { font-size: 20px; margin-bottom: 10px; height: 20px; }
    #question.error { color: #f00; }
    #copyright { margin-top: 20px; margin-left: 5px; padding-bottom: 10px; float: left; color: #839095; height: 20px; }
    body.dzen #copyright { display: none; }
    #info { margin-top: 20px; padding-bottom: 10px; float: right; }
    #info a { margin-left: 20px; }
    body.dzen #info { display: none; }
    span.wait { padding-right: 20px;  }
    span.error { padding-right: 20px;  }


    #my_dict img { float: right; cursor: pointer; margin: 5px; }
    #dict_data { width: 99%; height: 450px; margin-top: 5px; }
    #keyboards { margin-left: 2px; }
    div.keyboard { cursor: default; padding-top: 3px;  }
    div.keyboard.cur { display: block; }
    div.keyboard.fingers div.f5 { background: #ad7fa8; }
    div.keyboard.fingers div.f4 { background: #729fcf; }
    div.keyboard.fingers div.f3 { background: #73d216; }
    div.keyboard.fingers div.f2 { background: #fcaf3e; }
    div.keyboard.fingers div.f1 { background: #fce94f; }
    div.keyboard.fingers div.sys { background: #ddd; }
#keyboard {
    width: 790px;
    float: left;
    
}
    div.keyboard .line { clear: left; }
        div.keyboard .line div {
            float: left;
            width: 37px;
            height: 37px;
            line-height: 37px;
            font-size: 15px;
            border: 1px solid #c7d0d4;
            background: var( --color-key);
            margin: 1px;
            padding: 5px;
            text-align: center;
            -moz-border-radius: 5px;
            -webkit-border-radius: 5px;
            border-radius: 5px;
            box-shadow: inset 0px 0px 7px 0px rgb(255 255 255 / 47%);
        }
    div.keyboard sup { margin-left: 5px; }
    div.keyboard .line div.sel { background: #c7d0d4; }
    div.keyboard.fingers .line div.sel { background: #ffa; }
    #keyboard div.tab { width: 63px; }
    #keyboard div.caps { width: 75px; }
    #keyboard div.lshift { width: 101px; }
    #keyboard div.backspace { width: 63px; text-align: right; }
    #keyboard div.enter { width: 76px; text-align: right; }
    #keyboard div.rshift { width: 101px; text-align: right; }
    #keyboard div.altgr { text-align: center; }
    div.keyboard div.sys { font-size: 10px; text-align: left; color: #95a0a4; }
    div.keyboard div.backspace.off { color: #ddd; }
    #keyboard span.layout { border: none; float: left; margin-left: 25px; margin-bottom: 5px; }
    #keyboard div.space div { width: 145px; height: 37px; border: none; margin-left: -5px; margin-top: -5px; }
    #keyboard div.space div.sel_left { border: 1px solid #c7d0d4; background: #c7d0d4; }
    #keyboard.fingers div.space div.sel_left { border: 1px solid #ffa; background: #ffa; }
    #keyboard div.space div.sel_right { border: 1px solid #c7d0d4; background: #c7d0d4; margin-left: 150px; margin-top: -5px; }
    #keyboard.fingers div.space div.sel_right { border: 1px solid #ffa; background: #ffa; margin-left: 150px; margin-top: -5px; }
    #keyboard div.space { margin-left: 190px; width: 300px; height: 37px; }
    div.keyboard div.hand { border: 1px solid #888; }
    div.keyboard div.select { margin-top: 40px; text-align: center; }
    #keyboard #klavarog div.line div { width: 37px; }
    #keyboard #klavarog div.line div.sys { text-align: center; }
    #keyboard #klavarog div.line div.blank { border: 1px solid #fff; }
    #keyboard #klavarog div.line div.left4 { margin-left:205px; }
    #keyboard #klavarog div.line div.space, #keyboard #klavarog div.line div.lshift { width: 57px; margin-left: 0; }
    #keyboard #klavarog div.line div.blank2 { width: 89px; margin-left: 0; }
      #keyboard #klavarog div.line div.center2 {  margin-right:40px; }
    #keyboard #klavarog div.start sub { text-decoration: none; }
    #keyboard #klavarog div.space div { font-size: 10px; margin: 0; padding: 0; }
    #keyboard #klavarog div.space div.sel_left { border: none; background: none; margin-left: 0; margin-top: 0; }
    #keyboard #klavarog div.space div.sel_right { border: none; background: none; margin-left: 0; margin-top: 0; }
    #numkeyboard { margin-left: 530px; width: 220px; clear: right; margin-top: 20px; *margin-top: 0; }
    #numkeyboard div.plus { position: absolute; margin-left: 154px; *margin-left: 1px; height: 88px; line-height: 88px; zoom: 1; }
    #numkeyboard div.enter { position: absolute; margin-left: 154px; *margin-left: 1px; height: 88px; line-height: 88px; }
    #numkeyboard div.zero { width: 88px; }
    #numkeyboard div.sys { text-align: center; }
    #hide_keyboard { cursor: pointer; float: right;  margin-left: 20px; width: 22px; height: 22px; display: inline-block; }
    #show_keyboard { cursor: pointer; float: right;  margin-left: 20px; width: 22px; height: 22px; display: inline-block; }
    #hide_hand { cursor: pointer; float: right;  margin-left: 20px; width: 22px; height: 22px; display: inline-block; }
    #show_hand { cursor: pointer; float: right;  margin-left: 20px; width: 22px; height: 22px; display: inline-block; }
    #hide_color { cursor: pointer; float: right;  margin-left: 20px; width: 22px; height: 22px; display: inline-block; }
    #show_color { cursor: pointer; float: right;  margin-left: 20px; width: 22px; height: 22px; display: inline-block; }
    #hide_sound { cursor: pointer; float: right;  margin-left: 20px; width: 22px; height: 22px; display: inline-block; }
    #show_sound { cursor: pointer; float: right;  margin-left: 20px; width: 22px; height: 22px; display: inline-block; }
    #hide_autobackspace { cursor: pointer; float: right;  margin-left: 20px; width: 22px; height: 22px; display: inline-block; }
    #show_autobackspace { cursor: pointer; float: right;  margin-left: 20px; width: 22px; height: 22px; display: inline-block; }
    div.keyboard.hide { visibility: hidden; }
    #layout { 1float: left; position: absolute; margin-left: 5px; 1margin-bottom: 5px; margin-top: -25px; }
    #hands div.hand { display: none; position: absolute; width: 58px; height: 100px; z-index: 1; zoom: 1; opacity: 0.7; background: url(i/hands2.png) no-repeat; }
    #hands #lhand4 { background-position: 0 0; }
    #hands #lhand3 { background-position: -58px 0; }
    #hands #lhand2 { background-position: -116px 0; }
    #hands #lhand1 { background-position: -174px 0; }
    #hands #lhand0 { background-position: -232px 0; }
    #hands #rhand0 { background-position: -290px 0; }
    #hands #rhand1 { background-position: -348px 0; }
    #hands #rhand2 { background-position: -406px 0; }
    #hands #rhand3 { background-position: -464px 0; }
    #hands #rhand4 { background-position: -522px 0; }
    #layout_sel { position: absolute; background: var(--color-body-bg); border: 1px solid var(--border-color); padding: 10px; width: 200px; margin-left: -6px; margin-top: -36px; display: none; z-index: 3; box-shadow: inset rgb(255 255 255) 0px 0px 20px 4px;
      -webkit-box-shadow: inset rgb(255 255 255) 0px 0px 20px;
      -moz-box-shadow: inset rgb(255 255 255) 0px 0px 20px; }
    #layout_sel hr { position: relative; left: 0; right: 0; }
    #layout_sel div { margin-bottom: 5px; }
    #block_keyboards { height: 270px; margin-top: 20px; }
    body.dzen #block_keyboards { visibility: hidden; }
    #error, #speed, #coins {cursor:pointer;}
    svg { vertical-align: middle; }
    .data { vertical-align: middle; }
/* Старый код */



html, body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: var( --color-body-bg);
}
a { text-decoration-line: none; }
.gen {
    flex: 1 0 auto;
    padding-bottom: 100px;
    background: linear-gradient(180deg, #232323, #505050);
}



body.dzen .err { display: none; }
body.dzen #footer { transition: opacity .6s; opacity: 0; }
body.dzen #dict { transition: opacity .6s; opacity: 0.5; }
body.dzen .hed { box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.06);
transition: box-shadow 0.3s ease-in-out; }
.hed {
    z-index: 4;
    position: relative;
    height: 74px;
    box-shadow: inset 0px 0px 14px 0px rgb(255 255 255 / 47%);
    transition: box-shadow 0.3s ease-in-out;
    width: 1536px;
}

.f-info {
display: flex;
justify-content: space-between;
padding-top: 74px;
padding-bottom: 24px;
}

.focus-mode {
position: relative;
text-align: center;
padding-right: 133px;
z-index: 1;
}

.fmfm {
display: inline-block;
position: absolute;
margin-top: 25px;
}
.tggl-btn {
  box-sizing: border-box;
}


.tggl-input {
  display: none;
}
.tggl-btn {
  transition: all 0.3s ease-in;
  display: block;
  position: relative;
  width: 4em;
  height: 2em;
  border-radius: 1em;
  cursor: pointer;
}

.tggl-btn.txtswitch {
  width: 7em;
  padding: 2px;
}
.tggl-btn.txtswitch span {
  display: block;
  position: absolute;
  width: calc(5em - 8px);
  line-height: calc(2em - 4px);
  font-weight: 700;
  transition: opacity 0.3s ease;
}
.tggl-btn.txtswitch span.on {
  opacity: 0;
  text-align: left;
  padding-left: 0.4em;
}
.tggl-btn.txtswitch span.off {
  opacity: 1;
  text-align: left;
  padding-left: 2.2em;
}
.tggl-btn.txtswitch:after {
  content: '';
  display: block;
  position: absolute;
  border-radius: 50%;
  top: 2px;
  left: 2px;
  transition: left 0.2s ease;
}
.tggl-input:checked + .tggl-btn.txtswitch:after {
  left: calc(4em + 16px);
}
.tggl-input:checked + .tggl-btn.txtswitch span.on {
  opacity: 1;
}
.tggl-input:checked + .tggl-btn.txtswitch span.off {
  opacity: 0;
}
.tggl-btn.yang {
  background-color: var( --focus-a);
  border: solid 2px var( --focus-b);
}
.tggl-btn.yang.switch:after {
  background-color: #add8e6;
}
.tggl-input:checked + .tggl-btn.yang.switch:after {
  background-color: #ffb6c1;
}
.tggl-input:checked + .tggl-btn.yang {
  border: solid 2px var(--focus-b-chek);
  background-color: var(--focus-chek);
}
.tggl-btn.yang.txt:before,
.tggl-btn.yang.txt:after {
  line-height: calc(2em - 4px);
}
.tggl-btn.yang.txt:before {
  color: #add8e6;
}
.tggl-btn.yang.txt:after {
  color: #ffb6c1;
}
.tggl-btn.yang.txtswitch span {
  line-height: calc(2em - 6px);
}
.tggl-btn.yang.txtswitch span.on {
  color: var(--focus-on);
}
.tggl-btn.yang.txtswitch span.off {
  color: var(--focus-off);
}
.tggl-btn.yang.txtswitch:after {
  width: calc(2em - 8px);
  height: calc(2em - 8px);
  background-color: var(--affter-a);
}
.tggl-input:checked + .tggl-btn.yang.txtswitch:after {
  background-color: var(--affter-b);
}
.tggl-btn.flip.yang:before,
.tggl-btn.flip.yang:after {
  line-height: calc(2em - 4px);
  background-color: #fff;
}
.tggl-btn.flip.yang:before {
  color: #add8e6;
}
.tggl-btn.flip.yang:after {
  color: #ffb6c1;
}
#footer { 
width: 740px;
margin: auto;
height: 100px;
flex-shrink: 0;
}
.f-link {
  display: flex;
  justify-content: space-between;
  font-size: 16px;
  align-items: baseline
}
#yout {
  padding-bottom: 2px;
}

#dict_sel span { color: var(--link-color); }
#dict_sel, #wind_sel {
    left: 407px;
    border-radius: 40px;
    position: absolute;
    background: var(--color-body-bg);
    border: 1px solid var(--border-color);
    padding: 10px;
    width: 740px;
    margin-left: -11px;
    margin-top: 50px;
    display: none;
    z-index: 3;
    box-shadow: inset rgb(255 255 255) 0px 0px 20px;
    -webkit-box-shadow: inset rgb(255 255 255) 0px 0px 20px;
    -moz-box-shadow: inset rgb(255 255 255) 0px 0px 20px;
}
.head {
text-align: center;
font-size: 20px;
padding-top: 30px;
padding-bottom: 24px;
color: var(--color-body-text);
}
.langs {
float: left;
padding-right: 48px;
padding-left: 28px;
font-size: 16px;
text-transform: uppercase;
color: #757575;
padding: 12px 0px 10px 28px;
}

.lst-2 {
 width: 520px;
margin-left: 156px;
border-radius: 4px;
padding: 0 20px 0 20px;
display: flex;
justify-content: space-between;
height: 40px;
align-items: center;
}

.l-stroke {
width: 520px;
margin-left: 85px;
border-radius: 4px;
padding: 0 20px 0 20px;
display: flex;
justify-content: space-between;
height: 40px;
align-items: center;
}
.levels {
align-items: center;
display: flex;
}
.l-ico {
  margin-right: 8px;
}
a.la-t {
    
    height: 38px;
    align-items: center;
    display: flex;
    margin-top: 2px;
    font-size: 18px;
     box-sizing: border-box;
    
    background-size: 400%;
    border-radius: 30px;
}
a.la-1 { color: #45b349; }
a.la-2 { color: #45b349; }
a.la-3 { color: #45b349; }
a.la-4 { color: #45b349; }

.l-line {
    border-left: 1px solid #F0EEEE;
    -webkit-border-image: -webkit-linear-gradient(#ffffff00, #ffffff,#ffffff00);
    -moz-border-image: -moz-linear-gradient(#ffffff00, #ffffff,#ffffff00);
    border-image: linear-gradient(#ffffff00, #ffffff,#ffffff00);
    border-image-slice: 1;
    height: 40px;
}
.l-line-2 {
  border-left: 1px solid #b3a9a9;
height: 25px;
}
span.l-name {
float: left;
font-size: 16px;
text-transform: uppercase;
color: #50595d;
padding: 12px 0px 10px 28px;
}
.l-hide { display: none; }
.lllv { padding-bottom: 16px; }

#dict_sel span { color: var(--link-color); }
#time_sel { width: 40px; margin-left: 259px; top: 60px; }
#dict_sel hr { position: relative; left: 0; right: 0; }

    #my_dict .close {
  padding-bottom: 10px;
}
    #layout_sel .close, #time_sel .close, #my_dict .close, #dict_sel .close { float: right; cursor: pointer; width: 14px; height: 14px; background: url(i/iconsa.png) no-repeat 0 -400px; display: inline-block; }

#my_dict input { 

background-color: #286cd3;
border: none;
color: white;
text-decoration: none;
margin: 20px 4px 8px;
cursor: pointer;
  float: right;
  font-size: 18px;
  border-radius: 5px;
  padding: 11px 25px;

}

#my_dict {
position: absolute;
background: #fff;
border: 1px solid #ddd;
padding: 24px;
width: 700px;
margin-left: -11px;
margin-top: -11px;
display: none;
z-index: 2;
box-shadow: 5px 5px 5px #ddd;
-webkit-box-shadow: 5px 5px 5px #ddd;
-moz-box-shadow: 5px 5px 5px #ddd;
}
#typerun {
  text-transform: uppercase;
  color: #839095;
}
.list { font-size: 16px; }


.btttn {
    margin-top: -5px;
    position: relative;
    display: inline-block;
    width: 125px;
    height: 35px;
    text-align: center;
    line-height: 37px;
    color: #fff;
    text-transform: uppercase;
    text-decoration: none;
    font-family: system-ui;
    box-sizing: border-box;
    background-size: 400%;
    border-radius: 30px;
    z-index: 1;
}
a.la-t:hover {
    animation: animate 8s linear infinite;
}



.btttn:hover {
    animation: animate 8s linear infinite;
}

@keyframes animate {
    0% {
        background-position: 0%;
    }

    100% {
        background-position: 400%;
    }
}

.btttn:before {
    content: "";
    position: absolute;
    top: -5px;
    right: -5px;
    bottom: -5px;
    left: -5px;
    z-index: -1;
    background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
    background-size: 400%;
    border-radius: 40px;
    opacity: 0;
    transition: .5s;
}

.btttn:hover:before {
    filter: blur(10px);
    opacity: 1;
    animation: animate 8s linear infinite;
}
a.la-t:before {
    content: "";
    position: absolute;
    top: -5px;
    right: -5px;
    bottom: -5px;
    left: -5px;
    z-index: -1;
    background: linear-gradient(90deg, #03a9f477, #f441a577, #ffeb3b77, #03a9f477);
    background-size: 400%;
    border-radius: 40px;
    opacity: 0;
    transition: .5s;
}

a.la-t:hover:before {
    filter: blur(10px);
    opacity: 1;
    animation: animate 8s linear infinite;
}






.btn {
    background-color: #1478e7;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 18px;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 30px;
}
.butt {
  display: flex;
  justify-content: center;
  margin: 42px 0;
}
#content-h {
display: block;
margin: 0 auto;
width: 740px;
}
.inst {
  margin-top: 32px;

}
.txxxt {
  font-size: 18px;
  justify-content: center;
  display: flex;
}
.h11 {
  margin-top: 44px;
display: flex;
flex-direction: column;
}
.zag {
justify-content: center;
display: flex;
font-size: 2.5em;
}

.theme-switcher {
  display: inline-block;
  height: 30px;
  position: relative;
  width:60px;
  top: 10px;
}

.theme-switcher input {
  display:none
}

.theme-switcher .slider {
  display: block;
  bottom: 0;
  cursor: pointer;
  left: 0;
  position: absolute;
  right: -3px;
  top: -4px;
  transition: .4s;
  border: solid 1px rgb(107, 107, 107);
}

.theme-switcher .slider:before {
  background-color: rgb(107, 107, 107);
  bottom: 4px;
  content: "";
  height: 24px;
  left: 5px;
  position: absolute;
  transition: .4s;
  width:24px
}

.theme-switcher .slider:after {
  content: "🌙";
  display: block;
  position: absolute;
  top: 11px;
  right: 9px;
  font-size: 13px;
  line-height: 12px;
}

.theme-switcher input:checked + .slider:after {
  content: "☀️";
  right: auto;
  left: 6px;
  font-size: 16px;
  top: 11px;
}

.theme-switcher input:checked + .slider {
}

.theme-switcher input:checked + .slider:before {
  transform:translateX(26px)
}

.theme-switcher .slider.round {
  border-radius:34px
}

.theme-switcher .slider.round:before {
  border-radius:50%
}