@font-face {
  font-family: trixie;
  src: url(trixiecyr_plain.ttf);
/*   font-weight: bold; */
}

html {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: hidden;
    height: 100vh;
    width: 100vw;
    background:
        url("tile.png"),
        #454140;
/*     background-position: center; */
    box-shadow: inset 0 0 1000px #050505;
    background-attachment: fixed;
    animation: bg-scroll 30s linear infinite;
    color: white;
    font-family:trixie;
    font-size: 2.4vh;
    text-shadow: -1px -1px 0 #000, 2px -1px 0 #000, -1px 2px 0 #000, 2px 2px 0 #000;
}

@keyframes bg-scroll {
    0% {
        background-position: 0px 0px;
    }
    100% {
        background-position: 651px 637px;
    }
}

body {
    height: 100vh;
    margin: 0 5%;
}

/*main {
    position: absolute;
    top: 45%;
    bottom: auto;
    left: 50%;
    right: auto;
    transform: translate(-50%, -50%);
}*/

label::before {
    z-index:-1;
    display:block;
    position:absolute;
    left: 50%;
    right: auto;
    justify-content: center;
    text-align: center;
    transform: translate(-50%, 100%);
/*     outline: solid red 2px; */
/*     content: url("./easel-desk.png"); */
}

button,input {
    max-width: 640px;
    min-width: 150px;
    width: 100%;
    height: 5.6vh;
    color: white;
    font-family:trixie;
    font-size: 2.8vh;
    text-shadow: -1px -1px 0 #000a, 2px -1px 0 #000a, -1px 2px 0 #000a, 2px 2px 0 #000a;
    box-shadow: 3px 3px 0 #000a;
    text-align: center;
/*     background: radial-gradient(circle, rgba(255,255,255,1) 80%, #d2d2d2 100%); */
/*     background-image: url(btn1.png); */
    background-size: contain;
    border: solid black 2px;
    caret-color: black;
}

button {
    background-image: url(btn1.png);
}

input {
    background-image: url(input.png);
}

button:hover:enabled, input:hover:enabled {
    outline: #c00c solid 2px;
}

button:focus, button:active, input:focus, input:active {
    outline: #c00 solid 2px;
}


button:disabled, input:disabled {
    color: #FFF8;
    text-shadow: -1px -1px 0 #0005, 2px -1px 0 #0005, -1px 2px 0 #0005, 2px 2px 0 #0005;
/*     background: radial-gradient(circle, rgba(255,255,255,0.2) 80%, #d2d2d222 100%); */
    background-image: url(btn2.png);
    box-shadow: 3px 3px 0 #0005;
    border: solid #0005 2px;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"] {
    -moz-appearance: textfield;
}

/* input { */
/*     transform: skewX(-4deg); */
/*     animation: skewMove1 10s ease infinite; */
/* } */
/* button { */
/*     transform: skewX(4deg); */
/*     animation: skewMove2 10s ease infinite; */
/* } */

@keyframes skewMove1 {
    0%, 100% {
        transform: skewX(-6deg);
    }
    50% {
        transform: skewX(6deg);
    }
}

@keyframes skewMove2 {
    0%, 100% {
        transform: skewX(6deg);
    }
    50% {
        transform: skewX(-6deg);
    }
}

footer {
    z-index:0;
    position:fixed;
    display:block;
    width: 100vw;
    height: auto;
    top: auto;
    bottom: 0%;
    left:0;
    right:0;
    background-color: #00000044;
}

main, header {
    z-index: 3;
}

a {
    color: white;
}

a:focus, a:hover {
    animation: rainbow 5s linear infinite;
    transition-duration: 1s;
    outline: none;
}

@keyframes rainbow {
    0% {
        color: #FF746C;
    }

    14% {
        color: #FAC898;
    }

    28% {

        color: #FDFD96;
    }

    42% {
        color: #77DD77;
    }

    56% {
        color: #A4D8D8;
    }

    70% {
        color: #A7C7E7;
    }

    84% {
        color: #C3B1E1;
    }

    100% {
        color: #FF746C;
    }
}

@keyframes logo {
    0%, 100% {
        transform: rotateY(25deg) rotateZ(-2deg);
    }
    50% {
        transform: rotateY(-25deg) rotateZ(2deg);
    }
}