@import './css/styles/information-block.css';
@import './css/styles/language-block.css';
@import './css/styles/form-block.css';
@import './css/styles/subscribe-block.css';

:root {
  --r-c-white-6: #fff;
  --r-c-cont-lev-4: #1a1a1a;
  --r-w-fc-lev-1: #666;
  --r-w-fc-lev-3: #999;
  --r-c-bc-grey-4: #787878;
  --r-c-bc-red-2: #c7463d;
  --system-blue-007-aff: #007aff;
  --color-link-reg: #2e4da3;
  --color-hover: #1da1f2;

  --range-top: 23px;
  --range-left: 20px;

  --bg-white: #fff;
  --bg-blue: #2e4da3;
  --bg-icon: #f5f7fc;

  --border-form-gray: #ccc;
  --border-wrapper-blue: #7ec5e7;
  --border-light-blue: #d8eefc;

  --font-verdana: 'Verdana', sans-serif;
  --fw-normal: 400;
  --fw-bold: 700;
  --fs-title: clamp(28px, 25.1px + 0.91vw, 33px);
  --fs-m: clamp(16px, 15.28px + 0.23vw, 18px);
  --fs-s: clamp(14px, 11.28px + 0.23vw, 16px);
  --fs-xs: clamp(12px, 10px + 23vw, 14px);
}

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body {
  font-family: var(--font-verdana);
  font-weight: var(--fw-normal);
  font-style: normal;

  background: linear-gradient(
    180deg,
    #2da1d9 -24.16%,
    #2da1d9 -1.69%,
    #2e4da3 64.56%,
    #2e3190 85.85%,
    #2e3190 94.13%
  );
}

li {
  list-style-type: none;
}

a {
  text-decoration: none;
}

.main {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  padding: 30px;

  background-image: url('./css/img/backgrounds/background.svg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom center;
  overflow: hidden;
}

.wrapper {
  display: flex;

  max-width: 1025px;
  width: 100%;
  max-height: 750px;
  height: 100%;
}

.show {
  animation: show 0.4s ease-in-out;
}

.hidden {
  animation: hide 0.4s ease-in-out;
}

.drop-menu {
  display: none;
}

@media (max-width: 992px) {
  .wrapper {
    position: relative;
    flex-direction: column;
    max-width: 550px;
    height: initial;
    max-height: initial;
  }
}

@media (max-width: 460px) {
  .main {
    padding: 0;
  }
  .wrapper {
    width: 100vw;
    height: 100vh;
    max-height: initial;
  }
}

@keyframes show {
  0% {
    transform: translateY(200%);
  }
  100% {
    transform: translateY(15%);
  }
}

@keyframes hide {
  0% {
    transform: translateY(15%);
  }
  100% {
    transform: translateY(200%);
  }
}

@keyframes shake {
  0%,
  100% {
    translate: 0;
  }

  25% {
    translate: 10px 0;
  }

  50% {
    translate: -10px 0;
  }
}

@keyframes scaleIn {
  0% {
    opacity: 0;
    transform: scale(0.75);
  }

  50% {
    opacity: 0.3;
    transform: scale(0.9);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}