@import url('https://fonts.googleapis.com/css2?family=Anton&family=Roboto:ital,wdth,wght@0,75,300;1,75,300&display=swap');

:root {
  --primary-color-50: #21A5F5;
  --accent-color-50: #66ffbc;
  --secondary-color-10: #212121;
  --secondary-color-25: #2F2F2F;
  --secondary-color-50: #5E5E5E;
  --secondary-color-100: #DEDEDE;
  --title-font-family: "Anton", sans-serif;
  --general-font-family: "Roboto", sans-serif;
}

body {
  min-height: 100dvh;
  background: var(--secondary-color-10);
  font-style: normal;
  margin: 0;
}

*:not(pre):not(code) {
  box-sizing: border-box;
  font-family: var(--general-font-family);
  font-style: normal;
  color: var(--secondary-color-100)
}

canvas {
  vertical-align: bottom;
}

p {
  font-size: 1.5rem;
  margin: 0;
}

h2 {
  margin: 0;
  font-size: 2rem;
}

h3 {
  margin: 0 0 1rem 0;
  font-size: 1.75rem;
}

a {
  white-space: nowrap;
}

dt {
  text-align: start;
  padding: .75rem 1rem;
  opacity: .75;
}

@media screen and (width > 1000px) {
  dt {
    text-align: end;
    padding: .75rem 0 0;
  }
}

dl {
  margin: 1rem 0 2rem;
}

dd {
  margin: 0;
  padding: 0 1rem;
}

@media screen and (width > 1000px) {
  dd {
    padding: 0 0 0 2rem;
  }
}

hr {
	width: 100%;
	margin: .5rem 0;
	border: 1px solid var(--secondary-color-50);
}

footer {
	z-index: 1;
	padding: 2rem 1rem;
	background-color: var(--secondary-color-25);
  text-align: center;
}

.primary-text {
  color: var(--primary-color-50);
}

.push-to-left {
  padding-left: 2rem;
}

.animation-wrapper {
  width: 100%;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  gap: 0;
  grid-template-areas: 
    "main";
  overflow-x: hidden;
}

.animation-container {
  position: fixed;
  top: 0;
  width: clamp(600px, 50%, 800px);
  margin: 3rem 0 0 auto;
  aspect-ratio: 1/1;
  border-radius: 50%;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  gap: 0px 0px;
  grid-template-areas: "layout";
  translate: -1rem 0rem;
  grid-area: main;
  opacity: .1;
  filter: blur(4px);
  right: 0;
}

@media screen and (width > 1000px) {
  .animation-container {
    margin: 3rem 3rem 0 auto;
  }
}

.animation-row {
  grid-area: layout;
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  position: relative;
  perspective: 550px;
  transform-style: preserve-3d;
}

.animation-element {
  width: 8.3333%;
  height: 8.3333%;
  background-color: var(--accent-color-50);
  border-radius: 50%;
  transform: scale(0.125);
}

.animation-row.animation-row-front {
  scale: 1.02;
}

.animation-row .animation-element:nth-child(1),
.animation-row .animation-element:nth-child(2),
.animation-row .animation-element:nth-child(3),
.animation-row .animation-element:nth-child(4),
.animation-row .animation-element:nth-child(9),
.animation-row .animation-element:nth-child(10),
.animation-row .animation-element:nth-child(11),
.animation-row .animation-element:nth-child(12),
.animation-row .animation-element:nth-child(13),
.animation-row .animation-element:nth-child(14),
.animation-row .animation-element:nth-child(23),
.animation-row .animation-element:nth-child(24),
.animation-row .animation-element:nth-child(25),
.animation-row .animation-element:nth-child(36),
.animation-row .animation-element:nth-child(37),
.animation-row .animation-element:nth-child(48),
.animation-row .animation-element:nth-child(97),
.animation-row .animation-element:nth-child(108),
.animation-row .animation-element:nth-child(109),
.animation-row .animation-element:nth-child(120),
.animation-row .animation-element:nth-child(121),
.animation-row .animation-element:nth-child(122),
.animation-row .animation-element:nth-child(131),
.animation-row .animation-element:nth-child(132),
.animation-row .animation-element:nth-child(133),
.animation-row .animation-element:nth-child(134),
.animation-row .animation-element:nth-child(135),
.animation-row .animation-element:nth-child(136),
.animation-row .animation-element:nth-child(141),
.animation-row .animation-element:nth-child(142),
.animation-row .animation-element:nth-child(143),
.animation-row .animation-element:nth-child(144) {
  opacity: 0;
  animation: none;
}

