:root {
  --bg-color1: rgb(6, 6, 153);
  --bg-color2: blue;
  --bg-color3: rgb(208, 208, 141);
  --font-color1: #fff;
  --font-color2: #000;
  --english-color1:  #8b0000;
  --english-color2:  #d8562f;
  --russian-color1:  #135a89;
  --russian-color2:  #209CEE;
}

/** typography **/
a, p, li, button, label, input, span {
    font-family: Helvetica, Verdana, sans-serif;
    font-size: 20px;
}

h1, h2, h3, h4, h5, h6, .nav_link, .nav_link_dark, #sentence {
    font-family: Helvetica, Verdana, sans-serif;
    font-weight: bold;
    text-align: center;
}

h1 {
    font-size: 36px;
    margin: 10px 0;
}

h2 {
    font-size: 28px;
    margin: 10px 0;
}

h3 {
    font-size: 24px;
    margin: 10px 0;
}

p {
    margin-bottom: 5px;
    line-height: 1.2;
}

.section_title {
    color: tomato;
}

.section_title2 {
    font-size: 24px;
    margin: 0;
}

.section_title_div {
    background: linear-gradient(120deg, rgb(6, 6, 153), blue);
    color: #fff;
    padding: 5px;
    border: 2px solid rgb(1, 1, 152);
    border-radius: 10% 10%;
    display: flex;
    justify-content: space-between;
    margin: 15px 0 15px 0;
    width: 300px;
}

/** images **/
.star {
 width: 25px; 
  height: 25px;
  background: #fff;
  clip-path: polygon(
    50% 0%, 
    61% 35%, 
    98% 35%, 
    68% 57%, 
    79% 91%, 
    50% 70%, 
    21% 91%, 
    32% 57%, 
    2% 35%, 
    39% 35%
  );
}

/** navigation panel **/
#navbar_toggle_button {
    display: block;
    position: fixed;
    top: 20px;
    left: 15px;
    z-index: 5;
 }

nav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 4;
    top: 0;
    left: 0;
    background: linear-gradient(120deg, var(--bg-color1), var(--bg-color2));
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 90px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

a:link,
a:visited,
a:hover,
a:active { 
    text-decoration: none; 
}

.nav_link_main {
    color: var(--font-color1);
    font-size: 24px;
}

.nav_link_main:nth-child(2n) {
    margin: 10px 0;
}

.nav_link_main:hover {
    transform: scale(1.15);
    cursor: pointer;
}
 
.nav_link {
    text-decoration: none;
    font-size: 20px;
    margin-right: 5px;
}

.nav_link:visited {
    color: inherit;
}

.nav_link:hover {
    color: orange;
    cursor: pointer;
}

/** Layout **/
body {
    display: none;
    min-height: 100vh;
    flex-direction: column;
}

main {
    flex:1;
    padding-top: 80px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

footer {
    padding: 5px 0;
    margin-bottom: 10px;
}

.vertical_container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-right: 10px;
    margin-bottom: 10px;
    padding-left: 15px;
    padding-right: 15px;
}

.vertical_container2 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-right: 10px;
    margin-bottom: 10px;
    padding-left: 15px;
    padding-right: 15px;
}

.img_fluid2 {
    margin-top: 10px;
    width: 90%;
    max-width: 700px;
 }

 /*** Exercises layout ***/
 #exercises_list {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.exercise_div {
    text-align: center;
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    width: 300px;
    border: 2px solid #000;
}

