/*
the wordle headline
*/
.wordle_headline{
    margin-top:0.5rem;
    background-color:none;
    width:100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
/*
the wordle title
*/
.wordle_title{
    background-color:none;
    padding:0.2rem;
    font-size: 3rem;
    font-family: bold;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
/*
the wordle button group
*/
.wordle_button_group{
    position:absolute;
    right:2rem;
    height:fit-content;
    width:fit-content;
    background-color:none;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
/*
the wordle button
*/
.wordle_button{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    font-size: 1rem;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    background-color: #ffffff;
    padding:0.5rem;
    margin: 0.5rem;
    border-style: solid;
    border-radius: 0.3rem;
    border-color: #000000;
}

/*
the style of hidden button
*/
.wordle_button_hidden{
    display:none;
}

/*
the wordle area
*/
.wordle_itself{
    margin-top:1rem;
    background-color:none;
    padding:0.2rem;
}

/*
the style of one wordle hidden world row
*/
.wordle_hidden_row
{
    display:flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

/*
the style of one wordle hidden word block
*/
.wordle_one_block{
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size:2rem;
    font-weight: bold;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color:#f5f5f5;
    width:3rem;
    height:3rem;
    margin:0.2rem;
    border-style: solid;
    border-width:0.1rem;
    border-color:lightgrey;
    
}

/*
the animation itself
*/
.block_animation{
    animation: flop 1s forwards;
    backface-visibility: visible;
}

/*
the animation of a wrong row to shake
*/
.wordle_row_shake_animation{
    animation: shake 1s forwards;
}

/*
animation for block to update
*/
@keyframes flop{
    0% {
        transform: rotateX(0deg);
    }
    100%{
        transform: rotateX(360deg);
    }
}

/*
the shake animation
*/
@keyframes shake {
    10%,
    90% {
        transform: translate3d(-1px, 0, 0);
    }
    20%,
    80% {
        transform: translate3d(+2px, 0, 0);
    }
    30%,
    70% {
        transform: translate3d(-4px, 0, 0);
    }
    40%,
    60% {
        transform: translate3d(+4px, 0, 0);
    }
    50% {
        transform: translate3d(-4px, 0, 0);
    }
}


/*
the wordle keyboard area
*/
.wordle_keyboard{
    margin-top:1rem;
    background-color:none;
    padding:0.2rem;
    display:flex;
    flex-direction: column;
}


/*
the wordle keyboard area
*/
.wordle_keyboard_row{
    background-color:none;
    display:flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

/*
the style of one key on keyboard
*/
.wordle_keyboard_one_character_key{
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size:1.5rem;
    font-weight: bold;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: lightgrey;
    width:3rem;
    height:4rem;
    margin:0.2rem;
    border-radius: 0.4rem;
    border-style: solid;
    border-width:0.1rem;
    border-color:lightgrey;
}

/*
the style of one key of enter and backspace
*/
.wordle_keyboard_special_key{
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size:1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: lightgrey;
    width:4.5rem;
    height:4rem;
    margin:0.2rem;
    border-radius: 0.4rem;
    border-style: solid;
    border-width:0.1rem;
    border-color:#d3d3d3;
}

/*
the style of wrong word toast
*/
.wordle_toast
{
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    position:fixed;
    left:50%;
    top:40%;
    transform:translate(-50%,-50%);
    z-index:9995;
    background-color:#000000;
    opacity:0;
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 0.4rem;
    padding:0.5rem;
    color:#ffffff;
}

/*
the style of the toast
*/
.wordle_wrong_word
{
    width:fit-content;
    height:fit-content;
}

/*
the style of the instruction mask
*/
.wordle_instruction_mask
{
    height:100vh;
    width:100vw;
    display:flex;
    background-color: #ffffff;
    position:fixed;
    top:0;
    left:0;
    z-index:8000;
}

/*
the style of the instruction mask show
*/
.wordle_instruction_mask_show
{
    opacity: 0.5;
    display:flex;
    transition: opacity 0.2s ease-in-out;
}

/*
the style of the instruction mask hidden
*/
.wordle_instruction_mask_hide
{
    opacity: 0;
    display:none;
    transition: opacity 0.2s ease-in-out;
}


/*
the style of the instruction
*/
.wordle_instruction
{
    height:60vh;
    width:50vw;
    display:flex;
    flex-direction: column;
    background-color: #ffffff;
    position:fixed;
    transform:translate(-50%,-50%);
    background-color: wheat;
    z-index:8100;
    border-radius: 0.4rem;
    box-shadow: 1rem 1rem 15rem 1rem #000000;
    padding:1.5rem;
    box-sizing: border-box;
}

.wordle_instruction_normal{
    margin-top:1rem;
    position:relative;
    height:60vh;
    width:50vw;
    display:flex;
    flex-direction: column;
    background-color: #ffffff;
    background-color: wheat;
    z-index:8100;
    border-radius: 0.4rem;
    box-shadow: 1rem 1rem 15rem 1rem #000000;
    padding:1.5rem;
    box-sizing: border-box;
}


/*
the style of the instruction show
*/
.wordle_instruction_show
{
    opacity: 1;
    top:50%;
    left:50%;
    display:flex;
    transition: opacity 0.2s ease-in-out, top 0.5s ease-in-out;
}


/*
the style of the instruction hidden
*/
.wordle_instruction_hide
{
    opacity: 0;
    top:100%;
    left:50%;
    display:none;
    transition: opacity 0.2s ease-in-out, top 0.5s ease-in-out;
}


/*
the style of the cross button on instruction mask
*/
.instruction_cross
{
    position:absolute;
    top:1rem;
    right:1rem;
    height:1rem;
    width:1rem;
    font-weight: bolder;
    font-size: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
}

/*
the style of the one line in instruction
*/
.instruction_line{
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    width:100%;
    height:fit-content;
    background-color: none;
}

/*
the style of the instruction line with bold words
*/
.wordle_bold{
    font-weight:bold;
}


/*
the style of the instruction line with large words
*/
.wordle_large{
    font-size:2rem;
}


/*
the style of the instruction line with middle size words
*/
.wordle_middle{
    font-size:1.5rem;
    margin-bottom:1rem;
}

/*
the style of the instruction line with small size words
*/
.wordle_small{
    font-size:1rem;
}

/*
the style of the instruction line with extra space
*/
.wordle_space{
    margin-top: 1.5rem;
}


/*
the style of the instruction line that contains a hidden words line
*/
.wordle_small_hidden_line{
    width:fit-content;
    padding:0rem;
    margin-left:-0.2rem;
}


/*
the style of the instruction line that contains a hidden words block
*/
.wordle_small_block{
    height:2rem;
    width:2rem;
    font-size: 1.5rem;
}


/*
the style fade in
*/
.wordle_fade_in
{
    opacity: 1;
    transition: opacity 1s ease-in-out;
}


/*
the style of fade out
*/
.wordle_fade_out
{
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

/*
the style of the leaderboard
*/
.wordle_leaderboard
{
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    z-index:8000;
    background-color:#ffffff;
    display:flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    padding:0rem;
    height:100vh;
    width:100vw;
    overflow-y: scroll;
}


/*
the style of the leaderboard show
*/
.wordle_leaderboard_show
{
    opacity: 1;
    position:fixed;
    top:0%;
    left:0%;
    transition: opacity 0.2s ease-in-out, top 0.5s ease-in-out;
    
}


/*
the style of the leaderboard hide
*/
.wordle_leaderboard_hide
{
    opacity: 0;
    position:fixed;
    top:100%;
    left:0%;
    transition: opacity 0.2s ease-in-out, top 0.5s ease-in-out;
}


/*
the style of the cross button on the leaderboard
*/
.leaderboard_cross
{
    position:absolute;
    top:5rem;
    right:5rem;
    height:2rem;
    width:2rem;
    font-weight: bolder;
    font-size:1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/*
the style of the name line leaderboard
*/
.leaderboard_name
{
    width:30%;
    height:fit-content;
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    font-size: 2rem;
    background-color: none;
    margin-top: 7rem;
}


/*
the style of the top user line on the leaderboard
*/
.leaderboard_top_users{
    width:30%;
    height:fit-content;
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    font-size: 1rem;
    background-color: none;
    margin-top: 1.5rem;
    margin-bottom:1rem;
}

/*
the style of the answer on the leaderboard
*/
.leaderboard_word_today{
    width:30%;
    height:fit-content;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
    font-weight: bold;
    background-color: none;
    margin-top: 1.5rem;
    margin-bottom:1rem;
}


/*
the style of the users list on the leaderboard
*/
.leaderboard_top_users_list{
    width:30%;
    display: flex;
    flex-direction:column;
    justify-content: center;
    align-items: center;
}


/*
the style of one user on the leaderboard
*/
.leaderboard_user_unit{
    width:100%;
    display: flex;
    flex-direction:column;
    justify-content: center;
    align-items: center;
    background-color: none;
    margin-top: 0.5rem;
}

/*
the style of the rank number on the leaderboard
*/
.leaderboard_rank{
    width:100%;
    display: flex;
    flex-direction:column;
    margin-top: 0.5rem;
    justify-content: center;
    align-items: start;
    font-size:1.5rem;
    font-weight: bold;
}


/*
the style of the user email on the leaderboard
*/
.leaderboard_email{
    width:100%;
    display: flex;
    flex-direction:column;
    margin-top: 0.5rem;
    justify-content: center;
    align-items: start;
    background-color: none;
}


/*
the style of the time costed on the leaderboard
*/
.leaderboard_time_cost{
    width:100%;
    display: flex;
    flex-direction:column;
    margin-top: 0.5rem;
    justify-content: center;
    align-items: start;
    background-color: none;
}


/*
the style of gray blocks 
*/
.wordle_gray{
    background-color:#7c787e;
    border-color:#7c787e;
    color:white;
}

/*
the style of yellow blocks 
*/
.wordle_yellow{
    background-color:#c9b458;
    border-color:#c9b458;
    color:white;
}

/*
the style of green blocks 
*/
.wordle_green{
    background-color:#6aaa64;
    border-color:#6aaa64;
    color:white;
}