VogelSocialMedia/code/frontend/src/Login.css

:root {
  --Rotkehlchen-gray: #e7ecf2;
  --Rotkehlchen-brown1: #a28d7a;
  --Rotkehlchen-orange-default: #e79a0e;
  --Rotkehlchen-gray-default: #E7ECF2;
  --Rotkehlchen-brown-middle: #7F6D6D;
  --Rotkehlchen-yellow-default: #FED640;
  --Rotkehlchen-yellow-hover: #EAC22A;
}

.login-display{
    display: flex;
    flex-direction: column;
    height: 100vh; /* Full viewport height */
    width: 100vw; /* Full viewport width */
    position: absolute; 
    background: var(--gradient-blue-backround-mobile, linear-gradient(270deg, rgba(20, 15, 86, 0.27) 0%, rgba(20, 15, 86, 0.58) 24%, rgba(20, 15, 86, 0.74) 43%, rgba(17, 13, 71, 0.82) 56%, rgba(13, 10, 56, 0.90) 68%), url('../public/assets/images/BirdsSky.jpg') lightgray 50% / cover no-repeat);
    align-items: center;
    justify-content: center;
    min-width: 300px;
    min-height: 400px;
}

.login-text{
    display: flex;
    padding: 8px 40px 40px 40px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 18px;
    color: var(--Rotkehlchen-gray-default);
    text-align: center;

    /* Body-L */
    font-family: Inter;
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 40px; /* 166.667% */
}

.login-icon{
    height: 32px;
    width: 32px;
    aspect-ratio: 1/1;
    align-self: center;
}

.login-button{
    display: inline-flex;
    padding: auto;
    justify-content: center;
    align-items: center;
    gap: 10px;
    width: 150px;
    height: 32px;

    border-radius: 10px;
    border: 2px solid var(--Rotkehlchen-orange-default);
    background: var(--Rotkehlchen-yellow-default);
}

.login-button:hover{
    border-radius: 10px;
    border: 2px solid var(--Rotkehlchen-orange-default);
    background: var(--Rotkehlchen-yellow-hover);
}
.login-button:active{
    border-radius: 10px;
    border: 2px solid var(--Rotkehlchen-orange-default);
    background: var(--Rotkehlchen-orange-default);
}

.login-div-input{
    display: flex;
    flex-direction: row;
    border-radius: 4px;
    border: 2px solid var(--Rotkehlchen-brown-middle);
    background: #FFF;
    width:100%;
    height: 32px;
    align-items: center;
    justify-content: flex-start;
}

.login-input{
    width: 100%;
    height: 28px;
    border: none;
    color: var(--Rotkehlchen-brown-middle);

    /* M3/body/large */
    font-family: var(--Static-Body-Large-Font, Roboto);
    font-size: var(--Static-Body-Large-Size, 16px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--Static-Body-Large-Line-Height, 24px); /* 150% */
    letter-spacing: var(--Static-Body-Large-Tracking, 0.5px);
}
.login-link{
    color: var(--Rotkehlchen-orange-default, #E79A0E);

    /* Body-M */
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 17px;
    letter-spacing: 0.8px;
}

.login-signup{
    color: #FFF;
    text-align: center;

    /* Body-M */
    font-family: Inter;
    font-size: 1rem;
    font-style: normal;
    font-weight: 600;
    line-height: 17px; /* 106.25% */
    letter-spacing: 0.8px;
}

.login-part{
    display: flex;
    padding: 8px 40px 40px 40px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 18px;
}

/* Desktop view*/
@media only screen and (min-width: 768px) {
    .login-login{
        display: flex;
        flex-direction: row;
        border-radius: 4px;
        background: rgba(13, 10, 56, 0.71);
        box-shadow: 0px 5px 8.9px 15px rgba(115, 116, 206, 0.25);
        align-items: center;
        justify-content: start;
        width: 50vw;
        height: 60vh;
        min-height: 300px;
        min-width: 400px;
    }
    
    .login-image{
        width: 100%;
        height: 100%;

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        border-radius: 8px;
        border: 5px solid var(--Rotkehlchen-gray-default);
        background-image: url("../public/assets/images/BirdLogin.jpg");
        background-size: cover;
        background-position: 75%;
    }

    .signup-image{
        width: 100%;
        height: 100%;

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        border-radius: 8px;
        border: 5px solid var(--Rotkehlchen-gray-default);
        background-image: url("../public/assets/images/OwlSignUp.png");
        background-size: cover;
        background-position: 75%;
    }

    .login-part{
        width: 45%;
        height: 90%;
        padding:3%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 1%;
    }

    

    
}