.exercise_div_unfinished {
    background: linear-gradient(45deg, rgb(196, 196, 92), #FFA);
}

.exercise_div_completed {
    background: linear-gradient(120deg,#218004,#35c908);
}

.exercise_name {
    padding: 5px 10px;
    font-weight: bold;
    color:#000;
    margin-top: 10px;
}

.exercise_name_completed {
    padding: 5px 10px;
    font-weight: bold;
    margin-top: 10px;
    color:#000;
}

.exercise_progress {
    padding: 5px;
}

.exercise_progress3 {
    padding: 5px;
    color: #000;
}

/**/

#exercises_list2 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    position: relative;
}

.exercise_button {
    --face: #3b82f6;
    --edge: #1d4ed8;
    border: 2px solid #1d4ed8;
    border-radius: 50% 50%;
    width: 50px;
    height: 50px;
    margin: 5px;
    background-color: var(--face);
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 8px 0 var(--edge), 0 14px 20px 0 rgba(0,0,0,0.25);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.exercise_button:hover {
    transform: translateY(-3px);
    box-shadow: 0 11px 0 var(--edge), 0 18px 25px 0 rgba(0,0,0,0.25);
}

.exercise_button:active {
   transform: translateY(8px);
   box-shadow: 0 0 0 var(--edge), 0 3px 6px rgba(0,0,0,0.25);
   transition-duration: 0.05s;
}

.exercise_button.attempted {
    --face: yellow;
    --edge: rgb(162, 162, 1);
    border: 2px solid rgb(162, 162, 1);
}

.exercise_button.completed {
    --face: #22c55e;
    --edge: #15803d;
    border: 2px solid #15803d;
}

.data_div {
    display: none;
}

#overlay {
    position: absolute;
    z-index: 2;
    width: 100%;
   height: 100%;
    background: rgba(0,0,0,0.15);
   display: none;
}

.exercise_hidden_board {
    position: fixed;
    top: calc(50% - 100px);
    left: calc(50% - 125px);
    z-index: 2;
    width: 250px;
    height: 200px;
    border: 4px solid rgb(6, 6, 153);
    border-radius: 5% 5%;
    background: linear-gradient(120deg, rgb(6, 6, 153), blue);
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.exercise_name2 {
  margin: 10px;
  padding: 5px;
  color: yellow;
  font-weight: bold;
  font-size: 18px;
}

.icons_container {
   margin: 5px;
   display: flex;
   justify-content: center;
   position: absolute;
   bottom: 10%;
   width: 100%;
}

.menu_link {
   margin: 0 5px;
}

.menu_link img,
.hidden_board_close_button {
    width: 25px;
    height: 25px;
}

.menu_link img {
   margin-bottom: 5px;
}

.menu_link img:hover, 
.hidden_board_close_button:hover {
    transform: scale(1.2);
    cursor: pointer;
}

/**/

.icons_container2 {
   margin: 5px;
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
}

.exercise_div3 {
    text-align: center;
    margin: 5px;
    display: flex;
    flex-direction: column;
    width: 300px;
    border: 2px solid #000;
    padding-bottom: 10px;
    background: linear-gradient(120deg, rgb(6, 6, 153), blue);
}

.exercise_div_completed3 {
    text-align: center;
    margin: 5px;
    display: flex;
    flex-direction: column;
    width: 300px;
    border: 2px solid #000;
    padding-bottom: 10px;
    background: linear-gradient(120deg, #218004, #35c908);
}

.star_container {
    display: flex;
    justify-content: space-between;
    margin: 10px 10px 0 10px;
}

.exercise_name3 {
  margin: 10px;
  color: #fff;
  font-weight: bold;
  font-size: 32px;
}

.exercise_progress2 {
    padding: 5px;
    color: yellow;
    font-weight: bold;
}

/*** landing ***/
.gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
}

.language_container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 300px;
    border: 2px solid black;
    border-radius: 5% 0%;
    margin: 10px;
    text-align: center;
    padding: 0 0 10px 0;
    color: #fff;
}

#english_language_container {
    background: linear-gradient(120deg, var(--english-color1), var(--english-color2), var(--english-color1));
    border: 4px solid var(--english-color1);
}

#russian_language_container {
    background: linear-gradient(120deg, var(--russian-color1), var(--russian-color2), var(--russian-color1));
    border: 4px solid var(--russian-color1);
}

#japanese_language_container {
    background: linear-gradient(120deg,#3d8b1e,#5fd82f, #3d8b1e);
    border: 4px solid #3d8b1e;
}

.character_image {
    width: 20px;
    height: 20px;
    margin: 10px auto;
}

.link_button {
    width: 120px;
    color: #fff;
    border: 2px solid #000;
}

.button_link {
    width: 120px;
    color: #fff;
    border: 2px solid #000;
    padding: 10px 0;
    border-radius: 4% 4%;
    box-shadow: 10px 5px 5px #000;
}

#english_button {
    background-color: var(--english-color1);
}

#russian_button {
    background-color: var(--russian-color1);
}

#japanese_button {
    background-color: #3d8b1e;
}

#english_button:hover {
    background-color: var(--english-color2);
}

#russian_button:hover {
    background-color: var(--russian-color2);
}

#japanese_button:hover {
    background-color: #5fd82f;
}

#english_button:active,
#russian_button:active,
#japanese_button:active {
    box-shadow: none;
 }

 .image_container {
    margin: 110px auto;
 }

 .decoration_image {
    width: 200px;
 }

 #privacy_policy, #sign-up_link, #about {
    font-size: 15px;
    font-weight: normal;
    margin: 0 0 0 10px;
 }

 #sign-up_link {
    margin-top: 10px;
 }

/** forms **/
.board {
    background: linear-gradient(120deg, var(--bg-color1), var(--bg-color2));
    color: var(--font-color1);
    border: 4px solid black;
    border-radius: 2% 2%;
    padding: 15px;
}

.board .form-control {
    background: var(--bg-color1);
    color:var(--font-color1);
    border: 2px solid #000;
    padding: 6px;
}

.form_group {
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
}

