body{
    background-color: white;
}

.main{
    height: 680px;
    width: 1400px;
    margin:0px auto;
    background-color: #c6c6c6;
    border-radius: 30px;
    padding-top: 30px;
    padding-right: 45px;
    padding-left: 45px;
}

.row,.row1,.row2{
    display:flex;
    flex-wrap: nowrap;
    justify-content: center;
    margin:0px auto;
    flex-direction: row;
    width: 1400px;
}

.row3,.row4{
    display:flex;
    flex-wrap: nowrap;
    justify-content: center;
    margin:0px auto;
    flex-direction: row;
    width: 1340px;
}

.row5,.row6{
    display:flex;
    flex-wrap: nowrap;
    justify-content: center;
    margin:0px auto;
    flex-direction: row;
    width: 1340px;
}

.col{
    white-space: nowrap;
    margin:5px;
    background-color: rgba(0, 0, 0, 0.849);
    color: white;
    display:block;
    border-radius: 10px;
    border:5px solid black;
}

sub{
    color: white;
    padding-right: 4px;
}

.column,.column0{
    display:flex;
    flex-wrap: nowrap;
    justify-content: center;
    margin:0px auto;
    flex-direction:column;
}

.col:hover,.break1:hover{
    box-shadow:0px 4px 10px red;
    z-index:1000;
}
.break2:hover{
    box-shadow:0px 8px 10px red;
    z-index:1000;
}

.col1{
    width:57.388px;
    height:30px;
}

.col2{
    width:61.350px;
    height: 40px;
}

.backspace{
    width:98.750px;
    height: 40px;
}

.col3{
    width: 69px;
    height: 50px;
}

.bottom{
    width: 80px;
    height: 50px;
}

.extend2{
    width:39.925px;
    height: 110px;
}

.rs1{
    width:39.925px;
    height: 30px;
}

.rs2{
    width: 39.925px;
    height: 40px;
}

.rs3{
    width: 39.925px;
    height: 50px;
}

.caps{
    width: 105px;
    height: 40px;
}

.first{
    width: 45.388px;
    height: 40px;
}

.tab{
    width: 87px;
    height: 40px;
}

.col4{
    width:61px;
    height: 40px;
}
.rs4{
    width:39.925px;
    height: 40px;
}

.extend1{
    width:39.925px;
    height: 100px;
}

.space{
    width: 310px;
    height: 50px;
}

.shift1{
    width: 149px;
    height: 40px;
}

.shift2{
    width: 163px;
    height: 40px;
}

.zero{
    width: 99.850px;
    height: 50px;
}

.enter{
    width: 125px;
    height: 40px;
}

.break1{
    padding-bottom:5px;
    border-bottom: 5px solid black;
}

.break2{
    padding-top: 3px;
}

.middle{
    text-align: center;
    padding-top: 15px;
}

.middle1{
    text-align: center;
}

.middle2{
    text-align: center;
    padding-top: 10px;
}

.middle3{
    text-align: center;
    padding-top: 5px;
}

.middle4{
    text-align: center;
    padding-top: 40px;
}

.container2{
    display:flex;
    flex-wrap: nowrap;
    justify-content: center;
    margin:0px auto;
    flex-direction: row;
}

.column1{
    background-color: #bbb8b8;
    border:2px solid black;
    width:500px;
    height:240px;
    margin-top: 40px;
    margin-left: 188px;;
    border-radius: 15px;
}

.column2{
    margin-right: 40px;
    margin-top:180px;
    margin-left:414px;
    width:100px;
    height:100px;
}

.column3{
    white-space: nowrap;
    margin:5px;
    background-color: rgba(0, 0, 0, 0.849);
    color: white;
    display:block;
    border-radius: 10px;
    border:5px solid black;
}

img{
    width: 100px;
    height:100px;
}