@import url("https://fonts.googleapis.com/css?family=Poppins");

* {
    font-family: 'Poppins', sans-serif;
    color: white;
}

body {
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
    overflow: hidden;

    background-color: #323e51;
}

h1 {
    margin: 5px;
}

hr {
    width: 100%;
}

#page-container {
    width: 100%;
    max-width: 800px;
    margin: auto;

    display: flex;
    flex-direction: column;
    gap: 10px;
}

#keypad-img {
    width: 100%;
}

#keypad-container {
    width: 100%;
    aspect-ratio: 160/100;
    padding-top: 50px;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5%;

    background-image: url("/static/assets/keypad.svg");
    background-size: cover;
}

.keypad-row-top {
    width: 58%;
    height: 24%;

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 5.97%;

    background-color: #666;

    border-radius: 5px;
}

.keypad-row-bottom-container {
    width: 66.3%;
    height: 60.22%;
    
    display: flex;
    flex-direction: row;
}

.keypad-row-bottom-container-half {
    width: 50%;
    height: 100%;

    position: relative;

    display: flex;
    flex-direction: column;

    opacity: 1;

    transition: opacity 0.2s;
}

.keypad-row-bottom-container-half:hover {
    opacity: 0.6;
    cursor: pointer;
}

.keypad-row-bottom {
    width: 100%;
    height: 50%;
    overflow: hidden;
}

.keypad-row-bottom-piece {
    width: 100%;
    height: 100%;

    background-color: #000;
}

.keypad-row-bottom-piece.top-left {
    margin-left: 11%;
    transform: skewX(-20deg);
}

.keypad-row-bottom-piece.top-right {
    margin-left: -11%;
    transform: skewX(20deg);
}

.keypad-row-bottom-piece.bottom-left {
    margin-left: 11%;
    transform: skewX(20deg);
}

.keypad-row-bottom-piece.bottom-right {
    margin-left: -11%;
    transform: skewX(-20deg);
}

.keypad-key-container {
    height: 60%;
    aspect-ratio: 1/1;

    text-align: center;
    font-size: 50px;

    background-color: black;

    border-radius: 5px;

    user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;

    transition: background-color 0.2s;
}

.keypad-key-container-bottom-row {
    position: absolute;
    top: 40%;

    font-size: 50px;

    user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
}

.keypad-key-container-bottom-row.left {
    left: 50%;
}

.keypad-key-container-bottom-row.right {
    right: 50%;
}

@media (max-width: 800px) {
    .keypad-key-container {
        font-size: 6.3vw;
    }
}

.keypad-key-container:hover {
    background-color: #444;
    cursor: pointer;
}

.row-container {
    display: flex;
    flex-direction: row;
    gap: 10px;
}

.row-container.wrap {
    flex-wrap: wrap;
}

.row-container.center {
    justify-content: center;
}

.std-button {
    padding: 5px;

    border: solid white 2px;
    border-radius: 10px;

    font-size: 20px;

    user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;

    transition: background-color 0.2s;
}

.std-button:hover {
    cursor: pointer;
}

.std-button.disabled:hover {
    cursor: default;
}

.std-button.green {
    background-color: #51AE5C;
}

.std-button.green:hover {
    background-color: #73BF7C;
}

.std-button.green.disabled:hover {
    background-color: #51AE5C;
}

.std-button.red {
    background-color: #B94A46;
}

.std-button.red:hover {
    background-color: #C76E6B;
}

.std-button.red.disabled:hover {
    background-color: #B94A46;
}

.std-button.blue {
    background-color: #4655b9;
}

.std-button.blue:hover {
    background-color: #6B77C7;
}

.std-button.blue.disabled:hover {
    background-color: #4655b9;
}

.std-text-input {
    width: 200px;
    padding: 5px;

    font-size: 20px;

    border: solid white 2px;
    border-radius: 10px;

    background-color: #000;
    color: white;
}

.hidden {
    display: none;
}