.form_group label {
    margin-right: 5px;
}

.form_group input {
    padding: 5px 0;
    margin: 0 5px;
}

/** buttons **/
button {
    border-radius: 4% 4%;
    box-shadow: 10px 5px 5px #000;
    padding: 10px;
}

button:hover {
    cursor: pointer;
}

button:active {
    box-shadow: none;
}

#navbar_toggle_button, #close {
    width: 60px;
    background: linear-gradient(120deg, var(--bg-color1), var(--bg-color2));
    color: var(--font-color1);
    border-radius: 15% 15%;
    border: 2px solid var(--font-color2);
    font-weight: bold;
}

 #navbar_toggle_button:hover {
    background: var(--bg-color1);
}

.form_button {
    background-color: var(--bg-color1);
    color: var(--font-color1);
}

.form_button:hover {
    background-color: var(--bg-color2);
}

#close_instructions_button:hover,
#close_warning_button:hover {
    background: rgb(208, 208, 141);
}

#exit_button {
    width: 150px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    margin-bottom: 10px;
    background-color: rgb(238, 70, 98);
    color: #fff;
}

#exit_button:hover {
    background-color: rgb(178, 54, 75);
}

#instructions_button {
    position: absolute;
    z-index: 2;
    top: 20px;
    right: 15px;
    font-weight: bold;
    padding: 5px 15px;
    margin-top: 15px;
    margin-left: auto;
    background: linear-gradient(45deg, rgb(196, 196, 92), #FFA);
    color: #000;
    border-radius: 15% 15%;
}

#instructions_button:hover {
    background: rgb(208, 208, 141);
}

#close_instructions_button {
    background: #FFA;
    font-weight: bold;
    padding: 1px 10px;
    position: absolute;
    top: 5px;
    right: 10px;
    z-index: 3;
    border-radius: 15% 15%;
}

#close_warning_button {
    background-color: #FFA;
    font-weight: bold;
    padding: 1px 10px;
    position: absolute;
    top: 5px;
    right: 10px;
    z-index: 3;
}

#check_button {
    width: 150px;
    background-color: #16b137;
    color: #fff;
}

#check_button:hover {
    background-color: #106f0b;
}

#check_button:active {
    box-shadow: none;
}

#next_button {
    width: 150px;
    background-color: #0000ff;
    color: #fff;
}

#next_button:hover {
    background-color: #141479;
}

#next_button:active {
    box-shadow: none;
}

#leave_exercise_button {
    display: none;
    width: 150px;
    background-color: tomato;
    color: #fff;
}

#leave_exercise_button:hover {
    background-color: rgb(162, 48, 28);
}

#leave_exercise_button:active {
    box-shadow: none;
}

#leave_exercise_icon {
    display: none;
}

#leave_exercise_icon:hover {
    cursor: pointer;
    transform: scale(1.2);
}

/** alerts **/
.alert {
    position: absolute;
    top: 75px;
    z-index: 3;
    width: 100%;
    text-align: center;
    padding: 10px 0;
    margin-bottom: 5px;
}

.alert-warning {
    background-color: #ecca0b;
}

.alert-success {
    background-color: #90ee90;
}

/*** sign-up and login ***/
.input_div {
    margin-bottom: 5px;
}

.show_label {
    color: var(--font-color1);
    margin-top: 5px;
    margin-left: 5px;
    width: fit-content;
}

.show_label:hover {
    color: yellow;
    cursor: pointer;
}

/*** rules ***/
.rules_container {
    padding: 10px;
    max-width: 900px;
    margin: 10px;
}

.rules_list {
    margin-top: 10px;
}

.rules_list li {
    margin-bottom: 10px;
}

.inner_link {
    font-size: 24px;
    font-weight: bold;
    color: rgb(100, 119, 238);
}

.inner_link:hover {
    color: violet;
}

/*** exercise ***/
.test_div {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 30px;
}

#progressbar_exercise {
    height: 25px;
    width: 200px;
    margin-bottom: 15px;
}

#sentence {
    max-width: 700px;
    color: #bc0d0d;
    font-size: 24px;
    text-align: center;
    margin-bottom: 10px;
}

#note {
    max-width: 700px;
    text-align: center;
    margin-bottom: 10px;
}

#answers_panel {
    display: flex;
    flex-wrap: wrap;
    width: 300px;
    min-height: 25px;
    margin-bottom: 10px;
}

.answer_icon {
    width: 25px;
    margin-right: 1px;
    margin-bottom: 1px;
}

#user_input {
    font-size: 24px;
    width: 700px;
    height: 150px;
    margin-bottom: 10px;
}

.button_div {
    margin: 35px;
}

#result {
    font-size: 24px;
    margin-bottom: 10px;
}

.wrong {
    color: #bc0d0d;
}

