/* Background */
#landpage-section {
  background: url('../media/covers/landpage-colored.svg') no-repeat center center fixed;
  background-size: cover;
  background-color: var(--landpage-bg);
  min-height: 100vh; 
  width: 100%;
  opacity: 0; 
  transition: opacity 1s ease-out;
}


/* Animation */
#landpage-section.visible { opacity: 1; }


/* Navbar */
#about-btn, #store-btn, #theme-btn { font-size: 17.6px; }

#nav-menu-circle { background-color: #25745c; }

#nav-menu-points { margin-top: 2px; margin-left: -1px; font-size: 17px; }

#about-btn, #store-btn, #theme-btn, #nav-menu-points { border: transparent !important; }

#about-btn:active, #store-btn:active, #theme-btn:active, #nav-menu-points:active { border: transparent !important; }


/* Offcanvas */
#offcanvasLang .language-text{ font-size: 20px; }

#offcanvasLang .language-option{ background: transparent; border: none; }

#offcanvasLang .language-option img{ width: 27px; margin-right: 11px }

#offcanvasVerbs .x-btn { border: none; background: transparent; color: gray; }

#offcanvasVerbs #group-buttons button { font-size: 16px; }

#offcanvasVerbs #search-bar { font-size: 15px; }

#offcanvasVerbs .btn-width { width: 64px; }

#offcanvasTensesForm .btn-width{ width: 7rem; font-size: 14px; }

.offcanvas-list-box{
  width: 96%; 
  flex-grow: 1; 
  overflow-y: auto; 
  padding-left: 4px;
  font-size: 19px;
}

.offcanvas-search{
  background-color: #3e9693 !important;
  color: white !important;
  border: none !important;
}

.offcanvas-search:hover,
.offcanvas-search:active{
  background-color: #2f706e !important;
  color: white !important;
  border: none !important;
}

.btn-option,
.btn-option:active{
  background-color: #3e9693 !important;
  color: white !important;
  border: none !important;
}

.btn-option:hover{
  background-color: #398a87 !important;
  color: white !important;
  border: none !important;
}

.btn-option-selected, 
.btn-option-selected:hover,
.btn-option-selected:active{
  background-color: #2f706e !important;
  color: white !important;
  border: none !important;
}

.btn-bg-instructions { background-color: var(--btn-bg-instructions) !important; border: none; color: var(--start-btn-text) !important; }


/* Form */
.form-btn-style {
  width: 100%; 
  border: none;
  text-align: left;
  padding-left: 10px; 
  white-space: nowrap; /* Prevents line break */
  overflow: hidden; /* Hides long texts */
  text-overflow: ellipsis; /* Adds "..." if the text is too long */
}

input::placeholder { color: var(--form-input-disabled) !important; opacity: 1 !important; }

#userInput, #emailInput { padding-top: 0 !important; padding-bottom: 0 !important; }

#start-btn { background-color: var(--start-btn); color: var(--start-btn-text); }

#start-btn:disabled { border: none; background-color: var(--start-btn-disabled); }

#icon-language { font-size: 16.5px; }

#icon-verb { font-size: 20px; }

#icon-tense { font-size: 17px; }

#icon-form { font-size: 22px; }

#icon-user { font-size: 21px; }

#icon-email { font-size: 17px; }

#icon-game { font-size: 30px; }

.form-input-style { border: none; }

.icon-color { color: var(--form-icon); }

.icon-disabled { color: var(--form-icon-disabled); }

.icon-selected { color: var(--text-color); }

.form-btn-color { color: var(--form-btn); }

.form-btn-selected { border: none; color: var(--text-color); }

.form-btn-style:disabled { color: var(--form-btn-disabled); }

.form-bg { background-color: var(--form-bg); border: 1px solid var(--form-border-color); }

.list-text { color: var(--text-color); }

.terms-text { color: var(--terms-color); }


/* General Height */
@media screen and (min-height: 730px){
  #navbar-land { position: fixed; top: 0; left: 0; right: 0; width: 100%; z-index: 1030; }
}

@media screen and (max-height: 599px){
  .container-padding { padding-top: 40px; }
  .form-width { margin-bottom: 70px !important; }
}


/* Navbar */
@media screen and (max-width: 1280px) and (min-height: 901px) {
  #about-btn { display: none; }
}

@media screen and (min-width: 1000px) {
  #nav-menu-circle { margin-left: 8.2px; margin-top: 3.2px;}
}

@media screen and (min-width: 700px) {
  #nav-menu-circle { width: 50px; height: 50px; }
  #nav-menu-circle i { font-size: 17px; }
}

@media screen and (min-width: 450px) and (max-width: 699px) {
  #nav-menu-circle { width: 48px; height: 48px; }
  #nav-menu-circle i { font-size: 15.5px; }
}

@media screen and (max-width: 449px) {
  #nav-menu-circle { width: 45px; height: 45px; }
  #nav-menu-circle i { font-size: 15px; }
}


/* Offcanvas */
@media screen and (min-width: 340px) {
  #form-buttons, #group-buttons { display: flex; }
}

@media screen and (max-width: 339px) {
  #form-buttons, #group-buttons { text-align: center; }
  #group-buttons button { font-size: 14px; margin-bottom: 10px; }
  #search-section { margin-top: -10px; }
  #qst { margin-top: 10px; margin-bottom: 5px; }
}


/* Desktops */
@media screen and (min-width: 1330px) {
  #landpage-form { justify-content: flex-end; }
}

@media screen and (min-width: 1080px) and (max-width: 1329px) {
  #landpage-description { padding-left: 71.7px; }
}

@media screen and (min-width: 1060px) and (max-width: 1079px) {
  #landpage-description { padding-left: 60px; }
}

