* {
    margin:0;
    padding:0;
    font-family:"Calibri";
    box-sizing:border-box;
    color:white;

}


body { 
    width : 100vw; /* viewport width + viewport height */
    height : 100vh;
    background-image: url("background.jpg"); 
    background-size : cover;
}

.container{
    padding:4%;
    min-width:500px;
    max-width:570px;
    max-height:90%;
    background : linear-gradient(105deg, #5f2c82, #49a09d);
    border-color:white;
    border-style:solid;
    position:absolute;
    left:50%; top:50%;
    transform:translate(-50%,-50%);
}

.header{
    margin-bottom:30px;
    font-size:35px;
    text-align:center;
    font-family: "Arial Narrow Bold";
}

.UserInput *{
    padding:12px;
    display:inline-flex;
    margin:auto;
    font-size:15px;
    text-align:center;
    border-color:grey;
    justify-content:center;
    left:50%
}

.dropDown label{
    color:white;
    
}

.dropDown select{
    color:black;
}
.dropDown select option{
    color:black;
}

button{
    color:black;
    border:solid;
    border-color:grey;
}

@media (max-width: 768px) {
    .header {
        font-size: 28px;
    }
    .UserInput * {
        font-size: 14px;
        padding: 10px;
    }
    html{
        height:100vh;
    }
    .container{
        max-height:100%;
    }
}