@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
 body{
            margin: 0;
            min-height: 100vh;
            font-family:'Roboto', sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            background: linear-gradient(109.6deg, rgb(255, 207, 84) 11.2%, rgb(255, 158, 27) 91.1%);

        }
        .screen-content{
            background-image: 
            linear-gradient(
                140deg, #3b3e4c, #1e222f
            );
            padding: 20px;
            border-radius: 40px;
            box-shadow: 50px 150px 150px #2b2e36;
        }
        .screen-content .screen{
            height: 200px;
            padding-top: 50px;
            color: #bbb;
            font-size: 50px;
            text-align: right ;
        }
        .screen-content .screen .new{
            color: #fff;
            font-size: 80px;
        }
        .screen-content .keys{
            display: grid;
            grid-template-columns: repeat(4, 70px);
            grid-template-rows: repeat(5, 70px);
            gap: 10px;
        }
        .screen-content .keys button{
            border-radius: 20px;
            border: none;
            font-size: x-large;
            color: #efefef;
            background-image: linear-gradient(
                140deg, #262b39, #323847
            );
            box-shadow: inset 5px 5px 5px  #323847,
            inset -5px -5px 5px #323847,
            5px 5px 5px #1d1f25
            ;
        }
        .screen-content .keys button:nth-child(17){
            grid-column-start: 1;
            grid-column-end: 3;
        }
        .screen-content .keys button:nth-child(-n+3){
            background-image: 
            linear-gradient(
                140deg, #3b424d, #5d697a
            );
            box-shadow: inset 5px 5px 5px #5d697a,
            inset -5px -5px 5px #5d697a,
            5px 5px 5px #1d1f25;
        }
        .screen-content .keys button:nth-child(4n),
        .screen-content .keys button:nth-child(19){
            background-image: 
            linear-gradient(
                140deg, #bc5a17, #e09121
            );
            box-shadow: inset 5px 5px 5px #e09121,
            inset -5px -5px 5px #e09123,
            5px 5px 5px #1d1f25;
        }
        .screen-content .keys button:active{
            box-shadow:none;
        }