*,*::before,*::after{
    padding:0;
    margin:0;
    box-sizing:border-box;
}
html{
    font-size:62.5%;
    scroll-behavior:smooth;
}
body{
    width:100vw;
    min-height:100vh;
    background:hsl(0deg,0%,50%);
    display:flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap:4rem
}
.display{
    width:42rem;
    aspect-ratio: 3/1;
    background:crimson;
    border-radius: 1rem;
    box-shadow: 0rem 0rem 1rem black;
    font:normal normal bold 2.2rem arial;
    cursor: pointer;
    text-align: center;
    align-content: center;
    user-select: none;
    line-height: 4rem;
}
form{
    /* width:30rem; */
    height:auto;
    background: tan;
    padding:1rem;
    border-radius:1rem;
    box-shadow: 0rem 0rem 2rem black;
}
label{
    cursor: pointer;
}
label:active{
    cursor: grabbing;
}
form div{
    font-size:3rem;
    font-family: arial;
    gap:2rem;
    margin-bottom: 1.5rem;
    padding:.5rem 0rem;
}

form div label{
    display: inline-block;
    width:20rem;
}form div input{
    display: inline-block;
    width:20rem;
    padding:.8rem 1rem;
    border:none;
    outline:none;
    border-radius:.5rem;
    font-size: 2rem;
    box-shadow: 0rem 0rem .3rem black;
}

form div input:focus{
    outline: .2rem solid rgb(253, 47, 98);;
}

form div:nth-child(6) input{
    cursor: pointer;
}
form div:nth-child(6) input:focus{
    border: none;
}

form div:nth-child(6) input:hover{
    background: tomato;
    color:white;
}

form div:nth-child(6) input:active{
    cursor: grabbing;
}