.page {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: rgb(222, 222, 248);
    padding-top: 30px;
    
}


.screen {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50%;
    height: 300px;
    background-color: #fff;
    
    margin-bottom: 100px;
    
}

.textarea {
    width: 100%;
    height: 100%;
    border: none;  
}

.textarea:focus {
    outline: none; 
}
.textarea:focus .screen {
    border: 10px solid rgb(191, 245, 177);
    transition:all 1s ease-in;
}


.block-key-board {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 750px;
    height: 250px;
    padding: 5px;
    border: 1px solid #fff;
    gap: 5px;
    margin-bottom: 50px;
}


.key-board__key {
    width: 40px;
    height: 40px;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    outline: none;
    border: 1px solid rgb(255, 255, 255);;
    vertical-align: middle;
    text-decoration: none;
    border-radius: 2px;
    background-color:rgb(202, 202, 202);
    box-shadow: white;
    transition: all 0.2s linear;
}
.keyMaxSize {
    width: 120px;
}
.keySizeTub {
    width: 57px;
}
.keySizeEnter {
    width: 87px;
}
.keySizeShift {
    width: 80px;
}
.keySizeSpace {
    width: 288px;
}
.key-board__key:hover {
    background-color:rgb(234, 237, 248);
    transition: all 0.2s linear;
}

.key-board__key:active{
    background-color:rgb(56, 92, 223);
    transition: all 0.2s linear;
}

.key-board__key--active {
    background-color:rgb(234, 237, 248);
    transition: all 0.2s linear;
}

.rules {
    display: flex;
    align-items: center;
    gap: 20px;
}
.rules_img-win {
    margin-top: -5px;
    width: 60px;
    height: auto;
}