@import url('https://fonts.googleapis.com/css2?family=Mulish:wght@300;400&display=swap');

body {
    width: 100vw;
    min-height: 100vh;
    background: #f5f5f5;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.container {
    font-family: 'Electrolize', sans-serif;
    font-family: 'Mulish', sans-serif;
    width: 27rem;
    border-radius: 1rem;
    padding: 2rem 2rem;
    border-radius: 20px;
    display: flex;
    position: relative;
    align-items: center;
    flex-direction: column;
    box-shadow: 
      inset 0 0 15px rgba(55, 84, 170,0),
      inset 0 0 20px rgba(255, 255, 255,0),
      7px 7px 15px rgba(55, 84, 170,.15),
      -7px -7px 20px rgb(241, 241, 241),
      inset 0px 0px 4px rgba(255, 255, 255,.2);
}

.btnContainer {
    width: 85%;
    display: grid;
    position: relative;
    top: 4rem;
    left: 0.4rem;
    grid-gap: 01.2rem;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(6, 4rem);
}

.screen {
    width: 80%;
    height: 2rem;
    font-family: 'Mulish', sans-serif;
    grid-column: 1/-1;
    position: relative;
    top: 1.5rem;
    font-size: 1.7rem;
    display: flex;
    justify-content: flex-end;
    padding: 0.3rem 0;
    overflow-y: hidden;
    color: rgb(110, 110, 110);
    border-bottom:2px solid rgb(168, 168, 168);
}

.button {
    width: 80%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 1.7rem;
    cursor: pointer;
    font-size: 1.6rem;
    margin-top: 0.2rem;
    position: relative;
    font-weight: 400;
    transition: 0.1s;
    color: rgb(97, 97, 97);
    box-shadow: 5px 5px 10px rgba(0,0,0,0.1),
    -5px -5px 10px rgba(255,255,255,0.5);
}

.button:active {
    box-shadow: 5px 5px 10px rgba(0,0,0,0.1),
    -5px -5px 10px rgba(255,255,255,0.5),
    inset -5px -5px 5px rgba(255, 255, 255, 0.36),
    inset 5px 5px 5px rgba(0,0,0,0.09),
    inset 5px 5px 10px rgba(0,0,0,0.07);
}

.btnContainer div:nth-child(19) {
    color: rgb(21, 21, 21);
    background-color: #b7b0f4;
    grid-column: 3/5;
    grid-row: 5/6;
    padding: 0 0.6rem;
    border-radius: 1.5rem;
}

.btnContainer div:nth-child(19):active {
    box-shadow: 5px 5px 10px rgba(0,0,0,0.1),
    -5px -5px 10px rgba(255,255,255,0.5),
    inset -5px -5px 5px rgba(255, 255, 255, 0.1),
    inset 5px 5px 5px rgba(0,0,0,0.09),
    inset 5px 5px 10px rgba(0,0,0,0.07);
}

.logo {
    margin-top: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    cursor: default;    color: rgb(72, 72, 72);
}