@media screen and (min-width: 982px) and (max-width: 1059px) {
  #landpage-description { padding-left: 50px; }
}

@media screen and (min-width: 974px) and (max-width: 981px) {
  #landpage-description { padding-left: 43px; }
}

@media screen and (min-width: 920px) and (max-width: 973px) {
  #landpage-description { padding-left: 40px; }
}

@media screen and (min-width: 768px) and (max-width: 919px) {
  #landpage-description { padding-left: 30px; }
}

@media screen and (min-width: 768px) and (max-width: 1329px) {
  #landpage-form { justify-content: center; align-items: center;}
}

@media screen and (min-width: 1000px) and (max-width: 1099px) {
  #description-list li:nth-last-child(2) { margin-top: -3px !important; }
}

@media screen and (min-width: 1035px) {
  #description-list { font-size: 22px; padding-left: 48px; }
  #tutorial-btn { font-size: 24px; }
}

@media screen and (min-width: 1000px) and (max-width: 1034px) {
  #description-list { font-size: 21px; padding-left: 44px; }
  #tutorial-btn { font-size: 22px; }
}

@media screen and (min-width: 1000px) {
  .form-width { width: 22rem; }
  .form-img { width: 10rem; max-width: 160px; }
  .video-width { width: 854px; height: 480px; }
}

@media screen and (min-width: 900px) and (max-width: 999px) {
  #description-list li:nth-last-child(2) { margin-bottom: 19px !important; margin-top: -5px !important; }
  #description-list { font-size: 19.5px; padding-left: 40px; }
  #tutorial-btn { font-size: 20px; }
  .video-width { width: 784px; height: 450px; }
}

@media screen and (min-width: 800px) and (max-width: 899px) {
  #description-list { font-size: 17px; padding-left: 35px; }
  #tutorial-btn { font-size: 18px; }
}

@media screen and (min-width: 768px) and (max-width: 799px) {
  #description-list { font-size: 16px; padding-left: 35px; }
  #tutorial-btn { font-size: 16px; }
}

@media screen and (min-width: 768px) and (max-width: 899px) {
  #description-list li:nth-last-child(2) { margin-bottom: 20px !important; margin-top: -5px !important; }
  .video-width { width: 640px; height: 360px; }
}

@media screen and (min-width: 768px) and (max-width: 1034px) {
  #description-title { font-size: 27px !important; }
}

@media screen and (min-width: 768px) and (max-width: 999px) {
  .form-width { width: 21.6rem; }
  .form-img { width: 8.7rem; max-width: 140px; }
}

@media screen and (min-width: 768px) {
  #tutorial-btn { color: var(--text-color); padding-bottom: 17px; margin-left: 11px; }
  #navbar-land { background-color: transparent; }
  #description-title { margin-top: -33.5px; }
  #language-section{ margin-top: -45px; }
  #info-section { font-size: 11px; }
  #icon-info { font-size: 11px; }
  #logo-loading { width: 17%; }
  .section-margin { margin-bottom: 8px; }
  .margin-top { margin-top: -4px; }
  .margin-bottom { margin-bottom: 8px;}
  .form-input-style { font-size: 16px; }
  .form-btn-style { font-size: 17px; }
  .form-btn-selected { font-size: 17px; }
  .content-padding { padding: 24px; }
}


/* Specific Height */
@media screen and (min-width: 768px) and (min-height: 600px) {
  .v-height { height: 100vh; }
}

@media screen and (max-width: 767px) and (min-height: 600px){
  .v-height { height: 100vh; }
}


/* Tablets and Phones */
@media screen and (max-width: 767px) {
  #landpage-form { justify-content: center; align-items: center; }
  #nav-conjogo-logo-word { display: none; }
  #landpage-description { display: none; }
  #language-section { margin-top: -22px; }
  #start-btn { font-size: 17px; }
  .margin-top{ margin-top: 3px; } 
  .margin-bottom { margin-bottom: -2px;} 
}

@media screen and (min-width: 450px) and (max-width: 767px) {
  #info-section { font-size: 13.6px; }
  #icon-info { font-size: 14.4px; }
  #logo-loading { width: 37%; }
  .section-margin { margin-bottom: 5px;}
  .content-padding { padding: 8px 24.5px 29px 24.5px; }
  .form-width { width: 22.3rem; max-width: 356.8px; }
  .form-img { width: 8.9rem; max-width: 142.4px; }
}

@media screen and (min-width: 375px) and (max-width: 449px) {
  #info-section { font-size: 13.6px; }
  #icon-info { font-size: 12.8px; }
  #logo-loading { width: 47%; }
  .section-margin { margin-bottom: 4px;}
  .content-padding { padding: 8px 22px 29px 22px; }
  .form-width { width: 20rem; max-width: 320px; }
  .form-img { width: 8.5rem; max-width: 136px; }
}

@media screen and (min-width: 330px) and (max-width: 374px) {
  #info-section { font-size: 12.8px; }
  #icon-info { font-size: 12.8px; }
  #logo-loading { width: 57%; }
  .section-margin { margin-bottom: 4px;}
  .content-padding { padding: 7px 22px 29px 22px; } 
  .form-width { width: 18rem; max-width: 288px; }
  .form-img { width: 8.3rem; max-width: 132.8px; }
}

@media screen and (max-width: 329px) {
  #info-section { font-size: 12.8px; }
  #icon-info { font-size: 12.1px; }
  #logo-loading { width: 57%; }
  .section-margin { margin-bottom: 4.8px; }
  .content-padding { padding: 12px 15px 29px 15px; } 
  .form-width { width: 16rem; max-width: 256px; }
  .form-img { width: 8.2rem; max-width: 131.2px; }
}