.animation-row-front .animation-element:nth-child(66),
.animation-row-front .animation-element:nth-child(67),
.animation-row-front .animation-element:nth-child(78),
.animation-row-front .animation-element:nth-child(79) {
  animation: ring1 2s ease-in-out infinite;
  opacity: 0.25;
}

.animation-row-front .animation-element:nth-child(54),
.animation-row-front .animation-element:nth-child(55),
.animation-row-front .animation-element:nth-child(65),
.animation-row-front .animation-element:nth-child(68),
.animation-row-front .animation-element:nth-child(77),
.animation-row-front .animation-element:nth-child(80),
.animation-row-front .animation-element:nth-child(90),
.animation-row-front .animation-element:nth-child(91) {
  animation: ring2 2s 0.2s ease-in-out infinite;
  opacity: 0.25;
}

.animation-row-front .animation-element:nth-child(41),
.animation-row-front .animation-element:nth-child(42),
.animation-row-front .animation-element:nth-child(43),
.animation-row-front .animation-element:nth-child(44),
.animation-row-front .animation-element:nth-child(52),
.animation-row-front .animation-element:nth-child(53),
.animation-row-front .animation-element:nth-child(56),
.animation-row-front .animation-element:nth-child(57),
.animation-row-front .animation-element:nth-child(64),
.animation-row-front .animation-element:nth-child(69),
.animation-row-front .animation-element:nth-child(76),
.animation-row-front .animation-element:nth-child(81),
.animation-row-front .animation-element:nth-child(88),
.animation-row-front .animation-element:nth-child(89),
.animation-row-front .animation-element:nth-child(92),
.animation-row-front .animation-element:nth-child(93),
.animation-row-front .animation-element:nth-child(101),
.animation-row-front .animation-element:nth-child(102),
.animation-row-front .animation-element:nth-child(103),
.animation-row-front .animation-element:nth-child(104) {
  animation: ring3 2s 0.4s ease-in-out infinite;
  opacity: 0.25;
}

.animation-row-front .animation-element:nth-child(29),
.animation-row-front .animation-element:nth-child(30),
.animation-row-front .animation-element:nth-child(31),
.animation-row-front .animation-element:nth-child(32),
.animation-row-front .animation-element:nth-child(40),
.animation-row-front .animation-element:nth-child(45),
.animation-row-front .animation-element:nth-child(51),
.animation-row-front .animation-element:nth-child(58),
.animation-row-front .animation-element:nth-child(63),
.animation-row-front .animation-element:nth-child(70),
.animation-row-front .animation-element:nth-child(75),
.animation-row-front .animation-element:nth-child(82),
.animation-row-front .animation-element:nth-child(87),
.animation-row-front .animation-element:nth-child(94),
.animation-row-front .animation-element:nth-child(100),
.animation-row-front .animation-element:nth-child(105),
.animation-row-front .animation-element:nth-child(113),
.animation-row-front .animation-element:nth-child(114),
.animation-row-front .animation-element:nth-child(115),
.animation-row-front .animation-element:nth-child(116) {
  animation: ring4 2s 0.6s ease-in-out infinite;
  opacity: 0.25;
}

