@text: #111;
@base: #f4f4f4;
@link: #2a3644;
@button: rgba(255, 198, 66);
;
@bottom: #ab4b47;

.rounded (@radius: 6px) {
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
    -ms-border-radius: @radius;
    -o-border-radius: @radius;
    border-radius: @radius;
}

.trans (@transition: .1s) {
    -webkit-transition: all @transition ease-in-out;
    -moz-transition: all @transition ease-in-out;
    transition: all @transition ease-in-out;
}

* {
    margin: 0;
    padding: 0;
    border: none;
    list-style: none;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

body {
    font: 15px/1.25 'Alef';
    color: @text;
}

form {
    margin: 70px auto;
    background: @link;
    width: 347px;
    text-align: center;
    padding: 40px;
    .rounded;
    border: 1px rgba(233, 163, 38, 1) solid;
    border-radius: 10px;
}

input {
    display: block;
    width: 269px;
    padding: 15px;
    font-size: 110%;
    font-weight: bold;
    margin-bottom: 10px;
    .rounded;
    .trans;
    outline: none;
    color: rgba(233, 163, 38, 1.0);
    border: 1px rgba(233, 163, 38, 0.8) solid;
    border-radius: 30px;
}

input:focus {
    border: solid 1px rgba(233, 163, 38, 1.0);
    .trans;
}

::-webkit-input-placeholder {
    color: rgba(233, 163, 38, 0.8);
}

:-moz-placeholder {
    color: rgba(233, 163, 38, 0.8);
}

::-moz-placeholder {
    color: rgba(233, 163, 38, 0.8);
}

:-ms-input-placeholder {
    color: rgba(233, 163, 38, 0.8);
}

button {
    position: relative;
    display: block;
    margin-top: 30px;
    margin-bottom: 0px;
    padding: 15px;
    width: 270px;
    .rounded;
    .trans;
    font-size: 1.2em;
    cursor: pointer;
    background-color: rgba(255, 198, 66, 0.8);
    border-radius: 10px;
}

button:active {
    top: 3px;
    box-shadow: none;
}

@media screen and (max-width: 1080px) {
    .rounded (@radius: 6px) {
        -webkit-border-radius: @radius;
        -moz-border-radius: @radius;
        -ms-border-radius: @radius;
        -o-border-radius: @radius;
        border-radius: @radius;
    }

    .trans (@transition: .1s) {
        -webkit-transition: all @transition ease-in-out;
        -moz-transition: all @transition ease-in-out;
        transition: all @transition ease-in-out;
    }

    * {
        margin: 0;
        padding: 0;
        border: none;
        list-style: none;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    body {
        font: 40px/1.25 'Alef';
        color: @text;
    }

    form {
        margin: 70px auto;
        background: @link;
        width: 80%;
        text-align: center;
        padding: 40px;
        .rounded;
        border: 1px rgba(233, 163, 38, 1) solid;
        border-radius: 10px;
    }

    input {
        display: block;
        width: 100%;
        padding: 15px;
        font-size: 110%;
        font-weight: bold;
        margin-bottom: 10px;
        .rounded;
        .trans;
        outline: none;
        color: rgba(233, 163, 38, 1.0);
        border: 1px rgba(233, 163, 38, 0.8) solid;
        border-radius: 30px;
    }

    input:focus {
        border: solid 1px rgba(233, 163, 38, 1.0);
        .trans;
    }

    ::-webkit-input-placeholder {
        font-weight: normal;
        color: rgba(233, 163, 38, 0.8);
    }

    :-moz-placeholder {
        font-weight: normal;
        color: rgba(233, 163, 38, 0.8);
    }

    ::-moz-placeholder {
        font-weight: normal;
        color: rgba(233, 163, 38, 0.8);
    }

    :-ms-input-placeholder {
        font-weight: normal;
        color: rgba(233, 163, 38, 0.8);
    }

    button {
        position: relative;
        display: block;
        margin-top: 30px;
        margin-bottom: 0px;
        padding: 15px;
        width: 100%;
        .rounded;
        .trans;
        font-size: 1.2em;
        cursor: pointer;
        background-color: rgba(255, 198, 66, 0.8);
        border-radius: 10px;
    }

    button:active {
        top: 3px;
        box-shadow: none;
    }
}