@charset "UTF-8";












@import url(https://fonts.googleapis.com/css?family=Roboto:300,regular,500,700,900&display=swap);

*:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) {

  all: unset;

  display: revert;

}





*,

*::before,

*::after {

  box-sizing: border-box;

}





a,

button {

  cursor: revert;

}





ol,

ul,

menu {

  list-style: none;

}





img {

  max-inline-size: 100%;

  max-block-size: 100%;

}





table {

  border-collapse: collapse;

}





input,

textarea {

  -webkit-user-select: auto;

}





textarea {

  white-space: revert;

}





meter {

  -webkit-appearance: revert;

  -moz-appearance: revert;

       appearance: revert;

}





:where(pre) {

  all: revert;

}





::-moz-placeholder {

  color: unset;

}

::placeholder {

  color: unset;

}





::marker {

  content: initial;

}






:where([hidden]) {

  display: none;

}







:where([contenteditable]:not([contenteditable=false])) {

  -moz-user-modify: read-write;

  -webkit-user-modify: read-write;

  overflow-wrap: break-word;

  -webkit-line-break: after-white-space;

  -webkit-user-select: auto;

}





:where([draggable=true]) {

  -webkit-user-drag: element;

}





:where(dialog:modal) {

  all: revert;

}



html,

body {

  font-family: "Roboto", sans-serif;

  background-color: #0d1016;

  color: #fff;

  font-weight: 400;

}



body {

  min-height: 100vh;

  display: flex;

  flex-direction: column;

  overflow-x: hidden;

}



h1 {

  font-size: 36px;

  font-weight: 600;

  margin: 25px 0;

  text-align: center;

}



h2 {

  font-size: 32px;

  font-weight: 600;

  margin: 20px 0;

  text-align: center;

}



h3 {

  font-size: 28px;

  font-weight: 600;

  margin: 15px 0;

}



ol {

  list-style: decimal;

}



ul {

  list-style: disc;

}



table {

  border-collapse: collapse;

  width: 100%;

  overflow-x: auto;

  margin: 20px 0;

}

table tr td,

table tr th {

  border: 1px solid #333;

  padding: 15px;

}

table tr th {

  background-color: #ff2400;

  color: #fff;

  font-size: 18px;

  text-align: center;

}

table tr td:hover {

  background-color: rgba(204, 204, 204, 0.1647058824);

}



.header {

  position: fixed;

  width: 100%;

  top: 0;

  left: 0;

  z-index: 99;

  padding: 20px 0;

  background-color: #0d1016;

}

.header .container {

  display: flex;

  align-items: center;

  justify-content: space-between;

}

.header__logo {

  flex-grow: 1;

  display: flex;

  justify-content: center;

}

.header__logo img {

  width: 200px;

}

.header__auth {

  display: flex;

  gap: 10px;

}

.header__auth .btn {

  padding: 0.5rem 1.5rem;

  font-weight: 500;

  font-size: 1.2rem;

  line-height: 150%;

  white-space: nowrap;

  border-radius: 0.25rem;

  position: relative;

}

.header__auth .register {

  background-color: #ff2400;

}

.header__auth .register::after {

  width: calc(100% + 24px);

  height: calc(100% + 24px);

}

.header__auth .register:hover {

  background: linear-gradient(0deg, rgba(49, 51, 52, 0.15), rgba(49, 51, 52, 0.15)), #ff2400;

}

.header__auth .register:not(:active):not(:disabled):after {

  content: "";

  animation: button-pulse 1.6s ease-out infinite 0.5s;

  position: absolute;

  border-radius: 0.25rem;

  left: 50%;

  top: 50%;

  transform: translate(-50%, -50%) scale(0.7, 0.5);

  background: rgba(255, 36, 0, 0.5);

  z-index: -1;

  transition: transform 0.5s linear;

}

.header__auth .login {

  padding: 0.5rem 1rem;

}

.header__auth .login::before {

  content: "";

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  border-radius: 0.25rem;

  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);

  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);

  -webkit-mask-composite: xor;

  mask-composite: exclude;

  padding: 1px;

  background: #ff2400;

}

.header__auth .login:hover {

  background: #ff2400;

  color: #fff;

}



.main {

  height: 100%;

  flex: 1 1 auto;

  padding: 120px 0;

}

.main .first__screen {

  background: #f45003;

  background: conic-gradient(from 225deg, rgb(255, 36, 0), #f57028);

  padding-top: 50px;

}

.main .first__screen .container {

  display: flex;

  justify-content: space-around;

  align-items: center;

}

.main .cards {

  display: flex;

  flex-direction: column;

  gap: 30px;

}

.main .cards .card {

  position: relative;

  border: 1px solid transparent;

  width: 456px;

  position: relative;

  cursor: pointer;

  display: flex;

  align-items: center;

  padding: 1rem 10px 1rem 27px;

  background: #0d1016;

  border: 3px solid #0d1016;

  border-radius: 1.2rem;

  display: flex;

  gap: 20px;

  animation: pulse 2s infinite;

  transition: transform 0.3s ease-in-out;

}

.main .cards .card::before {

  content: "";

  position: absolute;

  border-radius: 1.2rem;

  padding: 3px;

  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);

  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);

  -webkit-mask-composite: xor;

  mask-composite: exclude;

  top: -3px;

  left: -3px;

  right: -3px;

  bottom: -3px;

  background: linear-gradient(98.86deg, #00cfa6 0%, rgba(0, 207, 166, 0.2) 100%);

  z-index: 0;

}