.wrong_dark {
    color: #f36666;
}

.correct {
    color: #068206;
}

.correct_dark {
    color: #4af44a;
}

#correct_answer_container {
    display: none;
    padding: 5px 10px;
    border: 2px solid #000;
    background: linear-gradient(45deg, rgb(196, 196, 92), #FFA);
    color: #000;
    width: 100%;
    max-width: 700px;
    text-align: center;
    margin-bottom: 10px;
}

#correct_answer_text {
    font-size: 24px;
}

#explanation_container {
    display: none;
    width: 100%;
    max-width: 700px;
    text-indent: 30px;
    padding: 5px 10px;
    margin-bottom: 10px;
}

/* exercise suggestion */
#suggestion {
    display: none;
    max-width: 700px;
    text-indent: 30px;
    margin: 5px 5px 10px 5px;
}

#suggestion_button_container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#suggestion_button {
    background: #FFA;
    margin: 10px 0;
}

#suggestion_button:hover {
    background: rgb(208, 208, 141);
}

#suggestion_dispatch_status {
    display: none;
    text-align: center;
    color: tomato;
    padding: 5px;
    width: 300px;
}

#score_board {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    z-index: 2;
    padding: 5px 5px;
    border-radius: 2% 2%;
    background: linear-gradient(120deg, rgb(6, 6, 153), blue);
    color: #fff;
    border: 4px solid black;
    width: 300px;
}

#exit_icon {
    width: 40px;
    height: 40px;
}

#exit_icon:hover {
    cursor: pointer;
    transform: scale(1.2);
}

.hidden_board {
    top: -600px;
}

.moving_board {
    animation-name: slidingToTheBottom;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-iteration-count: 1;
    -webkit-animation-name: slidingToTheBottom;
    -webkit-animation-duration: 1s;
    top: 100px;
}

@keyframes slidingToTheBottom {
    0% {
        top: -600px;
    }

    100% {
        top: 100px;
     }
   }
   
  @-webkit-keyframes slidingToTheBottom {
    0% {
        top: -600px;
    }

    100% {
        top: 100px;
     }
   }

#correct_answers_percentage,
.score {
    font-size: 50px;
}

#correct_answers_percentage {
    margin: 15px;
}

.star_container2 {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 25px;
}

.moving_star {
    animation-name: rotate;
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    -webkit-animation-name: rotate;
    -webkit-animation-duration: 2s;
}

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

    100% {
        transform: rotate(360deg);
    }
}

@-webkit-keyframes rotate {
     0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/**/
#warning_container {
    display: none;
    position: fixed;
    z-index: 2;
    top: 90px;
    border: 4px solid black;
    padding: 25px 25px;
    color: #000;
    background: linear-gradient(45deg, rgb(196, 196, 92), #FFA);
    width: 300px;
}

#instructions_container {
    display: none;
    position: absolute;
    z-index: 2;
    top: 90px;
    max-width: 700px;
    border: 4px solid black;
    padding: 25px 25px;
    color: #000;
    background: linear-gradient(45deg, rgb(196, 196, 92), #FFA);
}

#data {
    position: absolute;
    visibility: hidden;
}

/* badge notification*/
#badge_notification {
    display: none;
    text-align: center;
    position: absolute;
    top: 70px;
    z-index: 3;
    border: 4px solid #105a13;
    padding: 10px 15px;
    background-color: #90ee90;
}

#badge_notification h2 {
    font-size: 28px;
}

#badge_notification h3 {
    font-size: 24px;
}

#badge_notification p {
    font-size: 20px;
    margin: 5px 0;
}

#badge_notification button {
    padding: 5px 10px;
    background-color: #105a13;
    color: #fff;
    margin: 5px 0;
}
/****/

.rules_link {
    background: #FFA;
    border: 2px solid black;
    border-radius: 10% 10%;
    box-shadow: 5px 5px 5px black;
    color: #000;
    padding: 15px;
    margin: 5px auto 5px auto;
    width: 100px;
    text-align: center;
}

.rules_link:hover {
    background: rgb(208, 208, 141);
}

.rules_link:active {
    box-shadow: none;
}

.exercise_link {
    background: #FFA;
    border: 2px solid black;
    border-radius: 10% 10%;
    box-shadow: 5px 5px 5px black;
    color: #000;
    padding: 15px;
    margin: 5px auto 5px auto;
    width: 100px;
}

.exercise_link:hover {
    background: rgb(208, 208, 141);
}

.exercise_link:active {
    box-shadow: none;
}

/** exercise rules **/
#exercise_rules_div {
    margin: 0 auto;
    max-width: 900px;
}

.rules_header {
    font-size: 30px;
    font-weight: bold;
    margin: 10px 0;
    text-align: center;
    color:#6f6fe8;
}

