@import url("lang-sel.css");

:root {
  --primary-color: #2c3e50;
  --secondary-color: #272939;
  --text-color: #fff;
  --theme-background: var(--primary-color);
  --link-active-color: #fff;
  --video-button-hover-background-color: rgb(111, 107, 107, 0.34);
}

body {
  background: linear-gradient(135deg, #6baeff, #6c7dff, #4eaadc, #4483e8, #338aff);
  background-size: 300% 300%;
  animation: gradientAnimation 6s ease infinite;
  color: var(--text-color);
}

.main-body {
  text-align: center;
  padding: calc(var(--gap) * 1);
}

.title1 {
  font-size: clamp(28px, 8vmin, 56px);
  font-weight: 900;
}

.main-width,
.main-content,
[main-width],
[main-content] {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.main-doc,
[main-doc] {
  width: 100%;
  max-width: 780px;
  margin: 0 auto;
}

.header,
.footer {
  padding: calc(var(--gap));
}

.header .logo .icon {
  width: 44px;
  border-radius: 20%;
}

.header .logo {
  display: flex;
  align-items: center;
  gap: calc(var(--gap) * 0.5);
}

._body {
  flex: auto;
  width: 100%;
}

downloader-input {
  display: block;
  max-width: 780px;
  margin: 0 auto;
}

downloader-input .contain {
  display: flex;
  border: solid 2px var(--text-color);
}

downloader-input .input {
  width: 100%;
  flex: 1;
  padding: calc(var(--gap) * 1);
  border: none;
  background-color: transparent;
  color: var(--text-color);
}

downloader-input input.input,
downloader-input input.input::placeholder {
  color: var(--text-color);
}

downloader-input input.input:focus {
  outline: none;
}

downloader-input .button {
  gap: calc(var(--gap) * 0.5);
  background-color: var(--primary-color);
}

.AppMenu go-option:hover,
.container .button:hover,
.container .button:active {
  background-color: var(--video-button-hover-background-color) !important;
}

.header .menu-btn {
  background-color: var(--primary-color);
  border-radius: 50%;
}

.alertCloseButton > div {
  background-color: #4e6c89;
  border-radius: calc(var(--gap) * 0.5);
}

.header .nav {
  gap: calc(var(--gap) * 1.5);
}

.header .left .nav {
  margin: 0 0 0 calc(var(--gap) * 0.5);
}

.header .nav .btn {
  display: inline-flex;
  gap: calc(var(--gap) * 1.5);
  padding: calc(var(--gap) * 1) 0;
}

@media (min-width: 768px) {
  .main-body {
    padding: calc(var(--gap) * 2);
  }
}

@keyframes gradientAnimation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}