.animation-row-front .animation-element:nth-child(17),
.animation-row-front .animation-element:nth-child(18),
.animation-row-front .animation-element:nth-child(19),
.animation-row-front .animation-element:nth-child(20),
.animation-row-front .animation-element:nth-child(27),
.animation-row-front .animation-element:nth-child(28),
.animation-row-front .animation-element:nth-child(33),
.animation-row-front .animation-element:nth-child(34),
.animation-row-front .animation-element:nth-child(39),
.animation-row-front .animation-element:nth-child(46),
.animation-row-front .animation-element:nth-child(50),
.animation-row-front .animation-element:nth-child(59),
.animation-row-front .animation-element:nth-child(62),
.animation-row-front .animation-element:nth-child(71),
.animation-row-front .animation-element:nth-child(74),
.animation-row-front .animation-element:nth-child(83),
.animation-row-front .animation-element:nth-child(86),
.animation-row-front .animation-element:nth-child(95),
.animation-row-front .animation-element:nth-child(99),
.animation-row-front .animation-element:nth-child(106),
.animation-row-front .animation-element:nth-child(111),
.animation-row-front .animation-element:nth-child(112),
.animation-row-front .animation-element:nth-child(117),
.animation-row-front .animation-element:nth-child(118),
.animation-row-front .animation-element:nth-child(125),
.animation-row-front .animation-element:nth-child(126),
.animation-row-front .animation-element:nth-child(127),
.animation-row-front .animation-element:nth-child(128) {
  animation: ring5 2s 0.8s ease-in-out infinite;
  opacity: 0.25;
}

.animation-row-front .animation-element:nth-child(5),
.animation-row-front .animation-element:nth-child(6),
.animation-row-front .animation-element:nth-child(7),
.animation-row-front .animation-element:nth-child(8),
.animation-row-front .animation-element:nth-child(15),
.animation-row-front .animation-element:nth-child(16),
.animation-row-front .animation-element:nth-child(21),
.animation-row-front .animation-element:nth-child(22),
.animation-row-front .animation-element:nth-child(26),
.animation-row-front .animation-element:nth-child(35),
.animation-row-front .animation-element:nth-child(38),
.animation-row-front .animation-element:nth-child(47),
.animation-row-front .animation-element:nth-child(49),
.animation-row-front .animation-element:nth-child(60),
.animation-row-front .animation-element:nth-child(61),
.animation-row-front .animation-element:nth-child(72),
.animation-row-front .animation-element:nth-child(73),
.animation-row-front .animation-element:nth-child(84),
.animation-row-front .animation-element:nth-child(85),
.animation-row-front .animation-element:nth-child(96),
.animation-row-front .animation-element:nth-child(98),
.animation-row-front .animation-element:nth-child(107),
.animation-row-front .animation-element:nth-child(110),
.animation-row-front .animation-element:nth-child(119),
.animation-row-front .animation-element:nth-child(123),
.animation-row-front .animation-element:nth-child(124),
.animation-row-front .animation-element:nth-child(129),
.animation-row-front .animation-element:nth-child(130),
.animation-row-front .animation-element:nth-child(137),
.animation-row-front .animation-element:nth-child(138),
.animation-row-front .animation-element:nth-child(139),
.animation-row-front .animation-element:nth-child(140) {
  animation: ring6 2s 1s ease-in-out infinite;
  opacity: 0.25;
}

.animation-row-back .animation-element {
  transform: scale(0.125);
  opacity: 0.25;
}

.animation-row-front .animation-element {
  opacity: 0;
  transform: scale(0.125) perspective(500px) translateZ(0rem);
}

@keyframes ring1 {
  0% {
    transform: scale(0.125) perspective(500px) translateZ(0rem);
    opacity: 0.25;
  }
  50% {
    transform: scale(1.4) perspective(500px) translateZ(2rem);
    opacity: 1;
  }
  100% {
    transform: scale(0.125) perspective(500px) translateZ(0rem);
    opacity: 0.25;
  }
}

@keyframes ring2 {
  0% {
    transform: scale(0.125) perspective(500px) translateZ(0rem);
    opacity: 0.25;
  }
  50% {
    transform: scale(1.2) perspective(500px) translateZ(2rem);
    opacity: 1;
  }
  100% {
    transform: scale(0.125) perspective(500px) translateZ(0rem);
    opacity: 0.25;
  }
}

@keyframes ring3 {
  0% {
    transform: scale(0.125) perspective(500px) translateZ(0rem);
    opacity: 0.25;
  }
  50% {
    transform: scale(1) perspective(500px) translateZ(2rem);
    opacity: 1;
  }
  100% {
    transform: scale(0.125) perspective(500px) translateZ(0rem);
    opacity: 0.25;
  }
}

@keyframes ring4 {
  0% {
    transform: scale(0.125) perspective(500px) translateZ(0rem);
    opacity: 0.25;
  }
  50% {
    transform: scale(0.8) perspective(500px) translateZ(2rem);
    opacity: 1;
  }
  100% {
    transform: scale(0.125) perspective(500px) translateZ(0rem);
    opacity: 0.25;
  }
}