.rules_second_header {
    font-size: 26px;
    font-weight: bold;
    margin: 15px 0 5px 0;
    color: tomato;
    text-align: center;
}

.highlighted_text {
    color: rgb(43, 205, 102);
    font-weight: bold;
    font-size: 24px;
}

.highlighted_text2 {
    color: rgb(215, 37, 189);
    font-size: 24px;
    font-weight: bold;
}

.rules_paragraph {
    font-size: 24px;
    text-indent: 30px;
}

.rules_image {
    max-width: 300px;
    margin: 15px auto;
}

.rules_list {
    list-style-type: none;
    margin: 5px 5px;
}

/** profile **/
#badges_div {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.badge_item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 10px;
    text-align: center;
    width: 200px;
}

.badge_image {
    width: 150px;
}

.badge_name {
    color: #db1111;
}

.badge_description {
    margin: 5px;
}

#account_div {
    margin-top: 10px;
    text-align: center;
}

#delete_account {
    color: #db1111;
}

#delete_account:hover {
    color: #ee5f5f;;
    cursor: pointer;
}

#confirm_deletion_form {
    display: none;
}

#deletion_input {
    margin-top: 5px;
}

#confirm_deletion_button {
    margin: 10px 5px;
    background-color: #db1111;;
    color: #fff;
}

#confirm_deletion_button:hover {
    background-color: #8b0000;
}

#account_deletion_input {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.show_label_password {
    margin-top: 5px;
    color:#db1111;
}

.show_label_password:hover {
    color:#ee5f5f;
    cursor: pointer;
}

/*** irregular verbs **/
#irregular_verb_exercise_name {
    color: rgb(43, 111, 205);
}

.irregular_verbs_input_div {
    margin-bottom: 10px;
    padding: 5px;
}

.wrong_answer_div {
    border: 3px solid tomato;
    color: tomato;
}

.right_answer_div {
    border: 3px solid rgb(143, 209, 43);
    color: rgb(143, 209, 43);
}

.irregular_verbs_answer_div {
    position: relative;
    visibility: hidden;
}

.answer_icon2 {
    width: 25px;
    position: absolute;
    right: 5px;
    top: 5px;
}

.irregular_verb_input {
    font-size: 24px;
}

.irregular_verb_input_dark_theme {
    font-size: 24px;
    border: 2px solid white;
    color: #fff;
    background-color: #323639;
}

.irregular_verb_answer {
    font-size: 24px;
    font-weight: bold;
}

#irregular_verb_note {
    margin-top: 5px;
    margin-bottom: 10px;
    display: none;
    max-width: 600px;
}

#exercise_number {
    display: none;
}

/*irregular verbs list*/
#irregular_verbs_scroll_container {
    text-align: center;
    margin-bottom: 20px;
}

#irregular_verb_note_for_study {
    margin-top: 15px;
}

#irregular_verb_forms {
    color: tomato;
    font-size: 24px;
}

.navigation_buttons_div {
    margin-bottom: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.list_navigation_button {
    background: #FFA;
    border-radius: 10% 10%;
    box-shadow: 5px 5px 5px black;
    color: #000;
    border: 2px solid black;
    padding: 15px;
    margin: 5px;
    width: 100px;
    text-align: center;
}

.list_navigation_button:hover {
    background: rgb(208, 208, 141);
}

.list_navigation_button img {
    width: 40px;
}

.rules_link img {
    width: 40px;
}

#back_button {
    display: none;
}

/*** sections ***/
#sections_div {
    flex-wrap: wrap;
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-right: 10px;
    margin-bottom: 10px;
}

.section_link {
    border-radius: 15% 15%;
    width: 155px;
    height: 155px;
    padding: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin: 10px;
    border: 4px solid black;
    color: var(--font-color1);
}

.section_link:hover {
    background: var(--bg-color1);
    cursor: pointer;
}

.english {
    background: linear-gradient(120deg, var(--english-color1), var(--english-color2));
}

.english:hover {
    background: var(--english-color1);
}

.russian {
    background: linear-gradient(120deg, var(--russian-color1), var(--russian-color2));
}

.russian:hover {
    background: var(--russian-color1);
}

/*** basic course ***/
.basic_course_link_div {
    width: 100%;
    display: flex;
    justify-content: center;
    position: relative;
    margin: 5px auto 5px auto;
}

.basic_course_tests {
    display: none;
}

.open_tests_button {
    width: 80px;
    text-align: center;
    font-weight: bold;
    margin-top: 5px;
    margin-bottom: 10px;
    background: linear-gradient(45deg, lightgoldenrodyellow, yellow);
    border-radius: 10% 10%;
}

.open_tests_button:hover {
   background: linear-gradient(45deg, gold, yellow);
}

