/* latin */
@font-face {
  font-family: 'Roboto-Medium';
  font-style: sans-serif;
  font-weight: 600;
  src: local('Roboto-Medium'), url('https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
@font-face {
  font-family: 'Roboto-Light';
  font-style: sans-serif;
  font-weight: 300;
  src: local('Roboto-Light'), url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;500&display=swap');

body {
    color: #ffffff;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    background: url('../images/hatter.jpg') center center #0f295a;
    background-repeat: no-repeat;
}

.container {
    position: relative;
    width: 100%;
    max-width: 1000px;
    padding: 0;
    display: block;
    margin: auto;
}

#left-block img {
    margin-top: 400px;
    float: right;
}
#right-block img {
        float: left;
    bottom: -700px;
    position: relative;
}

#block-title {
    padding: 5px;
    text-align: center;
}

h1 {
    font-size: 25px;
    font-weight: 600;
}

#block-title img {
    display: block;
    margin: auto;
}

#data-box label {
    font-size: 18px;
    font-weight: 600;
}

#block-title p,
#data-box .text {
    font-size: 18px;
    font-weight: 300;
}

#datacheck-box a,
#datacheck-box label {
    font-size: 10px;
    font-weight: 300;
    color: #ffffff;
}

#data-box .text,
h1 {
    text-align: center;
}

#data-box {
    margin: 20px auto;
    padding: 5px;
}

#data-box input {
    height: 40px;
    line-height: 20px;
    font-size: 20px;
    text-align: left;
    vertical-align: middle;
    background-color: #4e6182;
    width: 100%;
    margin-bottom: 15px;
    border: 1px solid #ffffff;
    border-radius: 4px;
    padding-left: 5px;
    color: #ffffff;
}

#button-box button {
    font-size: 18px;
    font-weight: 600;
    color: #011a4a;
    padding: 25px 30px;
    width: content-box;
    margin: auto;
    margin-top: 10px;
    background: #ffffff;
    border-radius: 4px;
    display: block;
}

#datacheck-box {
    margin-top: 10px;
    padding: 10px;
}

#datacheck-box label {
    display: block;
    margin: auto;
    width: max-content;
}

#success-text, #error-text {
    padding-top: 100px;
    padding-bottom: 50px;
}

#success-img img,#error-img img {
    display: block;
    margin:auto;
}


@media only screen and (min-width: 768px) {
    h1 {
        font-size: 30px;
    }
    #success-reg h1, #error h1 {
        font-size: 40px;
    }
    #block-title p,
    #data-box .text {
        font-size: 20px;
    }
    #datacheck-box a,
    #datacheck-box label {
        font-size: 12px
    }
    #data-box {
        padding: 15px 30px;
        border: 1px solid #FFFFFF;
        border-radius: 4px;
    }
    #success-reg, #error {
        height: 768px;
    }
    #success-text, #error-text {
        padding-top: 200px;
        padding-bottom: 100px;
    }
}