@import url('https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;700&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Lato', sans-serif;
transition: .2s;
}
.container {
display: flex;
justify-content: center;
align-items: center;
height: 150vh;
flex-direction: column;
margin: 0 10px;
}
.keyboard_wrapp {
max-width: 600px;
width: 100%;
background-color: #e7e7e7;
overflow: visible;
position: relative;
order: 2;
border: 2px solid;
border-radius: 6px;
}
.row {
display: flex;
gap: 2px;
}
.keys {
width: 38px;
height: 38px;
background-color: #fff;
display: flex;
justify-content: center;
align-items: center;
margin: 3px;
transition: .2s;
z-index: 5;
font-weight: bold;
font-size: 18px;
border: 2px solid;
border-radius: 4px;
}
.clear_key {
font-size: 12px;
}
.backspace_key {
width: 80px;
font-size: 13px;
}
.tab_key {
width: 70px;
font-size: 13px;
}
.slash_key {
width: 55px;
}
.semi_colon {
width: 10px;
font-size: 10px;
}
.caps_lock_key {
width: 80px;
font-size: 13px;
}
.enter_key {
width: 80px;
font-size: 13px;
}
.shift_key {
width: 100px;
font-size: 13px;
}
.ctrl_key,
.alt_key,
.fn_key,
.win_key {
font-size: 12px;
}
.space_key {
max-width: 250px;
width: 100%;
}
.text {
max-width: 1000px;
height: 425px;
width: 100%;
margin-bottom: 30px;
overflow: visible;
border: none;
outline: none;
font-size: 35px;
background-color: #f7f7f7;
padding-left: 10px;
transition: .2s;
}
.keys.active {
background-color: #333;
color: #fff;
}
.keys.remove {
animation: keys_animation 0.5s forwards;
}
@keyframes keys_animation {
0% {
background-color: #333;
color: #fff;
}
100% {
background-color: #fff;
color: #000;
}
}
body.active {
background-color: rgb(54,54,54);
}
.night_mode {
width: 80px;
height: 30px;
background-color: #e6e6e6;
position: absolute;
right: 25px;
top: 25px;
border-radius: 50px;
display: flex;
align-items: center;
cursor: pointer;
transition: .2s;
}
.night_mode.active {
background-color: #222222;
}
.toggle_circle {
width: 20px;
height: 20px;
background-color: rgb(54,54,54);
border-radius: 50px;
margin: 0 5px;
position: absolute;
left: 0;
transition: .2s;
}
.toggle_circle.active {
left: 60%;
background-color: #fff;
}
.keyboard_wrapp.active {
background-color: #585858;
}
.keys.keys_night {
background-color: #3c3c3c;
color: #fff;
}
.text.active {
background-color: #2b2b2b;
color: #fff;
}
.keys.keys_night.active {
background-color: #fff;
color: #333;
}
.keys.keys_night.remove {
animation: keys_night_animation 0.5s forwards;
}
@keyframes keys_night_animation {
0% {
background-color: #fff;
color: #000;
}
100% {
background-color: #333;
color: #fff;
}
}
.keyboard_lights {
position: absolute;
width: 100%;
height: 100%;
}
.arabic_input {
text-align: right;
direction: rtl;
padding: 15px;
font-size: 35px;
border: 3px solid black;
}
.link-btn {
text-decoration: none;
font-weight: bold;
padding: 10px;
border-radius: 4px;
border: 2px solid #0d6efd;
margin: 5px;
}
.link-btn:hover {
background-color: #0d6efd;
color: white;
font-weight: bold;
}
.center {
display: flex;
justify-content: center;
align-items: center;
height: 40px;
margin-bottom: 15px;
}