*, ::after, ::before{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

@font-face {
    font-family: "FatFrankHeavy";
    src: url("../fonts/FatFrank_Heavy_Regular.ttf") format("truetype");
    font-weight: normal;
}

:root{
    --main-color: hsl(128 52% 18%);
    --main-light-color: hsl(128 52% 70%);
    --accent-color: hsl(25 93% 48%);
    --accent-light-color: hsl(25 93% 80% / 1);
    --grey-color: hsl(25 12% 48% / 1);
    --dark-color: hsl(25 93% 10% / 1);

    --pad-xs: 0.25rem;
    --pad-sm: 0.5rem;
    --pad-lg: 1rem;
    --pad-big: 2rem;

    --b-s: rgba(149, 157, 165, 0.2) 0px 8px 24px;

    --bd-r: 8px;
}

:not(i){
    font-family: 'Google Sans Text', Roboto, 'Helvetica Neue', Helvetica, sans-serif !important;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

.login-section{
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--main-color);
}

.login-container {
    max-width: 450px;
    padding: var(--pad-big);
    background: white;
    border-radius: var(--bd-r);
    box-shadow: rgba(10, 10, 10, 0.8) 0px 8px 24px;
}

.form-group {
    position: relative;
    margin: var(--pad-big) 0;
}

form h1 {
    margin-bottom: var(--pad-lg);
}

.form-group input {
    padding: var(--pad-sm);
    padding-left: 0;
    width: 100%;
    transition: 0.5s;
    border-bottom: 1px solid var(--dark-color);
    border-width: 0 0 1px 0;
}

.form-group input:focus{
    outline: none !important;
}

.form-group input::placeholder{
    opacity: 0;
    color: red;
}

.form-group label {
    padding: var(--pad-sm);
    padding-left: 0;
    position: absolute;
    left: 0;
    width: 100%;
    transition: transform 0.5s;
    transform: translateY(-2px);
}

.form-group input:focus + label, .form-group input:not(:placeholder-shown) + label {
    transform: translateY(calc(-1.5 * var(--pad-lg)));
}

.form-group input:valid {
    border-bottom-color: var(--accent-color);
}

[type="submit"].form-control {
    margin: 0 auto;
    display: block;
    background: var(--accent-color);
    padding: var(--pad-sm) var(--pad-big);
    color: white;
    border-radius: 10rem;
    border: 2px solid var(--accent-light-color);
    font-weight: bold;
    cursor: pointer;
    transition: 0.5s;
}

[type="submit"].form-control:hover, [type="submit"].form-control:focus {
    background: var(--main-color);
    border-color: var(--main-light-color);
}

.alert.alert-danger {
    background: #f8d7da;
    padding: var(--pad-lg);
    color: #721c24;
}