a:hover {
	 border-radius: 50px;
	 background-color: 	#ADD8E6;
	 border: 2px solid red;
}
a:active {
	color: #8B0000;
	background-color: #FFFFFF;
}
/*a:visited {
	color: #8B0000;
}*/
#infoblock {
	 border-radius: 15px;
}
#infoblock:hover {
	 border-radius: 50px;
	 background-color: 	#ADD8E6;
	 border: 2px solid red;
}
#techyblastheader {
	 border-radius: 15px 15px;
	 position: static;
	 padding-top: 50px;
}
#buyvip	{
	padding-top: 0px;
}
.cancelpayment {
	 border-radius: 15px;
}
#iframediscord {
	align-content: center;
}
#carouselExampleCaptions {
	  position: relative;
  	height: 50px;
  	align-content: center;
	height: auto;
    width: 100%;
    padding-top: 40px;
}
#stuffwedo {
	
	text-align: center;
}
#contact {
	padding-top: 80px;
	text-align: center;
}
#page-top {
	padding-top: 0px;
	background-color: #D3D3D3;
}
#discord {
	padding-top: 80px;
}
.contactus {
	padding-top: 80px;
	text-align: center;
}
.techyblastlogo {
	align-content: center;
	height: 10%;
	width: 10%;
}
.footer {
	position: relative;
	bottom: 0;
	left: 0;
	right: 0;	
	width: 100%;
	margin: auto;
}
.navbar-fixed-bottom {
	position: relative;
	bottom: 0;
	left: 0;
	right: 0;	
	width: 100%;
	margin: auto;
}
#contactusform {
	align-content: center;
}
.centerOfPage {
	text-align: center;
	bottom: 0;
	left: 0;
	right: 0;	
	width: 100%;
	margin: auto;
}


/*----------------------------- something fun page----------------------------*/
body {
  text-align: center;
  background-color: #283149;

}

h1 {
  font-size: 5rem;
  color: #DBEDF3;
  font-family: "Arvo", cursive;
  text-shadow: 3px 0 #DA0463;

}

footer {
  color: #DBEDF3;
  font-family: sans-serif;
}

.w {
background-image: url("images/tom-1.png");
}

.w {
  background-image: url("images/tom1.png");
  background-color: #cccccc;
}

.a {
  background-image: url("images/tom2.png");
  background-color: #cccccc;
}

.s {
  background-image: url("images/tom3.png");
  background-color: #cccccc;
}

.d {
  background-image: url("images/tom4.png");
  background-color: #cccccc;
}

.j {
  background-image: url("images/snare.png");
  background-color: #cccccc;
}

.k {
  background-image: url("images/crash.png");
  background-color: #cccccc;
}

.l {
  background-image: url("images/kick.png");
  background-color: #cccccc;
}


.set {
  margin: 10% auto;
}

.game-over {
  background-color: red;
  opacity: 0.8;
}

.pressed {
  box-shadow: 0 3px 4px 0 #DBEDF3;
  opacity: 0.5;
}

.red {
  color: red;
}

.drum {
  outline: none;
  border: 10px solid #404B69;
  font-size: 5rem;
  font-family: 'Arvo', cursive;
  line-height: 2;
  font-weight: 900;
  color: #DA0463;
  text-shadow: 3px 0 #DBEDF3;
  border-radius: 15px;
  display: inline-block;
  width: 150px;
  height: 150px;
  text-align: center;
  margin: 10px;
  background-color: white;
}
.pressed {
  box-shadow: 0 3px 4px 0 #DBEDF3;
  opacity: 0.5;
  }

/*----------------------------- squares and circles ----------------------------*/


.square1 {
  background-color: red;
  width: 150px;
  height: 150px;
  float: left;
}
.square2 {
  background-color: green;
  width: 150px;
  height: 150px;
  float: left;
}
.circle {
  background-color: blue;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  float: left;
}
/*----------------------------- cursor  ----------------------------*/
.cursor {
    position: absolute;
    width: 20px;
    height: 20px;
    background-color: red;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none; /* This ensures the cursor doesn't interfere with content interaction */
    transition: opacity 0.2s, transform 0.2s;
    mix-blend-mode: screen; /* To create the "explosion" effect */
    z-index: 9999; /* Ensure the cursor is on top of other content */
}