* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%
}

body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #ac9eca;
}

.container {
    display: flex;
    flex-direction: column;
    align-items: center;

    /* dimensions */
    min-height: 50vh;
    min-width: 22vw;

    /* design */
    background-color: #cbbee2;
    border: 3px solid #dedae5;
    border-radius: 10%;
}

.display, .circles {
    width: 100%;
    min-height: 12vh;
}

.display {
    border-bottom: 3px solid #dedae5;
    font-size: 45px;
    font-family: 'Lexend', sans-serif;;
    display: flex;
    align-items: center;
    padding-left: 30px;
}

.circles {
    display: flex;
    min-height: 45vh;
    padding: 5px;
}
.circles button {
    border-radius: 23%;
    border: none;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    font-size: 40px;
    padding: 15px;
    margin: 15px 7.5px;
    font-family: 'Lexend', sans-serif;
}
.digits {
    margin-left: 7.5px;
}

.nondigits {
    margin-right: 7.5px;
    display: flex;
    flex-direction: column;
}

h1 {
    font-size: clamp(25px, 7vw, 55px);
}

.press-start-2p-regular {
  font-family: "Press Start 2P", system-ui;
  font-weight: 400;
  font-style: normal;
}