.basic_course_link {
    border-radius: 10% 10%;
    box-shadow: 5px 5px 5px black;
    color: #000;
    padding: 15px;
    width: 100px;
    text-align: center;
    background: #FFA;
    border: 2px solid black;
}

.basic_course_link:hover {
    background: rgb(208, 208, 141);
}

.basic_course_link:active {
    box-shadow: none;
}

.completion_icon {
    position: absolute;
    right: 10px;
    top: 10px;
    width: 25px;
}

/* words */
.basic_course_section_subtitle {
    color:rgb(251, 154, 8);
    font-size: 24px;
    margin-bottom: 10px;
}

.basic_course_words_div {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
    text-align: center;
}

#english_word_div {
    background: linear-gradient(45deg,#8b0000,#d8562f, #8b0000);
    border: 2px solid black;
    width: 300px;
    height: 150px;
    border-radius: 5% 5%;
}

.centered_div {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#word {
    font-size: 24px;
    font-weight: bold;
    border: 2px solid #000;
    background: linear-gradient(45deg, #8b0000, #d8562f, #8b0000);
    width: 250px;
    border-radius: 5% 5%;
    padding: 5px 0;
    color: #fff;
}

#card_word {
    font-size: 50px;
    font-weight: bold;
    color: #fff;
}

#japanese_card_word {
    font-size: 50px;
    font-weight: bold;
    color: #000;
}

#translation {
    font-size: 24px;
}

#sound {
    margin-bottom: 10px;
}

#pronunciation {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

/* basic course alphabet */
#character_sound {
    display: none;
}

#character_pronunciation {
    font-size: 24px;
    text-align: center;
}

#alphabet_div {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 10px;
}

.alphabet_character {
    font-size: 24px;
    border: 2px solid #000;
    width: 70px;
    padding: 15px 0;
    margin: 5px;
    text-align: center;
}

.alphabet_character:hover {
    cursor: pointer;
    color: #fff;;
    background-color: blue;
}

.selected_character {
    background-color: blue;
    color: #fff;
}

/* test1*/
#words_columns_container {
    display: flex;
    justify-content: space-between;
    width: 370px;
    margin-bottom: 10px;
}

.word_test1 {
    color: white;
    background-color: blue;
    border: 2px solid #000;
    border-radius: 5% 5%;
    font-size: 24px;
    width: 180px;
    padding: 5px 0 5px 0;
    text-align: center;
}

.word_test1:hover {
    background-color: darkblue;
    cursor: pointer;
}

.selected_word {
    background-color: darkblue;
}

.wrong_match {
    color: white;
    background-color: grey;
    border-radius: 5% 5%;
    font-size: 24px;
    width: 180px;/**/
    padding: 5px 0 5px 0;
    text-align: center;
}

#end_test_message {
    font-size: 32px;
    color: tomato;
    display: none;
}

/* test2 */
#word_input {
    margin-top: 10px;
    margin-bottom: 10px;
    width: 350px;
}

#basic_course_general_answer_div {
    display: none;
}

#basic_course_answer_div {
    width: 350px;
    text-align: center;
    color: #000;
    background: linear-gradient(45deg, rgb(196, 196, 92), #FFA);
    border: 2px solid black;
}

h4 {
    margin: 5px;
}

#basic_course_words_answer {
    padding: 10px;
}

/* test 5 */
.basic_course_text_input {
    width: 250px;
    height: 100px;
    font-size: 24px;
}

.basic_course_text_input_dark {
    width: 250px;
    height: 100px;
    font-size: 24px;
    background-color: #323639;
    color: #fff;
    border: 2px solid #fff;
}

/* test 6 */
.words_container {
    display: flex;
    flex-wrap: wrap;
    margin: 10px 15px;
}

.result_container {
    display: flex;
    flex-wrap: wrap;
    border: 2px solid grey;
    width: 350px;
    min-height: 50px;
    margin-bottom: 10px;
}

.word_to_pick_div {
    padding: 5px;
    border: 2px solid #000;
    background-color: blue;
    color: #fff;
    border-radius: 7% 7%;
    margin: 5px;
    font-size: 24px;
}

.word_to_pick_div:hover {
    cursor: pointer;
}

.word_to_pick_div:active {
    background-color: darkblue;
    border: 2px solid darkblue;
}

/* test 7 */
#basic_course_sentence {
    font-size: 24px;
    font-weight: bold;
    color: tomato;
}

#basic_course_sentence_note {
    margin: 0 10px 10px 10px;
    text-align: center;
}

/** lists **/
#lists_container {
    margin-top: 20px;
}

