* {
    padding: 0;
    margin: 0
}

body {
    background: radial-gradient(50% 50% at 50% 50%, rgba(240, 180, 135, 0.8) 0%, rgba(219, 152, 101, 0.8) 100%);
    height: 100vh;
    width: 100vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-family: Arial, Helvetica, sans-serif;
}

h1 { 
    margin: 20px;
    color: #fafafa;
    text-shadow: 2px 2px 2px black;
}

h2, h3{
    margin: 20px;
}

p {
    text-align: center;
}

h4 {
    margin: 20px;
}

img {
    width: auto;
    height: 200px;
    border-radius: 10px;
    box-shadow: 3px 3px 3px black;
    transition: .3s
}

img:hover {
    transform: scale(3);
    transition: .3s;
}

a {
    text-decoration: none;
    color: rgb(48, 108, 161)
}

p {
    margin: 20px;
}
.main-wrapper {
    background: radial-gradient(50% 50% at 50% 50%,#D9D9D9   0%, #FFFAE2 100%);
    height: 40%;
    width:40%;
    border-radius: 10px;
    box-shadow: 3px 3px 10px black;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.login-options {
    width: 90%;
    display:flex;
    justify-content: space-around;
    align-items: center
}

.the-useless-fact {
    width:80%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}
form {
    height: 50%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}

input {
    font-size: 20px;
    padding:2px;
    border-radius: 5px;
}

button {
    background-color: rgb(48, 108, 161);
    color: #FFFAE2;
    font-size: 20px;
    padding: 7px;
    border-radius: 5px;
}

.form-wrapper {
    display: inline;
}

.alert{
    color: red;
    font-weight: bold;
}


footer {
    margin: 50px;
}

@media only screen and (max-width: 500px) {
    img {
        height:100px;
    }
    button {
        font-size: 15px;
    }
    .main-wrapper {
        width: 90%;
    }
    p {
       font-size: 15px;
    }
 }