*{
	margin:0;
	padding: 0;
	 cursor: auto;
}
:root {
	--card-color:#2f375f;
	--text-color:black;
	--potential-color:#17242C;
	--background-color:#212539;

}
canvas{
	 cursor: auto;
	 width:600px;
	 height:600px;

}
::selection {
  background: #47daffbd; /* WebKit/Blink Browsers */
}
::-moz-selection {
  background: #47daffbd; /* Gecko Browsers */
}

body{
	padding-top: 0px;
	display: flex;
	flex-direction: column;
	align-content: center;
	background-color:var(--background-color);

	color:#FFFFFF;
	margin:0;
	height:100%;
	font-family: 'Oxygen', sans-serif;
}
#cursor{
	visibility: hidden;
	width:15px;
	height:15px;
	pointer-events: none;
    position: absolute;
    background-color: #fff;
    border-radius: 50%;
    mix-blend-mode: difference;
    transition: transform 0.3s ease;
    z-index: 1000;
}
#banner{
	margin-top:none;
	display: flex;
	flex-direction: column;
	align-content: center;
	background:#23283D;
	margin:0;
	padding:2rem;
	padding-left:0;
	padding-right:0;
	padding-bottom:6rem;
	position: relative;
	clip-path: polygon(100% 0, 100% 89%, 76% 95%, 43% 92%, 25% 89%, 0 100%, 0 0);
	z-index: 10;
	width:100%;
}
.bannershadow{
	filter:drop-shadow(0px 5px rgba(255, 44, 44, 0.8));

}
#title{
	margin:auto;
	padding:1rem;
	position: relative;
	font-size:5rem;
	z-index: 1;
	letter-spacing: 5px;
	text-shadow: -5px -4px rgb(253, 55, 55),5px 4px rgb(120, 71, 255);
	color:rgba(255,255,255,0.95);
	font-family: 'Bevan', cursive;
	transform-style: preserve-3d;
  	perspective: 1000px;
	display:flex;
	will-change:transform;

}
#text{
	transform: translateZ(50px);
}
#title div{
	width:98%;
	height:50%;
	background-color: rgb(69, 125, 207);
	background:rgb(102, 171, 182);
	position: absolute;
	top:55px;
	left:35px;
	z-index:-1;

}
#subtitle{
	color:rgba(255, 255, 255, 0.8);
	margin:auto;
	padding:1rem;
	font-size: 2rem;
	text-shadow: 3px 3px rgb(104, 71, 104);
	  

}

.content{
	padding:1rem;
	padding-top:2rem;
	display: flex;
	flex-direction: row;
	flex-wrap:wrap;
	color:rgb(209, 209, 209);
}


footer{

	padding:2rem;
	padding-top:5rem;
	text-align: center;
	clip-path: polygon(51% 8%, 74% 13%, 100% 1%, 100% 100%, 0 100%, 0 11%, 10% 18%);
	background:#10121b;
	min-height: 10rem;
	
}

.card{
	width:400px;
	min-width:400px;
	min-height:200px;
	margin:auto;
	background: var(--card-color);
	text-align: center;
	padding:0.1rem;
	transform-style: preserve-3d;
  	perspective: 1000px;
	position: relative;
	margin-top:30px;
	display:flex;
	will-change:transform;
	flex-direction: column;
	padding-top:2.5rem;
	padding-bottom:3rem;


}

.link{

	text-decoration: none;
	color:rgb(45, 51, 80);
	margin-bottom:1rem;
	margin:auto;
	padding:0.5rem 1rem 0.5rem 1rem;
	transition: box-shadow 0.4s;
	background:rgb(187, 224, 255);
	box-shadow:2px 2px rgb(253, 55, 55), 3px 3px rgba(253, 55, 55, 0.623), 4px 4px rgba(253, 55, 55, 0.288), 5px 5px rgba(253, 55, 55, 0.055);
	
}
.link:hover{
	box-shadow: 0px 2px white;
}


.card img{
	margin-top:0;
	width:75%;
	align-self: center;
	margin:auto;
	position: relative;
	z-index: 2;
	margin-top:-8%;
	margin-bottom:0.5rem;

}

.cardtitle{
	color:rgba(255, 255, 255, 0.904);
	padding:0;
	margin:0;
	padding-left:0.5rem;
	padding-right:0.5rem;
	margin-top:0.5rem;
	align-self:center;
	transform: translateZ(90px);
	position: relative;
	z-index:10;
	padding-bottom: 0;
	margin-bottom: 0;
	text-shadow: 3px 3px rgb(167, 47, 167);

}
.cardtext1{
	padding:0.5rem;
	margin:0;
	transform: translateZ(70px);
	position: relative;
}

.cardtext2{
	padding:0.5rem;
	margin:auto;
	transform: translateZ(50px);
	position: relative;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content:space-evenly;
	width:70%;
}
.cardtext3{

	padding:0.5rem;
	margin:0;
	transform: translateZ(30px);
	position: relative;
}
.back{
	margin:auto;
	margin-top:2rem;
}
@media only screen and (max-width: 900px) {

  #title{
	  font-size: 3rem;
  }#subtitle{
	  font-size:1.5rem;
  }
  #title div{
	  width:95%;
	  height:60%;
	  left:35px;
	  top:40px;
  }
  .card{
	  min-width:300px;
  }
}

@media only screen and (max-width: 500px) {

  #title{
	  font-size: 2rem;
	  text-shadow: -3px -3px rgb(253, 55, 55),3px 3px rgb(120, 71, 255);
  }#subtitle{
	  font-size:1rem;
  }
  #title div{

	  width:80%;
	  height:50%;
	  left:20;
	  top:35px;
  }
  .card{
	  min-width:200px;
  }
  .cardtitle{
	padding:0.5rem;
	margin:0;
	margin-bottom: 0.5rem;
	align-self:center;
	transform: translateZ(90px);
	position: relative;
	font-size: 2rem;
}
}