:root {
    --large-button-radius: 12px;
}

html, body {
    background-color: #222222;
    color: white;
    height: 100%;
    width: 100%;
    margin: 0;

    font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 18px;

    overflow: hidden;

    position: relative;
}

.center-child {
    display: flex;
    align-items: center;
    justify-content: center;
}

.round-flat-button-big {
    font-size: 24px;
    font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    color: #aaaaaa;
    background-color: transparent;
    
    border-radius: 8px;
    border-width: 2px;
    border-style: solid;
    border-color: white;

    padding: 8px;
}

.button-no-border {
    border: none !important;
    padding: 8px 20px 7px 20px !important;
}

.round-button, .round-button-big {
    font-size: 16px;
    font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    color: #ffffff;
    background-color: #ffffff07;
    
    border-radius: 8px;
    border-width: 1px 0 0 0;
    border-style: solid;
    border-color: rgba(255, 255, 255, 0.202);
    padding: 7px 30px 8px 30px;
    box-shadow: 12px 13px 27px 4px rgba(0,0,0,0.1);

    transition: 200ms background-color;

    position: relative;

    min-width: 80px;

    user-select: none;
}

.round-button:disabled {
    background-color: #ffffff05 !important;
    border-color: transparent !important;
    box-shadow: none;
    color: #aaaaaa;
    cursor: not-allowed;
}

.round-button-big {
    font-size: 24px;
    border-width: 2px 0 0 0;
    padding: 8px;
    box-shadow: 12px 13px 27px 4px rgba(0,0,0,0.1);
    border-radius: 12px;
}

.round-button:hover {
    background-color: #ffffff09;
}

.round-button:active {
    background-color: #ffffff14;
}


.button-blue {
    background-color: #1076e8;
    border-color: rgba(255, 255, 255, 0.202);
}

.button-blue:hover {
    background-color: #3384e0;
}

.button-blue:active {
    background-color: #5897df;
}

input[type=text], input[type=number] {
    font-size: 16px;
    font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    color: white;
    background-color: #ffffff07;

    border-radius: 6px;
    border-width: 2px;
    border-style: solid;
    border-color: transparent;
    padding: 8px 12px 7px 12px;

    transition: border-color 200ms;
}

input[type=text]:hover, input[type=number]:hover {
    border-color: #ffffff35;
}

input[type=text]:focus, input[type=number]:focus {
    border-color: #3384e0;
    outline: none;
}

input[type=text]:invalid, input[type=number]:out-of-range {
    border-color: #973131;
    outline: none;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}