body
{
    background-color: #1B2838;
    margin: 0;
    font-family: Arial;
    color: #FFFFFF;
    text-align: center;
    overflow: hidden;
}

.settings
{
    background-color: #141D25;
    width: 100vw;
    height: 5rem;
    padding-top: 2rem;
}

.upload
{
    display: inline-block;
}

.upload h1
{
    margin: 0;
    font-size: 16px;
}

input[type="number"]
{
    border: 1px solid #000000;
    box-shadow: 1px 1px 1px #808080;
    font-size: 16px;
    background-color: #2A3F5A;
    color: #FFFFFF;
    border-radius: 5px;
}

input[type="file"]
{
    padding: 2px;
    font-size: 16px;
    background-color: #2A3F5A;
    color: #FFFFFF;
}

input[type="button"]
{
    border: none;
    padding: 4px;
    font-size: 16px;
    font-weight: bold;
    background: linear-gradient(to right, #50C92F, #18B14E);
    color: #FFFFFF;
}

input[type="button"]:hover
{
    cursor: pointer;
    background: linear-gradient(to right, #70D61D, #39BF3D);
}

.preview
{
    position: absolute;
    margin-left: 10%;
    margin-top: 5%;
    width: 80vw;
    height: calc(100% / 3);
    overflow: hidden;
}

#background
{
    width: 100%;
    height: 120%;
    object-fit: cover;
    object-position: center;
}

#logo
{
    display: block;
    position: relative;
    width: 47.00537570741423%;
    height: 71.88316314414627%;
    object-fit: contain;
    object-position: center;
    transform: translate(-50%, 0%);
}