html {
    font-family: Arial;
    font-size: .75%;
    height: 100%;
}

body {
    font-family: Arial;
    font-size: 1rem;
    margin: 0;
    padding: 0;
    background-color: lightblue;
    background: radial-gradient(circle at 30% 70%, #79E0F0, #024490 40%, #024490 100%);
    background-repeat: no-repeat;
}

.input {
    width: 15rem;
    font-size: 1rem;
}

button, input[type="button"], input[type="submit"] {
    cursor: pointer;
    font-size: .9rem;
    background: linear-gradient(to bottom right, #FFFFFF, #FFFFFF 40%, #99BBBB 70%, #99BBBB 100%);
    border-radius: .5rem;
}

button:active, input[type="button"]:active, input[type="submit"]:active {
    cursor: pointer;
    font-size: .9rem;
    background: linear-gradient(to bottom right, #99BBBB, #99BBBB 30%, #FFFFFF 100%);
    border-radius: .5rem;
}

.container {
    display: flexbox;
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%;
}

.inputFile {
    position: absolute;
    z-index: -1;
    visibility: collapse;
}

.button-wrap {
    position: relative;
}

.button {
    display: inline-block;
    cursor: pointer;
    font-size: .9rem;
    padding: .15rem;
    background-color: white;
    background: linear-gradient(to bottom right, #99BBBB, #99BBBB 30%, #FFFFFF 100%);
    border-top: .1rem solid lightgray;
    border-left: .1rem solid lightgray;
    border-bottom: .1rem solid gray;
    border-right: .1rem solid gray;
    border-radius: .5rem;
}

.outlineText {
    color: white;
    text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}