{% load static %}
<head>
<style>
    .commonmargin {
        margin-top: 193px;
        text-align: center;

    }
    .loginbtn {
        position: relative;
        z-index: 0;
        background: linear-gradient(135deg, #6BFFFF -30%, rgba(18, 67, 191, 1) 122%);
        padding-top: 25px;
        padding-bottom: 3px;
        border: 3px solid #FFF ;
        border-bottom: 0;

    }
    .registrbtn {
        padding-top: 25px;
        border: 3px solid #FFF ;
    }

    .chbtn {
        margin: 0 -29px 0 -29px;
        width: 370px;
        height: 38px;
        border-radius: 60px 60px 0px 0px;
        display: inline-block;
        line-height: normal;
        font-family: Montserrat, sans-serif, Inter;
        color: #FFF;
        text-align: center;
        font-size: 18px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        letter-spacing: 1.8px;
        text-decoration: none;

    }

    .loginpole {
        margin: auto;
        width: 691px;
        height: 530px;
        border-radius: 0 0 60px 60px;
        border: 3px solid #FFF;
        border-top: none;
        background: linear-gradient(135deg, #6BFFFF -15.56%, rgba(18, 67, 191, 0.92) 40%, rgba(191, 18, 174, 0.92) 95%);
        box-shadow: 4px 4px 25px 0px #74286C;
        position: relative;
    }

    .lines {
        padding-top: 50px;
    }

    .inputdata {
        display: block;
        width: 489px;
        height: 45px;
        border-radius: 40px;
        border: 3px solid #FFF;
        background: transparent;
        margin: 0 67px 21px 66px;
        padding-left: 68px;
        color: #fff;
        color: #FFF;
        font-family: Montserrat, sans-serif, Inter;
        font-size: 16px;
        font-weight: 500;
    }
    .inputdata:focus {
        outline: none;
    }

    .inputdata::placeholder {
        color: #FFF;
        font-family: Montserrat, sans-serif, Inter;
        font-size: 16px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
    }

    .forpassword {
        float: right;
        color: #FFF;
        text-align: center;
        font-family: Montserrat, sans-serif, Inter;
        font-size: 16px;
        font-weight: 400;
        line-height: normal;
        text-decoration-line: underline;
        margin: 5px 66px 46px 0;
    }

    .login {
        border-radius: 40px;
        border: 1.5px solid #FBC1C8;
        background: linear-gradient(92deg, #EE3145 0%, #630762 100%);
        box-shadow: -4px -4px 25px 0px #F8576C, 4px 4px 25px 0px #74286C;
        color: #FFF;
        text-align: center;
        font-family: Montserrat, sans-serif, Inter;
        font-size: 27px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        margin: 0 226px 25px 236px;
        width: 228.712px;
        height: 48.301px;
    }

    .registrate {
        width: 423px;
        height: 48px;
        border-radius: 40px;
        border: 1.5px solid #FFF;
        color: #FFF;
        text-align: center;
        font-family: Montserrat, sans-serif, Inter;
        font-size: 27px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        background: transparent;
        filter: drop-shadow(5px 5px 30px #030303) drop-shadow(-5px -5px 30px #33333A);
        margin: 0 129px 32px 139px;
    }

    .logwith {
        width: 293.602px;
        height: 27.465px;
        color: #FFF;
        font-family: Montserrat, sans-serif, Inter;
        font-size: 24px;
        font-style: normal;
        font-weight: 400;
        margin: 0 194px 20px 203px;

    }
    .social {
        width: 33px;
        height: 34px;
        margin: 0 12px 35px 12px;
    }
    .socialimg {
        margin-right: 95px;
    }
    .chbtn:hover {
        cursor: pointer;
    }

    .langchange {
        float: left;
        margin: -28px 0 0 19px;
    }
    .ru {
        height: 50px;
        background-image: url("{% static "images/icons/rus.svg" %}");
        background-repeat: no-repeat;
        padding-top: 10px;
        color: #FFF;
        font-family: Montserrat, sans-serif, Inter;
        font-size: 24px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        padding-left: 53px;
    }
    .en {
        height: 50px;
        background-image: url("{% static "images/icons/usa.svg" %}");
        background-repeat: no-repeat;
        padding-top: 10px;
        font-family: Montserrat, sans-serif, Inter;
        font-size: 24px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        padding-left: 53px;

    }
    .langchange a {
        text-decoration: none;
        color: #FFF;
        display: block;
        position: relative;
    }

    .registration:target, .loginpole:target {
        display: block;
    }

    .registration, .loginpole {
        display: none;
    }
    .registration {
        width: 691px;
        height: 543px;
        border-radius: 60px;
        border: 3px solid #FFF;
        background: linear-gradient(135deg, #6BFFFF -15.56%, rgba(18, 67, 191, 0.92) 40%, rgba(191, 18, 174, 0.92) 95%);
        box-shadow: 4px 4px 25px 0px #74286C;
        border-top: none;
        border-radius: 0 0 60px 60px;
        margin: auto;
        position: relative;
    }

    .regtg {
        display: inline;
        margin: 19px 0 10px 327px;
        width: 38px;
        height: 38px;

    }

    .addtg {
        color: #FFF;
        text-align: center;
        font-family: Montserrat, sans-serif, Inter;
        font-size: 16px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        text-decoration-line: underline;
        margin-bottom: 46px;
    }

    .registrate2 {
        border-radius: 40px;
        border: 1.5px solid #FBC1C8;
        background: linear-gradient(92deg, #EE3145 0%, #630762 100%);
        box-shadow: -4px -4px 25px 0px #F8576C, 4px 4px 25px 0px #74286C;
        width: 451px;
        height: 60px;
        color: #FFF;
        text-align: center;
        font-family: Montserrat, sans-serif, Inter;
        font-size: 27px;
        font-weight: 700;
        margin: -20px 0 0 126px;
    }
    input[type=text] {
        background-image: url("{% static "images/icons/log.svg" %}");
        background-repeat: no-repeat;
        background-position-y: 12px;
        background-position-x: 31px;
    }
    input[type=email] {
        background-image: url("{% static "images/icons/email.svg" %}");
        background-repeat: no-repeat;
        background-position-y: 15px;
        background-position-x: 30px;
    }

    input[type=tel] {
        background-image: url("{% static "images/icons/tel.svg" %}");
        background-repeat: no-repeat;
        background-position-y: 12px;
        background-position-x: 34px;
    }
    input[type=password] {
        background-image: url("{% static "images/icons/pass.svg" %}");
        background-repeat: no-repeat;
        background-position-y: 14px;
        background-position-x: 33px;
    }

    .registration:before {
        content: "";
        width: 370px;
        height: 67px;
        position: absolute;
        background: linear-gradient(135deg, #6BFFFF -80%, rgba(18, 67, 191, 1) 55%);
        top: -70px;
        right: -3px;
        border-radius: 60px 60px 0 0;
        border: 3px solid #fff;
        border-bottom: none;
    }

</style>
</head>
<body>
<div class="commonmargin">
    <div class="checks">
        <a href="#1" class="loginbtn chbtn" >вход</a>
        <a href="#2" class="registrbtn chbtn" >регистрация</a>
    </div>
<div class="loginpole" id="1">
    <div class="lines">
        <input autocomplete="off" class="inputdata" type="text" name="login" placeholder="ЛОГИН" >
        <input autocomplete="off" class="inputdata" type="password" name="password" placeholder="ПАРОЛЬ" >
        <a href="#" class="forpassword">забыли пароль?</a>
        </br>
        <input type="submit" class="login" value="войти">
    </div>
        <button class="registrate">зарегистрироваться</button>
        <div>
            <div class="langchange">
                <a href="#"><div class="ru">RU</div></a>

                <a href="#"><div class="en">EN</div></a>
            </div>

             <div class="logwith">войти с помощью</div>
                  <div class="socialimg">
                      <img class="social" src="{% static "images/icons/inst.svg" %}">
                      <img class="social" src="{% static "images/icons/tg.svg" %}">
                      <img class="social" src="{% static "images/icons/vk.svg" %}">
                  </div>

            </div>
        </div>
</div>


<div class="registration" id="2">
    <div class="lines">
        <form id="reg">
        <input type="text" name="login" placeholder="ЛОГИН" class="inputdata">
        <input type="email" name="email" placeholder="EMAIL" class="inputdata">
        <input type="tel" name="tel" placeholder="ТЕЛЕФОН" class="inputdata">
        <input type="password" name="password" placeholder="ПАРОЛЬ" class="inputdata">
        </form>
    </div>
    <div>
        <img class="regtg" src="{% static "images/icons/tg.svg" %}">
        <div class="addtg"><a>добавить телеграмм</a></div>
    </div>
    <input class="registrate2" type="submit" form="reg" value="ЗАРЕГИСТРИРОВАТЬСЯ">
</div>

</body>