.list_div {
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 2px solid black;
    padding: 10px;
    background: linear-gradient(25deg, rgb(196, 196, 92), #FFA);
}

.list_title {
    color: #000;
}

.list_button {
    width: 180px;
    margin: 5px;
    background: #FFA;
    border: 2px solid black;
    border-radius: 10% 10%;
    box-shadow: 5px 5px 5px black;
    color: #000;
    padding: 15px;
}

.reveal_button {
    width: 90px;
    margin: 5px;
    background: #FFA;
    border: 2px solid black;
    border-radius: 10% 10%;
    box-shadow: 5px 5px 5px black;
    color: #000;
    padding: 15px;
}

.list_button:hover, .reveal_button:hover {
     cursor: pointer;
    background: rgb(208, 208, 141);
}

.list_button:last-child {
    margin-bottom: 15px;
}

#confirmation_div {
    display: none;
    position: fixed;
    top: calc(50% - 50px);
    background: linear-gradient(25deg, rgb(196, 196, 92), #FFA);
    padding: 20px;
    border: 2px solid black;
    text-align: center;
}

#confirmation_button, #cancellation_button {
    background: #FFA;
}

#confirmation_button:hover, #cancellation_button:hover {
    background: rgb(208, 208, 141);
}

.hidden_div {
    display: none;
}

.unhidden_div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/** words **/
#new_list_form, #new_word_form {
    display: flex;
    flex-direction: column;
    width: 300px;
}

#new_list_button, #new_word_button {
    width: 150px;
    padding: 15px;
    margin: 10px auto 5px auto;
}

#new_word_form input {
    margin: 10px;
}

#words_container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 10px;
}

.word_div {
    margin: 5px;
    padding: 10px;
    width: 200px;
    text-align: center;
    background: linear-gradient(25deg, rgb(196, 196, 92), #FFA);
    border: 2px solid #000;
}

.english_word_title, .russian_word_title {
    color: #000;
}

.english_word_title {
    font-size: 28px;
    font-weight: bold;
}

.russian_word_title {
    font-size: 20px;
}

.word_delete_button {
    width: 180px;
    margin: 5px;
    background: #FFA;
    border: 2px solid black;
    border-radius: 10% 10%;
    box-shadow: 5px 5px 5px black;
    color: #000;
    padding: 15px;
}

.word_delete_button:hover {
    background: rgb(208, 208, 141);
}

/** list exercise **/
#list_exercise_container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#list_status {
    margin: 10px;
    text-align: center;
}

#user_input_list_exercise {
    width: 200px;
    margin: 10px;
}

#russian_word_from_list {
    text-align: center;
    margin: 10px;
    font-size: 28px;
}

#user_input_list_exercise {
    margin-bottom: 25px;
    font-size: 24px;
    background: #FFA;
}

#answer_div {
    display: none;
    width: 250px;
    padding: 10px;
    background-color: #FFA;
    color: #000;
    border: 2px solid #000;
    margin: 15px;
    text-align: center;
}

/*** basic course list management ***/
#list_management_window {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 10px;
    border: 2px solid #000;
    padding: 10px;
    color: #000;
    background: linear-gradient(25deg, rgb(196, 196, 92), #FFA);
}

#list_selection {
    font-size: 18px;
    margin: 15px;
}

#show_lists_button, #add_to_list_button, #close_notification_button {
     background: #FFA;
}

#show_lists_button:hover, #add_to_list_button:hover, #close_notification_button:hover {
     background: rgb(208, 208, 141);
}

#notification_div {
    position: absolute;
    top: 200px;
    width: 300px;
    display: none;
    text-align: center;
    margin: 10px;
    border: 2px solid #000;
    padding: 10px;
    color: #000;
    background: linear-gradient(25deg, rgb(196, 196, 92), #FFA);
}

#notification {
    margin-bottom: 15px;
}

/* mistakes */
.text_container {
    max-width: 700px;
    margin: 15px;
}

/* about */
.decoration_image2 {
    width: 400px;
}

/*** russian course ***/
/** russian spelling exercise **/
#russian_spelling_input_div {
   text-align: center;
   margin: 15px 15px 25px 15px; 
}

.russian_spelling_input {
    display: inline;
    font-size: 24px;
    width: 40px;
    font-weight: bold;
    color: rgb(209, 26, 160);
    margin-bottom: 5px;
}

.horizontal_paragraph {
    display: inline;
    font-size: 24px;
}

#russian_spelling_answer_div {
    display: none;
}

.russian_spelling_right_answer {
    font-weight: bold;
    font-size: 24px;
    color: rgb(255,0,0);
    text-decoration: underline;
}

.not_spaces {
    font-weight: bold;
    font-size: 24px;
    color: rgb(65, 65, 241);
}

.not_spaces:hover {
    cursor: pointer;
    color: rgb(137, 137, 248);
}

.not_spaces_answer {
    font-weight: bold;
    font-size: 24px;
    color:  rgb(255, 0, 0);
}

.highlighted_character {
    font-weight: bold;
    color: tomato;
    font-size: 24px;
}


