@import url(../vendor/normalize.css);
@import url(../vendor/fonts.css);

@property --angleButtonBackground {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

body {
  background: #050416;
  font-family: Arial, sans-serif;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  max-width: 1280px;
  margin: 0 auto;
  /*display: flex;*/
  /*justify-content: center;*/
}

.header {
  margin-top: 220px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.header__wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.header__wrapper:before {
  content: '';
  width: 400px;
  height: 400px;
  position: absolute;
  background: radial-gradient(circle, #fff 0%, #ab66ff 35%, #2640e4 70%, #fff0 100%);
  filter: blur(40px);
  z-index: -1;
  border-radius: 50%;
}

.header__title {
  font-family: 'Maghony';
  font-weight: 500;
  margin: 0 0 0 65px;
  font-size: 230px;
  letter-spacing: 15px;
  transform: scaleX(1.1);
  color: transparent;
  -webkit-text-stroke: 1px #fff;
  text-stroke: 1px #fff;
}

.header__subtitle {
  font-family: 'Steclo-ExtraLight';
  font-weight: 500;
  margin: 50px 0; /*Left 52px*/
  font-size: 60px;
  letter-spacing: 8px;
  color: #fff;
}

.header__link {
  text-decoration: none;
  color: #000;
  width: 304px;
  height: 74px;
  border-radius: 15px;
  background: #fff;
  border: 4px solid transparent;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  padding: 0 20px;
  font-size: 24px;
  position: relative;
  margin: 150px 0 0;
  transition: all .3s ease-in-out;
}

.header__link:hover {
    background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from var(--angleButtonBackground) in,
    #fff,
    #ab66ff,
    #2640e4,
    #fff,
    #ab66ff,
    #2640e4,
    #fff
  ) border-box;
  animation: rotation 5s linear infinite;
}

@keyframes rotation {
  to { --angleButtonBackground: 360deg; }
}