.main .cards .card__checkbox {

  position: absolute;

  top: -0.5rem;

  left: -0.5rem;

  cursor: pointer;

  border-radius: 50%;

  background-color: #1b1f28;

}

.main .cards .card__checkbox .circle {

  width: 2rem;

  height: 2rem;

  border-radius: 50%;

  background: transparent;

  box-shadow: -1px 1px 2px 0px rgba(13, 16, 22, 0.4) inset;

  position: relative;

}

.main .cards .card__checkbox .circle::before {

  content: "";

  position: absolute;

  border-radius: 0.25rem;

  padding: 1px;

  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);

  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);

  -webkit-mask-composite: xor;

  mask-composite: exclude;

  background: linear-gradient(141.95deg, #01cfa6 25.7%, #007e65 100%);

  top: -1px;

  left: -1px;

  right: -1px;

  bottom: -1px;

  border-radius: 50%;

  z-index: 0;

}

.main .cards .card__checkbox .circle.active {

  border-width: 0;

  background: #00cfa6;

  box-shadow: 1px 1px 2px 0px rgba(13, 16, 22, 0.4) inset;

}

.main .cards .card__checkbox .circle.active::before {

  position: absolute;

  content: "";

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  border-radius: 50%;

  width: 0;

  height: 0;

  z-index: 1;

  padding: 0 !important;

}

.main .cards .card__checkbox .circle.active::after {

  position: absolute;

  content: "";

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  border-radius: 50%;

  width: 18px;

  height: 18px;

  box-sizing: border-box;

  z-index: 2;

  border: 2px solid #ffffff;

  background: linear-gradient(144.73deg, #e3e3e3 15.19%, #ffffff 56.91%);

  box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.1803921569);

}

.main .cards .card__img {

  display: flex;

  justify-content: center;

  width: 130px;

  height: 95px;

  position: relative;

}

.main .cards .card__img img {

  position: absolute;

  width: 100%;

  height: 100%;

  top: 0;

  left: 0;

  -o-object-fit: cover;

     object-fit: cover;

}

.main .cards .card__text {

  display: flex;

  flex-direction: column;

  align-items: flex-start;

  text-align: left;

}

.main .cards .card__text .title {

  font-size: 1.75rem;

  line-height: 2.0625rem;

  font-weight: 400;

  font-weight: 700;

}

.main .cards .card__text p {

  font-size: 1rem;

  line-height: 1.375rem;

  font-weight: 400;

  color: #80858f;

}

.main .cards .card.active {

  position: relative;

  border: 3px solid transparent;

}

.main .cards .card.active::before {

  content: "";

  position: absolute;

  border-radius: 0.25rem;

  padding: 3px;

  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);

  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);

  -webkit-mask-composite: xor;

  mask-composite: exclude;

  top: -3px;

  left: -3px;

  right: -3px;

  bottom: -3px;

  background: linear-gradient(98.86deg, #00cfa6 0%, rgba(0, 207, 166, 0.2) 100%);

  z-index: 0;

}

.main .main__img {

  margin-bottom: -4px;

}

.main .content {

  padding-top: 50px;

}

.main .content p {

  margin: 12px 0;

}

.main .content img {

  max-width: 500px;

  margin: 15px auto;

  text-align: center;

  display: flex;

}



.footer .text {

  padding: 50px 0;

  text-align: center;

}

.footer svg {

  width: 100%;

}



.container {

  max-width: 90vw;

  margin: 0 auto;

  padding: 0 16px;

}



@media (max-width: 1199px) {

  .main .first__screen .container {

    flex-direction: column;

    gap: 20px;

  }

  .main .cards .card {

    width: 100%;

  }

  .main__img {

    max-width: 150px;

  }

  .main .content img {

    width: 100%;

  }

  .footer {

    border-top: 1px solid #ff2400;

  }

  .footer svg {

    display: none;

  }

}

@media (max-width: 768px) {

  h1 {

    margin: 20px 0;

    font-size: 30px;

  }

  h2 {

    font-size: 24px;

    margin: 15px 0;

  }

  h3 {

    font-size: 20px;

    margin: 10px 0;

  }

  .container {

    max-width: 100%;

  }

  .header .container {

    max-width: 100%;

    flex-direction: column;

    gap: 20px;

  }

  .header__auth {

    gap: 15px;

  }

  .header__logo img {

    width: 100px;

  }

  .main {

    padding: 135px 0 50px;

  }

  .main .content {

    padding-top: 30px;

  }

}

@keyframes pulse {

  0% {

    transform: scale(1);

    box-shadow: 1px 0 1px #473e12, 0 1px 1px #39ffa4, -1px 0 1px #473e12, 0 -1px 1px #ffdf39;

  }

  50% {

    transform: scale(1.05);

    box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);

  }

  100% {

    transform: scale(1);

    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);

  }

}

@keyframes button-pulse {

  0% {

    transform: translate(-50%, -50%) scale(0.7, 0.5);

    opacity: 0;

    border-radius: 0.25rem;

  }

  12% {

    opacity: 1;

  }

  34% {

    transform: translate(-50%, -50%) scale(1);

  }

  38% {

    opacity: 0;

  }

  40% {

    transform: translate(-50%, -50%) scale(1);

    opacity: 0;

    border-radius: 0.5rem;

  }

  to {

    transform: translate(-50%, -50%) scale(1);

    opacity: 0;

    border-radius: 0.25rem;

  }

}