@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css");

body {
    font-family: 'Montserrat', sans-serif;
	width: 100wh;
	height: 90vh;
	color: #fff !important;
	background: linear-gradient(45deg, #e10c08, #213f9f, #000);
	background-size: 400% 400%;
	animation: Gradient 15s ease infinite;
}

#gradient-canvas {
    width:100%;
    height:100%;
    --gradient-color-1: #e10c08; 
    --gradient-color-2: #213f9f; 
    z-index:0;
  }

@-webkit-keyframes Gradient {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
}

@-moz-keyframes Gradient {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
}

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

.shake {
	animation: shake-animation 4.72s ease infinite;
	transform-origin: 50% 50%;
}

@keyframes shake-animation {
	0% { transform:translate(0,0) }
	1.78571% { transform:translate(5px,0) }
	3.57143% { transform:translate(0,0) }
	5.35714% { transform:translate(5px,0) }
	7.14286% { transform:translate(0,0) }
	8.92857% { transform:translate(5px,0) }
	10.71429% { transform:translate(0,0) }
	100% { transform:translate(0,0) }
}

.circle {
	box-shadow: 0 0.2rem 1rem #000; 
	border-radius: 5rem;
}

.logo {
	background-size: contain;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-color: #fff;
	padding: 5rem;
}

.social-icon {
	color: #fff;
	font-size: 2rem;
}

.custom-icon {
	line-height: 1rem;
	display: inline-block;
}

.btn-custom {
	width: 70%;
	padding: 1rem !important;
}