@import 'poppins.css';

:root {
    --text-color: #0d0d0d;
    --input-color: #6a6a6a;

    --background-color: #ffffff;
    --primary1-color: #2c4523;
    --primary-light-color: #416633;
    --panel-color: #e6e6e6;
    --error-input-color: rgba(255, 66, 66, 0.1);
    --error-color: #d13f43ff;

    --font-family: 'Poppins', Regular, sans-serif;

    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 700;

    --font-size-1: 12px;
    --font-size-2: 14px;
    --font-size-3: 24px;

    --font-line-height-1: 12px;
    --font-line-height-2: 14px;
    --font-line-height-3: 32px;

    --font-letter-spacing-1: 0px;
    --font-letter-spacing-2: -0.06px;
    --font-letter-spacing-3: -1.5px;
}

.container {
    height: calc(100% - 147px);
}

header {
    position: relative;
    top: 0;
    right: 0;
    left: 0;
    height: 131px;
    background-image: url(/public/images/background-header.webp);
    background-size: cover;

    display: flex;
    justify-content: center;
    align-items: center;
}

@media (min-width: 800px) {
    header {
        display: block;
        height: 147px;
    }

    header img.logo {
        margin: 40px 120px;
    }
}

header img.logo {
    height: 50%;
    width: auto;
}

button.btn {
    border-radius: 5px;
}

.form-group > input.form-control {
    border-radius: 5px;
}

span.back_arrow::before {
    font-weight: bold !important;
}

span.back_arrow {
    font-size: x-large;
    position: absolute;
    top: 0px;
    margin: 60px 35px;
    cursor: pointer;
    color: var(--background-color);
}

@media (min-width: 800px) {
    span.back_arrow {
        color: var(--text-color);
        top: 147px;
        margin: 50px 140px;
    }
}