@font-face {
    font-family: Ahom;
    src: url(../fonts/ahom.woff);
}
@font-face {
    font-family: Manuscript;
    src: url(../fonts/manuscript.woff);
}
@font-face {
    font-family: Comic Sans;
    src: url(../fonts/comicsans.woff);
}
@font-face {
    font-family: Bahnschrift;
    src: url(../fonts/bahnschrift.woff);
}
*{
    margin: 0;
    box-sizing: border-box;
}
body{
    background:#bf2a2c;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}
.app{
    background: #fff;
    width: 90%;
    max-width: 800px;
    border-radius: 10px;
    padding: 30px;
    padding-bottom: 10px;

}
.app h1{
    font-family: 'Poppins', 'sans-serif';
    font-size:35px;
    color:#001e4d;
    font-weight: 600;
    border-bottom: 1px solid #333;
    padding-bottom: 30px;
}
.main{
    padding: 20px 0;
}
.main h2{
    font-size: 18px;
    color: #001e4d;
    font-weight: 600;
}
.btn{
    background: #eaeaea91;
    color: #222;
    font-weight: 500;
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    text-align: left;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s;
}
.btn:hover:not([disabled]){
    background: #00838F;
    color: #fff;

}
.btn:disabled{
    cursor: no-drop;
}

#next-btn{
    display: block;
    background: #696969;
    color: #fff;
    font-weight: 500;
    width: 150px;
    border: 0px;
    padding: 10px;
    margin: 20px auto 0;
    border-radius: 4px;
    cursor: pointer;
}

.correct{
    background: #9aeabc; 
}

.incorrect{
    background: #ff9393;
}

#audio-btn{
    display: flex;justify-content: center;
}

#audio-btn img{
    cursor: pointer;
}

form{
    display: flex;
}

#searchBox{
    width:100%;
    border: 1px solid lightgray;
    padding:5px;
    padding-left:10px;
}

#searchBtn{
    background: #78cdd4;
    padding: 5px 10px 5px 10px;
    border: none;
}

.wrapper{
    text-align:justify;
    font-family:Bahnschrift;
    height:68vh;
    margin-top:15px;
    border:1px solid lightgray;
    border-radius:5px;
    padding:5px;
    padding-left:10px;
    overflow-y:scroll;
}

details{
    margin-top:5px;
}

.word{
    padding: 0px 10px;
    margin-left: 20px;
    background: yellow;
}

.word-definition{
    display: block;
    font-family: Roboto;
    font-weight: 600;
    margin-left: 24px;
}

.word-example{
    display: block;
    font-weight: 100;
    margin-left: 24px;
    text-decoration: underline;
    padding-top: 15px;
}


.ahom{
    font-family: Ahom;
    font-size: 32px;
    font-weight: normal;
}

.manuscript{
    font-family: Manuscript;
    font-size: 32px;
    font-weight: normal;
}

.unicode{
    font-size:17px;
}

.english{
    font-family:Comic Sans;
    font-size:1rem;
}

.smoll{
    font-size:28px;
}

.loadingScreen{
    display: flex;
    align-items: center;
    justify-content: center;
    height:100%;
    visibility: hidden;
}

.loader {
    border: 4px solid #f3f3f3; /* Light grey */
    border-top: 4px solid #3498db; /* Blue */
    border-radius: 50%;
    width: 30px;
    height: 30px;
    animation: spin 2s linear infinite;
}

    @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

table{
    width:100%;
    font-family:Comic Sans;
    margin-top:10px;
}
th, td {
    padding: 15px;
    text-align: center;
}

td img{
    cursor:pointer;
    width:40px;
    filter: hue-rotate(110deg);
}

table img{
    display:block;
    user-select: none;
}

.audioBtn{
    cursor: pointer;
    width: 40px;
    filter: hue-rotate(110deg);
    margin-right:10px;
    user-select: none;
}

table img, table{
    margin:5px auto;
}


.highlight{
    background:yellow;  
}