/**
 * THM - Wirtschaftsinformatik Projekt 1: TextMessenger
 * 
 * @created 04.05.2023 
 * @author Julien Liam Fuchs
 * 
 * @Kurzbeschreibung:
 * CSS für Login und Register Seite
 */

*{
    margin: 0;
    padding: 0;
}
html{
    height: 100%;
}
/* Hintergrund */
body{
    height: 100%;
    background: radial-gradient(#6f6c6c, rgb(26, 23, 23));
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;

    display: flex;
    justify-content: center;
    align-items: center;
}
/* Rahmen */
form {
 height: 575px;
 width: 500px;
 padding: 40px;
 border-radius: 8px;
 background-color: #302a2a;
 box-shadow: 4px 4px 1px rgba(0, 0, 0, 404);
 
 display: flex;
 flex-direction: column;
 justify-content: space-evenly;
 align-items: center;

}
/* Große Überschrift */
h1{
    color: white;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    background-image: linear-gradient(to right,rgb(225, 164, 85), rgb(211, 161, 36));
    background-size: 100% 4px;
    background-position: bottom;
    background-repeat: no-repeat;
    line-height: 60px;
}
/* Eingaben */
.eingaben{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

input{
    height: 64px;
    width: 240px;
    margin: 15px;
    padding: 0px 25px;
    border-radius: 10px;
    border: none;
    background-color: #6f6c6c;
    box-shadow: 3px 3px 6px rgba(0,0,0,0.212);
    color: white;
    font-size: 20px;
    transition: 0.3s;
}
input:hover{
    background-color: #5e5555;
}
input:focus{
    outline: none;
    background-color: #5e5555;
    width: 265px;
}
input::placeholder{
    color: rgb(159, 161, 190)
}
button{
    height: 64px;
    width: 140px;
    border-radius: 1000px;
    border: none;
    color: #fbc45f;
    font-family: sans-serif;
    font-size: 22px;
    background: linear-gradient(to right, rgb(111,108,108), rgb(41, 40, 40));
    transition: 0.3s;
}
button:hover{
   width: 200px; 
}
button:focus{
outline: none;
width:200px
}
@media(max-width: 650px){
    form{
        height: 100%;
        width: 100%;
        justify-content: center;
    }
    .eingaben{
        margin: 80px;  
    }
    h1{
        font-size: 32px;
    }
}