@font-face {
    font-family: 'onesize';
    src: URL('ONESIZE_.TTF') format('truetype');
  }

body {
    background-color: rgb(181, 196, 204);
}

* {
    font-family: 'onesize' !important;
    color: black;
    text-align: center;
}

h1 {
    margin: 1vw;
    font-size: max(7vw, 100%);
    color: rgb(29, 29, 29);
    word-wrap: normal;
    width: 85vw;
    text-align: center;
}

h2 {
    margin: 1vw;
    font-size: max(4vw, 60%);
    color: rgb(29, 29, 29);
    word-wrap: normal;
    width: 85vw;
    text-align: center;
}


.maincon {
    height: 80vh;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
}

input {
    font-family: 'Victor Mono', monospace;
    font-size: max(7vw, 100%);
    background-color: rgb(97, 132, 123);
    color: rgb(31, 28, 28);
    margin: 1vw;
    min-width: 50vw;
    max-width: 76vw !important;
    margin-left: 10vw;
    margin-right: 10vw;
    border: solid 1px rgba(255, 255, 255, 0.162);
}

input[type=text] {
    width: 90%;
    background-color: rgb(196, 159, 159);
}

input[type=text]:focus {
    border: none;
    margin: calc(1vw + 1px);
    background-color: rgb(196, 159, 159);
}

input[type=button] {
    background-color: rgb(196, 159, 159);
    cursor: pointer;
    min-width: 50px;
    animation-name: fleshBorder;
    animation-timing-function: steps(1);
    animation-iteration-count: infinite;
    animation-duration: 1.4s;
    max-width: 60vw !important;
}

@keyframes fleshBorder {
    0% {
        border: 1vw rgba(255, 255, 255, 0) solid;
    }
    50% {
        border: 1vw white solid;
    }
    
}