h1 {
    font-size: 16px;
    line-height: 1.4;
    padding: 0 10px;
    margin-top: 23px;
    letter-spacing: 1px;
    font-family: 'Dosis', Arial, Helvetica, sans-serif;
}

h2 {
    font-size: 14px;
    font-weight: normal;
    font-family: Arial, Helvetica, sans-serif;
    color: #999999;
    max-width: 230px;
    margin: 0 auto;
    line-height: 1.5;
}

.freeuser {
    background: black;
    mix-blend-mode: var(--free-user);
    border-radius: 100vw;
    cursor: url(/img/scissors.png), pointer;
    width: 100vw;
    height: 100vw;
    overflow: hidden;
    position: absolute;
    margin: 0 auto;
    top: 260px;
    left: 0;
    right: 0;
    animation: up-down 5s linear infinite
}

.freeuser img {
    height: 90vw;
    display: block;
    margin: 0 auto
}

#first_action button {
    background: var(--blue-balance);
    transition: 0.23s all;
    font-size: 16px;
    line-height: 1;
    margin: 0 10px;
    position: relative;
    color: white
}

.face_id_svg {
    display: block;
    margin: 0 auto;
    width: 128px;
    height: 128px;
    margin-bottom: 23px;
    filter: var(--invert1);
}

#first_action #register {
    background: var(--main-color)
}

#faceID {
    margin: 0 10px
}

.forms {
    width: 100%;
    padding: 0 10px
}

.forms label {
    padding: 0 0 10px 0;
    font-size: 16px;
    display: block
}

.forms input {
    width: 100%;
    margin: 0 auto 23px auto;
    border: 2px solid var(--second-contrast);
    background: var(--menu-options-bg);
}

.forms input[type=submit] {
    background: #3E92FF;
    color: white;
    border: 0;
    cursor: pointer
}

.forms #terms {
    border: 1px solid var(--second-contrast-69);
    width: 100%;
    max-width: 690px;
    margin: 23px auto;
    padding: 10px;
    min-height: 32vh;
    border-radius: 10px;
    overflow-x: hidden;
    white-space: pre-line;
}


.forms #code15::-webkit-outer-spin-button,
.forms #code15::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.forms #code15 {
    -moz-appearance: textfield;
}

.forms #sendCode {
    margin: 0 auto;
    background: green;
    color: white;
    font-weight: bold;
    display: block
}

#backForm {
    background: var(--main-color);
    color: white
}

#messages {
    color: var(--main-color);
    font-weight: bold;
    font-size: 16px
}

#CreateFaceContainer h3 {
    font-size: 18px;
    line-height: 1.8;
    font-weight: normal;
    font-family: 'Dosis', Arial, Helvetica, sans-serif;
}

#createFace {
    color: white;
    background: var(--blue-balance);
}

.criteria {
    text-align: left;
    max-width: 600px;
    margin: 0 auto;
    color: var(--second-contrast);
    line-height: 2;
}

.criteria img {
    filter: grayscale(1);
    vertical-align: text-bottom;
}

.criteria .availability {
    transition: transform 0.23s
}

.content_type {
    font-weight: 900;
    font-size: 23px;
    padding: 0;
    margin-top: 10px;
    font-family: 'Dosis', Arial, Helvetica, sans-serif;
}

#location {
    margin-top: -333px;
}

.systems_status {
    display: block;
    margin: 23px 5px 0 0;
}

.systems_status i {
    display: inline-block;
    width: 9px;
    height: 9px;
    margin: 0 5px 0 0;
    border-radius: 9px;
    background: lime;
}

.you td,
.you a {
    font-weight: bold;
    color: var(--second-contrast);
    font-size: 12px;
}

#connectShip {
    margin-bottom: 90px;
}

/*Canvas */

.canvas {
    width: 90%;
    height: 100vh;
    margin: 0 auto
}

#particlesCanvas {
    position: absolute;
    top: 100px;
    width: 90vw;
    height: 90vh;
    margin: 0 auto;
    left: 0;
    right: 0;
    pointer-events: none;
    mix-blend-mode: difference;
    display: block;
}

.registerBTN {
    margin: 23px auto 0 auto;
    left: 0;
    right: 0;
    letter-spacing: 2px;
    font-weight: bold;
    z-index: 6;
    transition: transform 0.23s
}

.registerBTN:hover {
    transform: scale(1.5)
}

.byType b {
    display: inline-block;
    padding: 15px;
    border-radius: 10px;
    margin: 10px 5px;
    text-align: center;
}

.byType b img {
    display: block;
    margin: 0 auto 10px auto
}

.video_presentation {
    padding: 10px;
}


@media screen and (min-width: 950px) and (orientation: landscape) {

    h2 {
        width: 100%;
        max-width: 100%;
    }

    .you td,
    .you a {
        font-size: 14px;
    }

    .video_presentation {
        padding: 0;
    }

    .canvas {
        width: 100%;
        height: 800px;
    }

    #particlesCanvas {
        position: absolute;
        width: 100vw;
        height: 100vh;
        top: 0;
        left: 0;
        right: 0;
    }

    #location {
        margin-top: -260px;
    }

    .content_type {
        font-size: 32px;
    }

    .forms input {
        max-width: 690px;
        display: block;
    }

    .registerBTN {
        margin: 23px auto 0 auto;
    }

    .freeuser {
        width: 444px;
        height: 444px;
        top: 210px;
    }

    .freeuser img {
        width: 287px;
        height: 444px;
    }
}