@keyframes ring5 {
  0% {
    transform: scale(0.125) perspective(500px) translateZ(0rem);
    opacity: 0.25;
  }
  50% {
    transform: scale(0.6) perspective(500px) translateZ(2rem);
    opacity: 1;
  }
  100% {
    transform: scale(0.125) perspective(500px) translateZ(0rem);
    opacity: 0.25;
  }
}

@keyframes ring6 {
  0% {
    transform: scale(0.125) perspective(500px) translateZ(0rem);
    opacity: 0.25;
  }
  50% {
    transform: scale(0.4) perspective(500px) translateZ(2rem);
    opacity: 1;
  }
  100% {
    transform: scale(0.125) perspective(500px) translateZ(0rem);
    opacity: 0.25;
  }
}

.main-content {
	grid-area: main;
	z-index: 1;
	display: flex;
	flex-flow: column;
	gap: 2rem;
}

.main-header {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	flex-direction: column;
	height: 90dvh;
	gap: 24px;
  padding: 0 1rem;
  max-width: 1000px;
  margin: 0 auto;
}

.main-header h1 * {
  font-family: var(--title-font-family);
  line-height: 0;
}

.main-title {
  font-size: 2.5rem;
  margin: 0;
  text-transform: uppercase;
}

.like-button {
  background-color: var(--primary-color-50);
  color: var(--secondary-color-10);
  padding: 1rem 2rem;
  text-decoration: none;
  font-size: 1.25rem;
  font-family: var(--title-font-family);
  transition: all 0.3s ease-in-out;
}

.like-button:hover,
.like-button:focus,
.like-button:focus-visible {
  box-shadow: .5rem .5rem 0 #fff;
  translate: -.25rem -.25rem;
  outline: none;
}

.columns-wrapper {
  display: flex;
  flex-direction: column;
}

@media screen and (width > 1000px) {
  .columns-wrapper {
    flex-direction: row;
  }
}

.col-1 {
	width: 100%;
	padding: 2rem 1rem;
	max-width: 1000px;
	margin: 0 auto;
}

.col-2 {
  width: 100%;
}

@media screen and (width > 1000px) {
  .col-2 {
    width: 50%;
  }
}

.col-3 {
  width: 100%;
}

@media screen and (width > 1000px) {
  .col-3 {
    width: 25%;
  }
}

.col-4 {
  width: 100%;
}

@media screen and (width > 1000px) {
  .col-4 {
    width: 75%;
  }
}

.justify-end {
  display: flex;
  justify-content: flex-end;
}

.doted-background {
  background-color: var(--secondary-color-10);
  background-image:
    linear-gradient(transparent 8px, var(--secondary-color-25) 8px, var(--secondary-color-25) 9px, transparent 9px),
    linear-gradient(to right, transparent 8px, var(--secondary-color-25) 8px, var(--secondary-color-25) 9px, transparent 9px);
  background-size: 17px 17px;
  mix-blend-mode: color;
}

.gray-background {
  background-color: var(--secondary-color-25);
  min-height: 1rem;
}

