@import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inria+Sans:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Sacramento&display=swap');


:root {
    --lobster: 'Lobster', cursive;
    --caveat: 'Caveat', cursive;
    --sacra: 'Sacramento', cursive;
    --inria: 'Inria Sans', sans-serif;
    --satisfy: 'Satisfy', cursive;
    --main-color: blanchedalmond;
}

body {
    background-image: url("../assets/login-bg.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    color: black;
    font-family: var(--inria);
}

.h2-header {
    /* font-family: var(--sacra); */
    font-family: var(--caveat);
    /* font-size: 3.5rem; */
    font-size: 2.5rem;
    padding: 1rem 0rem;
    text-align: center;
}

p {
    text-align: center;
    font-family: var(--caveat);
}

.main-content {
    padding: 15vh 35vh;
}

.middle-content {
    padding: 2vh;
    background-image: url("../assets/bg-white.jpg");
    background-repeat: no-repeat;
    background-size: cover;
}

.form-left {
    background-image: url("../assets/bg-white.jpg");
    background-repeat: no-repeat;
    background-size: cover;
}

#img-right {
    width: 100%;
    height: 66vh;
    object-fit: cover;
}

.button-87 {
    margin: 10px;
    padding: 10px 30px;
    text-align: center;
    text-transform: uppercase;
    transition: 0.2s;
    background-size: 200% auto;
    color: white;
    border-radius: 2rem;
    /* display: block; */
    border: 0px;
    font-weight: 700;
    box-shadow: 0px 0px 14px -7px #f09819;
    background-image: linear-gradient(45deg, #FF512F 0%, #F09819 51%, #FF512F 100%);
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
}

.button-87:hover {
    background-position: right center;
    color: #fff;
    text-decoration: none;
}

.button-87:active {
    transform: scale(0.95);
}

.button-signup {
    margin: 10px;
    padding: 10px 30px;
    text-align: center;
    text-transform: uppercase;
    transition: 0.2s;
    background-size: 200% auto;
    color: white;
    border-radius: 2rem;
    /* display: block; */
    border: 0px;
    font-weight: 700;
    box-shadow: 0px 0px 14px -7px #45423e;
    background-image: linear-gradient(45deg, #250c07 0%, #482d08 51%, #832917 100%);
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
}

.button-signup:hover {
    background-position: right center;
    color: #fff;
    text-decoration: none;
}

.button-signup:active {
    transform: scale(0.95);
}

.login-form {
    padding: 5rem 6vh;
}

.form-control {
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 2px solid black;
    border-radius: 0px;
    background-color: transparent;
    font-size: larger;
}

.form-control:focus {
    background-color: transparent;
    outline: none;
    box-shadow: none;
}

.home-redirect {
    color: black;

}

.home-redirect:hover {
    color: #FF512F;
    text-decoration: none;
}

.message {
    color: red;
    font-style: italic;
}