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

body{
font-family: 'Poppins', sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
background: linear-gradient(135deg,black,darkblue);
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
.box{
position: relative;
width: 50%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
z-index: 11;
}

div{
    display: flex;
}
.value{
width: 1139px;
height: 120px;
border: 0px;
outline: 0px;
padding: 30px;
font-size: 35px;
text-align: left;
background: transparent;
color: white;
border-bottom: 1px solid white;
border-right: 1px solid white;
border-radius: 0px 20px 0px 0px;
}
.num{
width: 75px;
height: 75px;
border-bottom: 1px solid white;
border-right: 1px solid white;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
font-size: 25px;
color: white;
transition: 1s;
cursor: pointer;
user-select: none;
}
.buttom{
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}


span:hover{
background: rgba(255,255,255,0.3);
transition: 0s;
}


.num:active{
background: rgba(255,255,255,1);
color: blue;
}
.space{
width: 532px;
}
.Back{
width: 150px;
font-size: 20px;
}
.tab{
width: 120px;
font-size: 20px;
}
.ex{
width: 105px;
font-size: 20px;
}
.caps{
width: 150px;
font-size: 20px;
}
.enter{
width: 151px;
font-size: 20px;
}
.shift{
    width: 188.5px;
    font-size: 20px;
}
.tool{
width: 100px;
font-size: 20px;
}
body::before{
content: '';
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
background: linear-gradient(105deg,transparent,rgba(255,255,255,0.7));
clip-path: circle(30% at 70% 20%);
}
body::after{
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(125deg,transparent,rgba(255,255,255,0.7));
clip-path: circle(25% at 25% 80%);
}
.keyboard{
border-radius: 20px;
border-left: 3px solid white;
border-top: 3px solid white;
background: linear-gradient(45deg,rgba(255,255,255,0.2),transparent);
backdrop-filter: blur(30px);
}
.ctrl1{
border-radius: 0px 0px 0px 20px;
}
.ctrl2{
border-radius: 0px 0px 20px 0px;
}