.half-left-width {
  padding: 2rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@media screen and (width > 1000px) {
  .half-left-width {
    max-width: 500px;
    margin-left: auto;
  }
}

.half-right-width {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@media screen and (width > 1000px) {
  .half-right-width {
    max-width: 500px;
    margin-right: auto;
    padding-right: 1rem;
  }
}

@keyframes show {
  0% {
    opacity: 0;
    scale: 25%;
  }
  100% {
    opacity: 1;
    scale: 100%;
  }
}

.circle-animation-wrapper {
	margin: 0;
	display: flex;
	list-style: none;
	padding: 0;
	width: 100%;
	height: 4rem;
  overflow: hidden;
  flex-wrap: wrap;
}

@media screen and (width > 1000px) {
  .circle-animation-wrapper {
    height: 100%;
  }
}

.circle-animation {
	width: 20%;
	height: 5rem;
	overflow: hidden;
	position: relative;
  perspective: 550px;
  transform-style: preserve-3d;
}

@media screen and (width > 1000px) {
  .circle-animation {
    width: 20%;
    height: 20%;
  }
}

.circle {
	width: 30%;
	aspect-ratio: 1/1;
	background-color: var(--accent-color-50);
	border-radius: 50%;
	position: absolute;
	left: 50%;
  transition: all .3s ease;
  animation: circle  3s infinite both;
}

.circle-animation:nth-child(1) .circle {
  animation-delay: 0s;
  scale: 1;
}

.circle-animation:nth-child(2) .circle {
  animation-delay: .1s;
  scale: 1.2;
}

.circle-animation:nth-child(3) .circle {
  animation-delay: .2s;
  scale: 1.4;
}

.circle-animation:nth-child(4) .circle {
  animation-delay: .3s;
  scale: 1.6;
}

.circle-animation:nth-child(5) .circle {
  animation-delay: .4s;
  scale: 1.8;
}

.circle-animation:nth-child(6) .circle {
  animation-delay: .5s;
  scale: 2;
}

.circle-animation:nth-child(7) .circle {
  animation-delay: .6s;
  scale: 2.2;
}

.circle-animation:nth-child(8) .circle {
  animation-delay: .7s;
  scale: 2.4;
}

.circle-animation:nth-child(9) .circle {
  animation-delay: .8s;
  scale: 2.6;
}

.circle-animation:nth-child(10) .circle {
  animation-delay: .9s;
  scale: 2.8;
}

.circle-animation:nth-child(11) .circle {
  animation-delay: 1s;
  scale: 3;
}

.circle-animation:nth-child(12) .circle {
  animation-delay: 1.1s;
  scale: 3.2;
}

.circle-animation:nth-child(13) .circle {
  animation-delay: 1.2s;
  scale: 3.4;
}

.circle-animation:nth-child(14) .circle {
  animation-delay: 1.3s;
  scale: 3.6;
}

.circle-animation:nth-child(15) .circle {
  animation-delay: 1.4s;
  scale: 3.8;
}

.circle-animation:nth-child(16) .circle {
  animation-delay: 1.5s;
  scale: 4;
}

.circle-animation:nth-child(17) .circle {
  animation-delay: 1.6s;
  scale: 4.2;
}

.circle-animation:nth-child(18) .circle {
  animation-delay: 1.7s;
  scale: 4.4;
}

.circle-animation:nth-child(19) .circle {
  animation-delay: 1.8s;
  scale: 4.6;
}

.circle-animation:nth-child(20) .circle {
  animation-delay: 1.9s;
  scale: 4.8;
}

.circle-animation:nth-child(21) .circle {
  animation-delay: 2s;
  scale: 5;
}

.circle-animation:nth-child(22) .circle {
  animation-delay: 2.1s;
  scale: 5.2;
}

.circle-animation:nth-child(23) .circle {
  animation-delay: 2.2s;
  scale: 5.4;
}

.circle-animation:nth-child(24) .circle {
  animation-delay: 2.3s;
  scale: 5.6;
}

.circle-animation:nth-child(25) .circle {
  animation-delay: 2.5s;
  scale: 5.8;
}

@keyframes circle {
  0% {
    transform: perspective(500px) translateZ(10rem);
  }
  25% {
    transform: perspective(500px) translateZ(10rem) translate(-100%, 100%);
  }
  50% {
    transform: perspective(500px) translateZ(-10rem);
  }
 75% {
    transform: perspective(500px) translateZ(0rem) translate(-200%, 10%);
  }
  100% {
    transform: perspective(500px) translateZ(10rem);
  }
}

.badge-container {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  padding: 1rem 0;
  list-style: none;
  margin: 1rem 0;
  padding: 0;
}

.badge {
	font-size: .75rem;
  padding: .25rem .75rem;
	border-radius: 1rem;
	background-color: rgba(33, 165, 245, .25);
	display: inline-block;
  border: 1px solid var(--primary-color-50);
}

.social-icon {
	display: inline-block;
	line-height: 0;
	text-align: center;
	margin-bottom: .5rem;
}

.legal {
  font-size: .75rem;
}

.gradient-animation {
  background: linear-gradient(-45deg, var(--secondary-color-100), var(--primary-color-50), var(--accent-color-50), var(--secondary-color-50));
	background-size: 400% 400%;
	animation: gradient 5s ease infinite;
  height: .5rem;
}

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