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

body {
    height: 100vh;
}

.wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    min-width: 38rem;
    display: flex;
    flex-direction: column;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}


.login-container {
    background: linear-gradient(45deg,green 0%, rgb(93, 223, 93) 100%);
    padding: 1rem;
    display: flex;
    flex-direction: row;
    border-radius: 1.2rem;
}

.login-info {
    display: flex;
    flex-direction: column;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    overflow: hidden;
    min-width: 15rem;
    padding-left: 1rem;
}


.login-headline {
    font-weight: bold;
    color: white;
}

.login-txt {
    font-weight: lighter;
    color: white;
    font-size: 0.9rem;
}

.login-input {
    font-size: 0.8rem;
    color:black;
    width: auto;
    font-size: 0.9rem;
}

.login-btn {
    border-style: none;
    border-radius: 0.3rem;
    color: green;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-weight: bold;
    font-size: 0.8rem;
    width: auto;
}

.login-btn:focus {
    border-color: black;
    border-style: double;
}

.login-btn:hover {
    border-color: red;
    border-style: double;
}

.es-img {
    display: block;
    max-height: 192px;
    max-width: 192px;
    height: auto;
    width: auto;
}