/*** japanese course ***/
#japanese_verbs_div {
    justify-content: center;
    align-items: center;
}

#japanese_verbs_container {
    margin-bottom: 15px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.kanji_list {
    font-size: 24px;
    margin-bottom: 5px;
}

.kanji_list_dark {
    color: #fff;
    background-color: #323639;
}

.kanji_list_label {
    margin-right: 10px;
}

.kanji_result {
    background-color: tomato;
    color: #fff;
    visibility: hidden;
    width: 260px;
    padding: 5px 0;
    margin: 5px;
}

#japanese_verbs_table {
    display: flex;
    flex-direction: column;
}

.fluid_row {
    display: flex;
    justify-content: center;
    margin-top: 5px;
}

.fluid_column {
    width: 340px;
    display: flex;
    position: relative;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    text-align: center;
    padding: 5px 0;
}

.japanese_verbs_input {
    width: 250px;
    margin-bottom: 10px;
    font-size: 24px;
}

.japanese_verbs_input_dark {
    border: 2px solid white;
    color: #fff;
    background-color: #323639;
    position: relative;
}

.japanese_verbs_answer {
   visibility: hidden;
}

.japanese_input_icon {
    position: absolute;
    width: 25px;
    top: 45px;
    right: 45px;
}

.japanese_verbs_links_container {
    margin: 10px 0;
}

.japanese_verb_link {
    background-color: #FFA;
    color: #000;
    border: 2px solid black;
    border-radius: 15% 15%;
    padding: 5px;
}

.japanese_verb_link_completed {
    background-color: darkcyan;
    color: white;
    border: 2px solid black;
    border-radius: 15% 15%;
    padding: 5px;
}

.japanese_verb_link:hover,
.japanese_verb_link_completed:hover {
    background: rgb(208, 208, 141);
}

#japanese_word_div {
    border: 2px solid #3d8b1e;
    background: linear-gradient(45deg,#3d8b1e,#5fd82f, #3d8b1e);
    width: 300px;
    height: 150px;
    border-radius: 5% 5%;
}

#note_container {
    background: linear-gradient(45deg, darkblue, blue, darkblue);
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 250px;
    padding: 20px;
    position: fixed;
    left: -300px;
    top: 20vh;
    overflow-x: hidden;
    transition: 0.5s;
    border-radius: 0 5% 5% 0;
}

#close_button_container {
    position: relative;
    width: 100%;
}

#close_note_container_button {
    position: absolute;
    right: 10px;
    color: yellow;
}

#close_note_container_button:hover {
    color: gold;
    cursor: pointer;
}

#japanese_verbs_kanji_container {
    margin-bottom: 30px;
    display: flex;
    flex-wrap: wrap;
}

.kanji_option {
    border: 2px solid #3d8b1e;
    background: #5fd82f;
    color: #000;
    width: 100px;
    padding: 10px 0;
    margin-top: 5px;
    margin-bottom: 5px;
}

.kanji_option:nth-child(odd) {
    margin-left: 5px;
    margin-right: 5px;
}

.kanji_option:hover {
    cursor: pointer;
    background: #3d8b1e;
    color: yellow;
}

.chosen_kanji_option {
    background: #3d8b1e;
    color: yellow;
}

.correct_kanji_option {
    background: springgreen;
}

#russian_meaning {
    visibility: hidden;
}

/*** dark theme ***/
.dark_theme {
    background-color: #323639;
    color: #FFF;
}

.dark_theme_title {
    color: #87CEEB;
}

.nav_link_dark
{
    color: #fff;
    text-decoration: none;
    font-size: 20px;
    margin-right: 5px;
}

.nav_link_dark:hover {
    color: yellow;
    cursor: pointer;
}

/** about **/
#feedback_form {
    margin: 10px auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#feedback_text {
    font-size: 16px;
    width: 350px;
    height: 200px;
}

.feedback_input_dark {
    background-color: #323639;
    color: #fff;
    border: 2px solid #fff;
}

#feedback_submit_button {
    margin: 10px;
}

/**** media queries ****/
@media (max-width: 460px) {
    #user_input {
        width: 350px;
    }

    .decoration_image2 {
        width: 350px;
    }

    .image_container {
        margin: 50px auto;
    }

    /* forms */
    .form_group {
        margin-top: 10px;
        display: flex;
        flex-direction: column;
    }

    .form_group label {
        margin-bottom: 5px;
    }

    /* exercise */
    #warning_container {
        width: auto;
        padding: 25px 0;
    }

    #badge_notification {
        width: auto;
        padding: 10px 0;
    }

    /** sections **/
    #sections_div {
        justify-content: center;
    }
}

@media (max-width: 1050px) {
    .fluid_row {
        flex-direction: column;
    }
}