html,
body {
    height: 100%;
    width: 100%;
    background-color: #1f1b34;
    font-family: Roboto,sans-serif;
    color: #ffffff;
}

.header{
    padding: 5vw;
    color: #ffffff;

}
.logo{
    background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjMuMiAzMiI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTEwNi41IDI0LjNWNC42aDIuM3YyMC4yYzAgMS41LTEuMiAyLjgtMi43IDIuOGgtMS43Yy0xLjUgMC0yLjgtMS4yLTIuOC0yLjhWNC42aDIuM3YxOS43YzAgLjcuNSAxLjIgMS4xIDEuMmguNGMuNSAwIDEuMS0uNSAxLjEtMS4yek03Ni45IDQuNGMxLjUuMSAyLjggMS40IDIuOCAyLjl2MTcuNWMwIDEuNS0xLjIgMi44LTIuOCAyLjloLTEuOGMtMS42IDAtMi44LTEuMy0yLjktMi45VjcuM2MwLTEuNiAxLjMtMi45IDIuOS0yLjloMS44em0uNCAxOS45VjcuN2MwLS43LS41LTEuMy0xLjItMS4zaC0uM2MtLjcgMC0xLjIuNi0xLjIgMS4zdjE2LjZjMCAuNy41IDEuMiAxLjIgMS4zaC40Yy42IDAgMS4xLS42IDEuMS0xLjN6bTE0LTE5LjdjMS42IDAgMi44IDEuMyAyLjggMi45djE3LjFjMCAxLjYtMS4zIDIuOC0yLjggMi45aC00LjRWNC42aDQuNHptLjYgMTkuM1Y4LjFjMC0uNi0uNC0xLjEtMS0xLjJoLTEuN3YxOC4yaDEuNWMuNi4xIDEuMS0uNCAxLjItMXYtLjJ6TTY1LjcgNC42IDYyLjUgMTZsMy4zIDExLjRoLTIuM2wtMi4xLTcuMy0yLjEgNy4zSDU3TDYwLjEgMTYgNTYuOSA0LjZoMi4zbDIuMSA3LjMgMi4xLTcuM2gyLjN6bS0xNSAyMC41LS42IDEuOWMtLjEuMi0uMy40LS42LjRoLTUuOVY0LjZoNy4xbC0uNiAxLjljLS4xLjItLjMuNC0uNi40aC0zLjZ2Ny4zaDMuOGwtLjYgMS45Yy0uMS4zLS4zLjQtLjYuNGgtMi43VjI1aDQuOXYuMXpNMTE5IDEyLjlsMi43IDUuMmMuNiAxLjEgMSAyLjQgMSAzLjZ2Mi45YzAgMS42LTEuMyAyLjktMi45IDIuOWgtMS41Yy0xLjUtLjEtMi44LTEuNC0yLjgtMi45di0zLjNjMC0uMy4yLS41LjQtLjZsMS45LS41djRjMCAuNy41IDEuMiAxLjIgMS4yczEuMi0uNSAxLjItMS4ydi0yLjZjLS4xLTEuMS0uNC0yLjEtMS0zLjFsLTIuNy01LjJjLS42LTEuMS0xLTIuNC0xLTMuNlY3LjRjMC0xLjYgMS4yLTMgMi45LTNoMS41YzEuNi4xIDIuOCAxLjUgMi43IDN2MS44YzAgLjMtLjIuNS0uNC42bC0xLjkuNVY3LjdjMC0uNy0uNS0xLjItMS4yLTEuMlMxMTggNyAxMTggNy43djIuMmMuMSAxLjEuNCAyLjEgMSAzeiIvPjxsaW5lYXJHcmFkaWVudCBpZD0icHJlZml4X19hIiB4MT0iLTE5MTYuMzkyIiB4Mj0iLTE5MTUuMzkxIiB5MT0iMjU0MS4zODUiIHkyPSIyNTQxLjM4NSIgZ3JhZGllbnRUcmFuc2Zvcm09Im1hdHJpeCgzMS45OTIgMCAwIDMyIDYxMzA5LjIwMyAtODEzMDguMzIpIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjMDBiZmZmIi8+PHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjNjYxOWZmIi8+PC9saW5lYXJHcmFkaWVudD48cGF0aCBmaWxsPSJ1cmwoI3ByZWZpeF9fYSkiIGQ9Im0yMi40IDE2IDkuNiA5LjZoLTMuNGMtLjYgMC0xLjEtLjItMS41LS42bC04LjktOSA4LjktOC45Yy40LS40IDEtLjYgMS41LS42SDMyTDIyLjQgMTZ6TTQuOSA3LjFjLS40LS40LTEtLjYtMS41LS42SDBMOS42IDE2IDAgMjUuNmgzLjRjLjYgMCAxLjEtLjIgMS41LS42bDguOS04LjljMC0uMS04LjktOS04LjktOXpNMTYgMTguMmwtOC45IDguOWMtLjQuNC0uNiAxLS42IDEuNVYzMmw5LjYtOS42IDkuNiA5LjZ2LTMuNGMwLS42LS4yLTEuMS0uNi0xLjVMMTYgMTguMnptMC00LjQgOC45LTguOWMuNC0uNC42LTEgLjYtMS41VjBMMTYgOS42IDYuNCAwdjMuNGMwIC42LjIgMS4xLjYgMS41bDkgOC45eiIvPjwvc3ZnPg==) no-repeat 0;
    background-size: auto 100%;
    display: block;
    height: 8vw;
    padding: 0;
    width:50vw;
}

.x-header__heading{text-align: center;color: #fff;font-size: 10vw;padding-top: 10vw;}
.x-header__txt{text-align: center;color: #fff;font-size:5.5vw;color: #999999;line-height: 15vw;}

.x-header__buttons{
    display: flex;
    justify-content: center;
    margin: 50px auto;
    text-align: center;
}
.x__button {
    background-clip: padding-box!important;
    background-image: linear-gradient(281deg,#420be6,#a16bb3);
    background-size: 101%;
    border: 1px solid transparent;
    border-radius: 24px;
    box-shadow: 0 10px 30px 0 rgba(111,57,205,.3);
    color: #fff;
    display: block;
    font-family: Roboto,sans-serif;
    font-size: 12px;
    font-weight: 400;
    height: 48px;
    opacity: .8;
    outline: none;
    padding: 2px;
    position: relative;
    text-decoration: none;
    text-transform: uppercase;
    transition: opacity .2s linear;
    width: 80%;
}
.x__button .x__button-align {
    border-radius: 24px;
    cursor: pointer;
    display: block;
    height: 100%;
    line-height: 42px;
}

.key_input{
    background-color: rgba(57, 53, 92, 0.93);
    padding:0 3vw;
    border-radius: 3vw;
    width: 80vw;
    margin: 3vw auto;
    display: flex;
    justify-content: flex-start;
    font-size: 5vw;
    line-height: 10vw;
}
.key_input input{
    font-size: 5vw;
    line-height: 10vw;
    height: 10vw;
    background-color: rgba(57, 53, 92, 0.93);
    border: none;
    width: 100%;
}