/* This is the style sheet */

html {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
*, *:before, *:after {
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
  }

.clear {
	content: " ";
  	display: table;
  	clear: both;
}

img {
	width: 100%;
	margin: 25px;
}

/**
 * CSS animation - glowing black box
 */
@keyframes rainbow {
	from, to { box-shadow: 0 0 15px 0 red }
	16% { box-shadow: 0 0 15px 0  yellow }
	32% { box-shadow: 0 0 15px 0  green }
	48% { box-shadow: 0 0 15px 0  aqua }
	64% { box-shadow: 0 0 15px 0  blue }
	80% { box-shadow: 0 0 15px 0  fuchsia }
}

body {
	color: white;
	background-color: black;
	
}

h1 {
	font-family: "Poppins", sans-serif;
	font-weight: 600;
	font-size: 18pt;
	text-align: center;
	margin: 25px 10px 10px 10px;
	color: darkgrey;
}

p {
	font-family: "Poppins", sans-serif;
	font-weight: 400;
	font-size: 12pt;
	margin: 25px;
}

div.color {
	background-color: black;
	position: absolute;
	padding: 27px 10px;
	width: 80px;
	height: 80px;
	border-radius: 40px;
	animation: rainbow 3s infinite;
	text-align: center;
	position: fixed;
	font-family: "Poppins", sans-serif;
	font-weight: 500;
}

a {
	text-decoration: none;
	color: #fff;
}

@media screen and (max-width: 399px) {
	body {
	  background-color: black;
	}
	div p {
		max-width: 300px;
	}
	.shadow {
		width: 100%;
	}
	div.color {
		top: 65px;
		left: 15px
	}
}

@media screen and (min-width: 400px) {
  body {
    background-color: black;
  }
  div p {
		max-width: 600px;
	}
  .shadow {
	max-width: 600px;
	}
	div.color {
		top: 65px;
		left: 15vw
	}
}

section.flex-box {
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: center;
	flex-wrap: wrap;
}

.mobilebtn {
	font-size: 16px;
	padding: 0 0.94rem;
	height: 3.375rem;
	text-align: center;
	border-radius: 4.5rem;
	text-decoration: none;
	background-color: darkred;
	margin: 25px;
}

.mobilebtn:hover {

}

#btntext {
	color: #fff;
	font-weight: 600;
	position: inherit;
	z-index: 3;
}