@import url('main.css');
@import url('header.css');
@import url('navbar.css');
@import url('vertical-menu.css');
@import url('tooltip.css');
@import url('language.css');
@import url('words.css');
@import url('pagination.css');
@import url('courses.css');
@import url('lessons.css');
@import url('admin.css');
@import url('lesson.css');
@import url('tests.css');

.login-page, .register-page, .error-page {
  display: flex;
  flex-direction: column;
}

.error-page .img {
  position: relative;
  top: var(--main-content-top);
  width: 60%;
  margin: auto;
  z-index: -1;
}

.login-page .form, .register-page .form  {
  position: absolute;
  top: var(--main-content-top);
  width: 100%;
  text-align: center;
}

.login-page .form h2, .register-page .form h2 {
  color: var(--blue-dark-color);
}

.contacts-page {
  position: absolute;
  top: var(--main-content-top);
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: center;
}

.contacts-img {
  position: absolute;
  top: 200px;
  left: 50px;
  width: 15em;
  height: 13em;
}

.contacts-form {
  display: flex;
  flex-direction: column;
  text-align: center;
}

.contacts-form .message {
  height: 100px;
}

.error-massage {
  color: red;
  font-size: 1em;
}

.no-account {
  margin-top: 1.5em;
  font-size: 1.2em;
  color: var(--blue-light-color);
}

.no-account a {
  text-decoration: none;
  color: green;
}

.settings-page {
  display: flex;
  flex-direction: row;
  position: absolute;
  width: 100%;
  top: var(--main-content-top);
  justify-content: center;
  gap: 2em;
}

.settings-page form {
  border: 0.25em solid var(--blue-dark-lighter-color);
  border-radius: 1em;
  padding: 1em;
}

.settings-page h2 {
  color: var(--blue-dark-color);
}

.home-page {
  display: flex;
  flex-direction: column;
  position: absolute;
  width: 100%;
  top: var(--main-content-top);
  justify-content: center;
  gap: 2em;
}

.home-page .items-container {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: flex-end;
  gap: 1em;
}

.home-page .items-container .item {
  text-align: center;
}
.home-page h1,h2,h3 {
  text-align: center;
}

.home-page .items-container .item img {
  width: 15em;
  height: 20em;
  border-radius: 15%;
}
@media screen and (max-width: 1024px) {
  .home-page .items-container .item img {
    width: 12em;
    height: 16em;
    border-radius: 15%;
  }
}
@media screen and (max-width: 768px) {
  .home-page .items-container .item img {
    width: 10.8em;
    height: 14.4em;
    border-radius: 15%;
  }
}

.home-page h2 {
  color: var(--blue-dark-lighter-color);
}
.home-page h3 {
  color: #20b2aa;
}

.home-page .items-container .item img:hover {
  transform: scale(1.2) translateY(-1em);
}

.home-page .items-container .item img:focus-visible {
  transform: scale(1.2) translateY(-1em);
}

.under-construction {
  display: flex;
  justify-content: center;
}

.under-construction img {
  width: 30em;
  height: 33em;
}

.privacy-policy-page {
  display: flex;
  flex-direction: column;
  position: absolute;
  width: calc(100% - 4em);
  top: var(--main-content-top);
  justify-content: center;
  padding-right: 2em;
  padding-left: 2em;
}

.privacy-policy-page p {
  margin-block-start: 0;
  margin-block-end: 0;
}
