@tailwind base;
@tailwind components;
@tailwind utilities;
@font-face {
    font-family: "Droid Arabic Kufi";
    font-style: normal;
    font-weight: 400;
    src: url(//fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Regular.eot);
    src: url(//fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Regular.eot?#iefix) format("embedded-opentype"),url(//fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Regular.woff2) format("woff2"),url(//fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Regular.woff) format("woff"),url(//fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Regular.ttf) format("truetype")
}

@font-face {
    font-family: "Droid Arabic Kufi";
    font-style: normal;
    font-weight: 700;
    src: url(//fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Bold.eot);
    src: url(//fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Bold.eot?#iefix) format("embedded-opentype"),url(//fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Bold.woff2) format("woff2"),url(//fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Bold.woff) format("woff"),url(//fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Bold.ttf) format("truetype")
}

@font-face {
    font-family: "Droid Arabic Naskh";
    font-style: normal;
    font-weight: 400;
    src: url(//fonts.gstatic.com/ea/droidarabicnaskh/v7/DroidNaskh-Regular.eot);
    src: url(//fonts.gstatic.com/ea/droidarabicnaskh/v7/DroidNaskh-Regular.eot?#iefix) format("embedded-opentype"),url(//fonts.gstatic.com/ea/droidarabicnaskh/v7/DroidNaskh-Regular.woff2) format("woff2"),url(//fonts.gstatic.com/ea/droidarabicnaskh/v7/DroidNaskh-Regular.woff) format("woff"),url(//fonts.gstatic.com/ea/droidarabicnaskh/v7/DroidNaskh-Regular.ttf) format("truetype")
}

@font-face {
    font-family: "Droid Arabic Naskh";
    font-style: normal;
    font-weight: 700;
    src: url(//fonts.gstatic.com/ea/droidarabicnaskh/v7/DroidNaskh-Bold.eot);
    src: url(//fonts.gstatic.com/ea/droidarabicnaskh/v7/DroidNaskh-Bold.eot?#iefix) format("embedded-opentype"),url(//fonts.gstatic.com/ea/droidarabicnaskh/v7/DroidNaskh-Bold.woff2) format("woff2"),url(//fonts.gstatic.com/ea/droidarabicnaskh/v7/DroidNaskh-Bold.woff) format("woff"),url(//fonts.gstatic.com/ea/droidarabicnaskh/v7/DroidNaskh-Bold.ttf) format("truetype")
}

:root {
  --foreground: #ffffff;
  --button-background-color:white;
  --background: #4db5e3;
  --color-text:#000000;
  --font-family: "Droid Arabic Kufi","Helvetica Neue",Helvetica,Roboto,Arial,sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #4db5e3;
    --foreground: #ededed;
  }
}
*{
  font-family: var(--font-family) !important;

}
body {
  color: var(--color-text);

  /* background: var(--background); */
  font-family: var(--font-family);

}

.tb-keyboard {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap:10px;
  font-size: 10px;
}
.tb-keyboard-row{
  display: flex;
  flex-direction: row-reverse;
  gap:5px;
}

.tb-keyboard-key{
  padding:5px;
  border-radius: 3px;
  display: flex;
  flex-direction: column;
  background-color: skyblue;
}

.backspace, .tab, .ctrl{
  width: 50px;
}
.alt{
  width: 15px;
}
 .caps, .enter{
  width: 50px;
}
.shift-left , .shift-right{
  width:80px;
}
.space{
  width:230px;
}
.tb-keyboard-row:last-child{
  height: 40px;
}

.active{
  background-color: #4db5e3 ;
}
.wrong{
  background-color: red;
}