body {
    background-color: #0d1e38;
}
/* cyrillic-ext */
@font-face {
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: local('IBM Plex Sans SemiBold'), local('IBMPlexSans-SemiBold'), url(https://fonts.gstatic.com/s/ibmplexsans/v7/zYX9KVElMYYaJe8bpLHnCwDKjQ76AIxsdO_q.woff2) format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: local('IBM Plex Sans SemiBold'), local('IBMPlexSans-SemiBold'), url(https://fonts.gstatic.com/s/ibmplexsans/v7/zYX9KVElMYYaJe8bpLHnCwDKjQ76AIVsdO_q.woff2) format('woff2');
    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: local('IBM Plex Sans SemiBold'), local('IBMPlexSans-SemiBold'), url(https://fonts.gstatic.com/s/ibmplexsans/v7/zYX9KVElMYYaJe8bpLHnCwDKjQ76AIJsdO_q.woff2) format('woff2');
    unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: local('IBM Plex Sans SemiBold'), local('IBMPlexSans-SemiBold'), url(https://fonts.gstatic.com/s/ibmplexsans/v7/zYX9KVElMYYaJe8bpLHnCwDKjQ76AI5sdO_q.woff2) format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: local('IBM Plex Sans SemiBold'), local('IBMPlexSans-SemiBold'), url(https://fonts.gstatic.com/s/ibmplexsans/v7/zYX9KVElMYYaJe8bpLHnCwDKjQ76AI9sdO_q.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: local('IBM Plex Sans SemiBold'), local('IBMPlexSans-SemiBold'), url(https://fonts.gstatic.com/s/ibmplexsans/v7/zYX9KVElMYYaJe8bpLHnCwDKjQ76AIFsdA.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
* {
    box-sizing: border-box;
    padding:0;
    margin:0;
}

header {
    position: relative;
}

.stripes {
    display: grid;
    grid: repeat(4, 1fr)/repeat(6, 1fr);
    -webkit-transform: skewY(-10deg);
    transform: skewY(-10deg);
    -webkit-transform-origin: 0;
    transform-origin: 0;
    position: absolute;
    top: 0;
    z-index: -1;
    height: 840px;
    width: 100%;
    background: -webkit-gradient(linear, left bottom, left top, from(#3d68d6), to(#0065ff));
    background: linear-gradient(to top, #3d68d6, #0065ff);
}
.stripes > * {
    opacity: 0.75;
    mix-blend-mode: soft-light;
}
.stripes > *:nth-of-type(odd) {
    background: -webkit-gradient(linear, right top, left top, color-stop(35%, transparent), to(#b3d4ff));
    background: linear-gradient(270deg, transparent 35%, #b3d4ff 100%);
}
.stripes > *:nth-of-type(even) {
    background: -webkit-gradient(linear, left top, right top, color-stop(35%, transparent), to(#b3d4ff));
    background: linear-gradient(90deg, transparent 35%, #b3d4ff 100%);
}
.stripes > *:nth-child(1) {
    grid-column: 1 / span 4;
    grid-row: 1;
}
.stripes > *:nth-child(2) {
    grid-column: 2 / span 5;
    grid-row: 2;
}
.stripes > *:nth-child(3) {
    grid-column: 2 / span 5;
    grid-row: 3;
}
.stripes > *:nth-child(4) {
    grid-column: 1 / span 2;
    grid-row: 4;
}
.stripes > *:nth-child(5) {
    grid-column: 6 / span 1;
    grid-row: 4;
}

.content {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    height: 650px;
    padding: 1rem;
}
.content h1 {
    font-family: "IBM Plex Sans", sans-serif;
    font-weight: 600;
    font-size: 3rem;
    line-height: 1.45;
    text-transform: uppercase;
    text-align: center;
    color: white;
    max-width: 600px;
    text-shadow: 0px 0px 15px rgba(0, 0, 0, 0.35);
}
.content h1 span {
    display: block;
    color: #ffe380;
    font-size: 2.25rem;
}
.account-box, .password-box {
    position: relative;
}
.account-box .tip, .password-box .tip {
    position:absolute;
    top:13px;
    left:10px;
    font-size:22px !important;
}
.account-box .name, .password-box .password {
    text-indent: 2em
}
#login {
    width: 100%;
    height: 50px;
    font-size: 18px;
    background-color: #0150bc;
}